Nous allons voir dans ce tutoriel comment créer un système de sticky bar sur Shopify ! Alors une Sticky bar c’est quoi ? C’est tout simplement une barre fixée au scroll avec un accès rapide à l’achat d’un produit avec le choix des variantes associées.

Un peu plus d’explications sur ce Tuto

Nous allons créer un Snippet avec la possibilité de choisir les textes, le placement de la barre et d’autres options… Ce snippet sera ensuite appelé et affiché uniquement si un produit est détecté donc sur la page produit et sur une mise en avant d’un produit de la page d’accueil.

Comment installer cette Sticky bar ?

Rendez-vous dans Boutique en Ligne – Actions – Modifier le code – Dossier Snippet -> Créer un nouveau snippet et nommez-le « dg-stickybar » . A l’intérieur de celui ci copiez/collez le code suivant:

{% if product.available %}

{% comment %}
Légende :
stickybar_position : haut / bas
stickybar_direct_checkout : oui / non
stickybar_atc_text : texte au choix
{% endcomment %}

<!-- Options -->

{% assign stickybar_position = "haut" %} 
{% assign stickybar_direct_checkout = "non" %}
{% assign stickybar_atc_text = "Ajouter au panier" %}

<!-- optionnel -->

{% assign stickybar_position_top_desktop = "0px" %} 
{% assign stickybar_position_top_mobile = "0px" %}

<!-- Fin des options -->

<div class="dg-sticky-bar sticky-position-{{ stickybar_position }}" >

  <div class="dg-sticky-bar-left">    
    <strong class="dg-sticky-bar-title">{{ product.title }}</strong>
  </div>
  <div class="dg-sticky-bar-right">    

    {% form 'product', product, class: "addToCartForm" %}

    <select name="id" aria-label="variants"  >
      {% for variant in product.variants %}
      {% if variant.available %}
      <option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{% if variant.title != "Default Title" %} {{ variant.title }} - {% endif %} {{ variant.price | money_with_currency }}</option>
      {% endif %}
      {% endfor %}
    </select>

    <input type="number" name="quantity" value="1" min="1" class="quantity-selector">
    {% if stickybar_direct_checkout == "oui" %}
    <input type="hidden" name="return_to" value="/checkout" />
    {% endif %}
    <button type="submit" name="add" class="btn addToCart add-to-cart {% if sold_out %}no-stock{% endif %} ">
      <div class="addToCartText">{{ stickybar_atc_text }}</div>
    </button>
  </div>  

  {% endform %} 
</div>



<style>
  .dg-sticky-bar {
    padding:7px 12px;
    background:#FFF;
    box-shadow:0 0 15px rgba(111,111,111,0.2);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
    position:fixed;
    z-index:9999;
    {% if stickybar_position == "haut" %}
    top:{{ stickybar_position_top_desktop }};   
    {% endif %}
    {% if stickybar_position == "bas" %}
    bottom:0;
    {% endif %}
    width:100%;
  }
  .dg-sticky-bar-left, .dg-sticky-bar-right {
    display:flex;    
    align-items:center;
  }
  .dg-sticky-bar select, .dg-sticky-bar input, .dg-sticky-bar button {
    height:40px;
    font-size:15px;
    line-height:15px;
  }
  .dg-sticky-bar select, .dg-sticky-bar input {
    margin-right:5px; 
  }
  .dg-sticky-bar input[type="number"] {
    max-width:90px;
    display:none;
  }
  @media screen and (max-width: 749px) {
    .dg-sticky-bar {
      top:{{ stickybar_position_top_mobile }};
    }
    .dg-sticky-bar-left { display:none; }
    .dg-sticky-bar-right, .dg-sticky-bar-right form { width:100%; }
    .dg-sticky-bar-right select, .dg-sticky-bar-right button {
      width:48%;
      padding-top:5px;
      padding-left:5px;
      padding-bottom:5px;
      font-size:12px;
    }
    .dg-sticky-bar-right button {
      padding:5px;
      float:right;
    }
  }
  
</style>

<script>
  
  const dgStickyBar = () => {
    const dgStickyBar = document.querySelector('.dg-sticky-bar');
    dgStickyBar.style.display = "none";
    window.onscroll = () => {
      if(window.scrollY > 200) {
        dgStickyBar.style.display = "flex";
      } else {
        dgStickyBar.style.display = "none";
      }
    };
  }
  
  document.addEventListener('DOMContentLoaded', dgStickyBar);  
  
</script>

{% endif %}

Rendez-vous maintenant dans le – Dossier Layout et ouvrez le fichier theme.liquid.  Repérez le balise body <body … > et sur la ligne en dessous copiez/collez le code suivant:

{% include 'dg-stickybar' %}

Explication des options

  • {% assign stickybar_position = « haut » %} = Position de la sticky bar – mettre « haut » ou « bas »,
  • {% assign stickybar_direct_checkout = « oui » %} = Direct Checkout  – mettre « non » ou « oui »,
  • {% assign stickybar_atc_text = « Ajouter au panier » %} = Texte du bouton ajouter au panier  – texte au choix…
  • {% assign stickybar_position_top_desktop = « 0px » %} = Position de la sticky bar – sur Desktop (voir la vidéo pour en savoir plus sur le placement),
  • {% assign stickybar_position_top_mobile = « 0px » %} = Position de la sticky bar – sur Mobile (voir la vidéo pour en savoir plus sur le placement).

Besoin de personnaliser le design ?

Je vous invite à regarder la vidéo !

Ce que nous n’aurez pas…

La possibilité d’interagir avec les changements de variantes natifs des thèmes !

Pourquoi ? tout simplement car chaque thème est développé différemment… Il est donc impossible de prévoir tous les cas de figure… Donc le changement de variantes est dissocié et fonctionne indépendamment du reste.

Un placement automatique selon vos headers fixés sur PC et Mobile !

En effet on ne peut prévoir si votre thème a déjà un truc fixé au scroll ! Par contre dans la vidéo je vous donne la possibilité de bouger la sticky bar en conséquence sur PC et Mobile afin de le placer au pixel près 😉

Ce tutoriel Shopify existe aussi en Vidéo

La vidéo arrive bientôt 😉

Merci de me laisser une petite note 😉
[Note moyenne de: 5 sur 1 votes]

🤗 Vous souhaitez me remercier pour mes Tutos ?

Cliquez sur le bouton ci-dessous pour m'encourager à continuer 😉

Payer un Café à Dgeo Dev

Laisser un commentaire

Fermer le menu

Envie d'apprendre à Coder et Maitriser ton Thème Shopify  ?

Alors abonne-toi à la chaine et active la cloche pour ne pas louper l'arrivée des prochaines vidéos !

S'abonner à la chaine