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 existe aussi en vidéo

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

Besoin de déléguer votre SAV ?

Si vous avez besoin d'une personne pour gérer votre SAV j'ai la perle rare 😉 contactez moi en MP ou cliquez sur le bouton ci-dessous:

Je veux déléguer mon SAV

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

Cet article a 10 commentaires

  1. Bon bah je vais attendre la vidéo je pense! Sur Brooklyn c’est bizarre. Pas vraiment de soucis sur desktop mise à part que le bouton du checkout ne s’affiche pas même en mode ‘oui’ (dans le code il y a une classe ‘class= »quantity-selector’, si c’est pour un sélecteur de quantité.. il ne s’affiche pas non plus). Mais la version mobile c’est un vrai carnage, à 0px sa prend tout l’écran! du coup.. la je suis arrivé à 500px la barre est sympa quand je scroll vers le haut, mais vers le bas elle me fait un gros block qui prend 1/4 de l’écran. Je désespère!!! lol Surtout que je comptait retiré le bouton checkout qui est dans la description pour le remplacer par ta jolie sticky bar. Vite la video Dgeo

    1. Oui je conseille d’attendre la vidéo pour y voir plus clair 🙂 nous avons quelques soucis avec YT donc la vidéo sera proposée certainement pas avant septembre. Le temps de régler les soucis 🙂 bonne journée.

  2. Bonjour,
    Merci pour ce tuto, comment pourrait on rendre les constantes administrables ?
    Et d’un point de vue « codage » pur, n’est il pas conseillé de dissocier le css, le js de l’html dans le liquid ? ou en terme de performances c’est pareil et autant tout mettre dans le snippet ?
    Merci d’avance

    1. Hello, pour rendre le tout administrable il passer par de la configuration json proposée par shopify et donc créer une section spécifique. Pour en savoir plus vous pouvez regarder ma chaine youtube et la playlist créer un thème shopify pour comprendre la chose (vidéo sur la configuration json des sections)
      Il est effectivement plus propre de spliter les choses mais étant donné que mets tutos sont essentiellement dédiés aux néophytes je simplifie au max 😉 mais si vous pouvez et savez le fair alors nous vous en privez pas !

  3. Bonjour, merci pour votre tutoriel j’en regarde beaucoup de vous.
    Seulement petit bémol, quand je souhaite mettre la sticky bar en bas de page elle prend tout l’écran et en haut elle marque nickel. Je suis sur le thème début.
    Comment puis je régler ce problème ?
    Merci de votre attention
    Cordialement

    1. Bonsoir et merci pour le commentaire. Essayez de trouver le bottom:0; et rajoutez en dessous top:auto; et cela devrait résoudre le soucis. Bonn soirée.

  4. Salut,
    Merci pour tes tutos ils m’aident beaucoup, j’ai juste un petit souci j’ai voulu l’ajouter sur le theme impulse ça marche très bien sur la page produit mais ça ne marche pas sur la home page c’est une boutique avec un produit vedette et j’aimerai que le sticky soit sur la home page est ce que tu as une solution pour moi ?
    Merci

    1. Hello, étrange il faudrait voir avec le support du thème car logiquement ca devrait fonctionner.

  5. Salut Dgeo, peux ont rajouter une option pour changer la couleur du bouton, et éviter que celui ci prenne la couleur du bouton ajout au panier de notre site directement 🙂 merci

    1. Hello, tu peux rajouter ca dans la partie css 😉
      .dg-sticky-bar button {
      background:#couleurhexadecimale;
      color:#couleurhexadecimale;
      }

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