Barre d'achat collante sur Shopify : quand l'ajouter et comment la coder

L'article sur la fiche produit mobile décrit où se trouve le bouton ; celui-ci traite la barre qui le double. Pour le bandeau de consentement, voir le bandeau de cookies et la zone d'achat.

Ce que nous avons mesuré

Le 23 octobre 2026, nous avons chargé 54 fiches de 27 boutiques accompagnées sur un écran de téléphone de 844 px de haut, en visiteur anonyme. Après le chargement, la page est défilée à 1 400 puis à 2 600 px, et nous relevons tout élément fixe qui contient un bouton d'achat. La barre est donc détectée au défilement, pas forcément à l'arrivée.

Parmi les 21 fiches dont le bouton est à 1,5 écran ou plus, 9 n'ont aucune barre : l'acheteur y défile sans repère. À l'inverse, une barre de 82 px occupe près de 10 % d'un écran de 844 px, et la plus haute en prend 16 %. L'absence de barre se paie en défilement, sa présence en surface perdue. Deux fiches n'ont qu'une barre fixe comme bouton d'achat dans la page.

Quand elle sert et quand elle ne sert pas

La barre sert quand le bouton est sous la première vue, ce qui concerne 39 des 48 fiches avec bouton dans le flux, ou quand la fiche est longue et que l'acheteur lit le descriptif avant de décider. Elle ne sert pas, ou mal, dans quatre cas.

• Le prix est absent de la première vue. La barre ne remplace pas la hiérarchie de la fiche : prix et bouton restent à remonter.
• Un bandeau de consentement recouvre le bas de l'écran. Les deux se disputent la même zone, voir l'article sur le bandeau.
• Un chat ou un widget occupe le coin du bas. Un chat natif de Shopify est détecté sur 8 des 27 boutiques de notre échantillon : décalez-le au-dessus de la barre.
• La barre est trop haute. À 138 px, elle masque presque un sixième de l'écran.

Le comportement attendu

La règle qui évite l'effet gênant : la barre n'existe que lorsque le bouton principal n'est pas à l'écran. Elle est visible à l'arrivée si le bouton est sous la première vue, disparaît quand le bouton entre dans l'écran, et revient quand il est dépassé.

Le code

Trois fichiers suffisent : un extrait Liquid pour la barre, quelques lignes de CSS, un court script. Le bouton de la barre est relié au formulaire principal par l'attribut form : un clic envoie donc le même formulaire que le bouton d'origine, sans dupliquer la logique d'ajout au panier.

1. L'extrait Liquid

{%- comment -%} snippets/sticky-atc.liquid : barre d'achat reliée au formulaire produit {%- endcomment -%}
{%- assign form_id = 'product-form-' | append: section.id -%}
<div class="sticky-atc" data-sticky-atc inert>
  <div class="sticky-atc__info">
    <span class="sticky-atc__title">{{ product.title | escape }}</span>
    <span class="sticky-atc__price">{{ product.selected_or_first_available_variant.price | money }}</span>
  </div>
  <button type="submit" form="{{ form_id }}" class="sticky-atc__btn"
    {%- unless product.selected_or_first_available_variant.available %} disabled{% endunless %}>
    Ajouter au panier
  </button>
</div>

2. Le formulaire produit

Le formulaire principal reçoit l'identifiant utilisé par la barre, et son bouton d'achat porte l'attribut data-sticky-target.

{% form 'product', product, id: form_id %}
  ...
  <button type="submit" name="add" data-sticky-target>Ajouter au panier</button>
{% endform %}

3. Le CSS

.sticky-atc {
  position: fixed; inset: auto 0 0 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid rgba(0, 0, 0, .12);
  transform: translateY(100%); transition: transform .2s ease;
}
.sticky-atc.is-visible { transform: translateY(0); }
@media (min-width: 750px) { .sticky-atc { display: none; } }
@media (prefers-reduced-motion: reduce) { .sticky-atc { transition: none; } }

4. Le JavaScript

(() => {
  const bar = document.querySelector('[data-sticky-atc]');
  const cible = document.querySelector('[data-sticky-target]');
  if (!bar || !cible || !('IntersectionObserver' in window)) return;
  const apresPassage = false; // true : n'afficher la barre qu'une fois le bouton dépassé
  new IntersectionObserver(([e]) => {
    const afficher = !e.isIntersecting && (!apresPassage || e.boundingClientRect.top < 0);
    bar.classList.toggle('is-visible', afficher);
    bar.toggleAttribute('inert', !afficher);
  }).observe(cible);
})();

Le script surveille le bouton principal. Le paramètre apresPassage choisit le comportement : à false, la barre est visible dès l'arrivée si le bouton est sous la première vue ; à true, elle n'apparaît qu'une fois le bouton dépassé. Tant qu'elle est masquée, l'attribut inert la retire du parcours au clavier.

Ce qu'il reste à adapter

• Le prix et la variante. Le prix de l'extrait est celui de la variante affichée au chargement. Pour suivre le choix du visiteur, mettez-le à jour avec l'événement de changement de variante de votre thème.
• Le libellé. L'extrait contient « Ajouter au panier » en dur ; utilisez les fichiers de langue du thème si la boutique est multilingue.
• La hauteur. Visez 70 px ou moins : c'est plus compact que la plupart des 26 barres relevées, dont la médiane est de 82 px.
• Le chat et le bandeau. Vérifiez leur ordre d'empilement avec la barre sur un téléphone réel.

Mesurer l'effet

Ne concluez pas d'un seul mois. Instrumentez l'ajout au panier en distinguant le bouton d'origine de celui de la barre, avec un paramètre propre dans votre événement de suivi, puis comparez des périodes de même durée en séparant mobile et ordinateur. La méthode de recette des événements est décrite dans le guide du plan de marquage GA4. Le développement Shopify Liquid d'EXPERAISE couvre l'intégration dans un thème sur mesure.

Checklist

1. La barre n'apparaît que lorsque le bouton principal n'est pas à l'écran.
2. Elle fait moins de 70 px de haut et ne masque ni le bandeau de consentement ni le chat.
3. Son bouton envoie le formulaire principal et reste désactivé tant qu'une variante n'est pas disponible.
4. Elle est retirée du parcours au clavier tant qu'elle est masquée.
5. Elle respecte la zone sûre des téléphones et l'option de réduction des animations.
6. L'ajout au panier depuis la barre est distingué dans le suivi.

Questions fréquentes

Une barre d'achat collante améliore-t-elle la conversion ?

Nous n'avons pas mesuré d'effet. Elle garde le bouton accessible quand il n'est pas à l'écran ; son effet se vérifie par un test en comparant l'ajout au panier sur des périodes de même durée.

Quelle hauteur donner à une barre d'achat collante ?

Moins de 70 px si possible. Sur 26 barres relevées, la hauteur va de 60 à 138 px, avec une médiane de 82 px.

Faut-il une application pour une barre d'achat collante ?

Non, quelques dizaines de lignes de Liquid, de CSS et de JavaScript suffisent, comme dans l'exemple de cet article. Une application évite d'écrire le code, mais ajoute un script à la page.

Comment afficher la barre seulement quand le bouton n'est plus visible ?

Avec un IntersectionObserver placé sur le bouton principal : la barre est affichée quand il sort de l'écran et masquée quand il y entre.

Comment éviter que la barre masque le bandeau de cookies ou le chat ?

En réglant leur ordre d'empilement et en décalant le chat au-dessus de la barre. Testez sur un téléphone réel avec une navigation privée.

La barre d'achat collante est-elle utile sur ordinateur ?

Le code proposé la masque dès 750 px de large : sur grand écran, le bouton reste généralement visible, et la barre n'a pas d'intérêt démontré dans notre relevé, qui porte sur mobile.

Continuer avec EXPERAISE

• Développement Shopify Liquid
• Guides Liquid et performance
• Audit CRO Shopify
• Étude de cas Maison Jearom

---

Sources officielles

• MDN : Intersection Observer API
• MDN : l'attribut inert
• MDN : la fonction CSS env()

Mesure EXPERAISE : 54 fiches produit publiques de 27 boutiques accompagnées, relevé du 23/10/2026 (heure de Paris), écran de 844 px de haut, visiteur anonyme, un seul passage, barre détectée après défilement à 1 400 et 2 600 px. Code testé dans Chrome sur un écran émulé de 844 px de haut.