Comment Créer une Sticky Bar sur Shopify

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 Extrait (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 Extraits (Snippets) -> Créer un nouveau extrait 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 button 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;
    min-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 defer>
  
  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 Mise ne page (Layout) et ouvrez le fichier theme.liquid.  Repérez le balise body <body … > et sur la ligne en dessous copiez/collez le code suivant:

Vous pouvez également vous rendre sur une fiche produit – créer une section code liquid et mettre ce code dans le champ code liquid ! (Dawn)

{% render '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: 4.8 sur 6 votes]

Besoin d'aide ?

Vous avez un problème pour faire fonctionner ce tutoriel ou vous avez un besoin spécifique ?
Nous pouvons le faire pour vous ! pour ce faire merci de prendre contact avec notre équipe.

En savoir plus

🤗 Vous souhaitez me remercier pour mes Tutos ?

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

Payer un Café à Dgeo Dev

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 16 commentaires

  1. dams

    28 Juil 2021 Répondre

    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. Dgeo Dev

      30 Juil 2021 Répondre

      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. skrime

    31 Août 2021 Répondre

    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. Dgeo Dev

      2 Sep 2021 Répondre

      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. Lucas

    3 Oct 2021 Répondre

    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. Dgeo Dev

      3 Oct 2021 Répondre

      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. Mary

    17 Oct 2021 Répondre

    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. Dgeo Dev

      20 Oct 2021 Répondre

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

  5. Dylan

    25 Oct 2021 Répondre

    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. Dgeo Dev

      26 Oct 2021 Répondre

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

  6. milky

    27 Jan 2023 Répondre

    Bonjour, je me demandais comment changer la couleur de fond du menu deroulant du sticky pour choisir sa variante. merci

  7. Riko

    25 Avr 2023 Répondre

    Bonjour, merci pour ce code !

    Néanmoins, quand on charge la page, la barre apparait pendant .5 seconde avant de disparaitre.

    Comment ajouter une animation fadein ou alors différer le chargement s’il vous plait ?

    Cordialement

  8. Valentin Hartmann

    2 Août 2023 Répondre

    Hello,
    merci pour la vidéo. Pour moi, ça marche nickel, mais j’ai juste un petit problème. Tu as expliqué dans la vidéo que le header était parfois accompagné du scroll. Pour moi, il est accompagné quand je scroll vers le haut, mais pas quand je scroll vers le bas. Tu sais comment je pourrais désactiver cet accompagnement quand je scroll vers le haut ? Merci pour ton aide.

  9. gabriel

    29 Sep 2023 Répondre

    quand je selection bas pour la position de la barre, celle-ci prend 100% de la hauteur de la page et elle se met au milieu, du coup on ne vois plus rien. Avez-vous une solution?

    1. Dgeo Dev

      13 Oct 2023 Répondre

      Bonjour, avez-vous solutionné votre problème ? sinon vous pouvez me contacter ici pour qu’on puisse voir ce qu’on peut faire 😉 https://speed-ecom.eu/support

Laisser un commentaire

Fermer le menu
×
×

Panier