Sticky Add to Cart sur les PDP Shopify (2026)

Points clés

• Une barre sticky add to cart (ajout au panier fixe) garde le titre du produit, le prix, le sélecteur de variante et le bouton Ajouter au panier visibles à mesure que l’acheteur fait défiler une longue page produit - et se place en bas de l’écran sur mobile.
• Elle réduit les frictions sur les longues pages produits (PDP). Le bouton d’achat est toujours à portée de clic, les acheteurs n’ont donc jamais besoin de remonter la page pour acheter.
• La conception native est une barre fixe ou en CSS position:sticky, un IntersectionObserver qui l’affiche une fois que le bouton Ajouter au panier principal n’est plus visible, et un petit script qui synchronise la variante et le prix.
• Bien faite, elle ne pèse presque rien sur la page. Ajoutée via une application lourde, elle peut ajouter du JavaScript et du layout shift (décalage de mise en page) dont vous n’aviez pas besoin.
• Fudge conçoit la barre comme du code natif de thème - sans widget, respectant votre image de marque, et qui reste même si vous désinstallez l’application.

Une barre sticky add to cart est l’un des changements les plus impactants que vous puissiez apporter à une page produit Shopify. Sur une longue PDP contenant des avis, des caractéristiques et des images d’ambiance, le bouton d’achat principal disparaît rapidement de l’écran. Une barre fixe le garde accessible tout au long du défilement.

Ce guide explique en quoi consiste ce composant, son intérêt pour le CRO (optimisation du taux de conversion), les deux principales variantes, comment la créer nativement dans un thème, ainsi que les détails d’accessibilité et de performance qui différencient une bonne barre d’une barre agaçante.

Pourquoi vous pouvez nous faire confiance

Jacques a plus de 15 ans d’expérience en développement et a conçu des patterns de pages produit comme celui-ci sur des centaines de boutiques Shopify. Nous développons Fudge, un éditeur de vitrine IA noté 4.8 sur le Shopify App Store, nous travaillons donc sur la même couche de thème où réside une barre sticky, et nous voyons bien ce qui casse quand c’est mal fait.

Qu’est-ce qu’une barre sticky add to cart ?

Une barre sticky add to cart est une bande compacte qui reste fixée au bord du viewport pendant que le reste de la page défile. Elle reprend les éléments essentiels de la buy box principale : titre du produit, prix actuel, sélecteur de variantes, quantité et bouton Ajouter au panier.

Sur desktop, on la trouve le plus souvent en haut de l’écran. Sur mobile, elle se place en bas, à portée de pouce.

L’idée est simple. Le bouton Ajouter au panier principal n’est visible que tout en haut d’une PDP. Tout ce qui se trouve en dessous - la description, le guide des tailles, les avis, les infos de livraison, les produits liés - pousse le bouton d’achat hors de l’écran. Sans barre sticky, un acheteur qui lit jusqu’en bas et décide de passer à l’action doit remonter tout en haut. Ce scroll génère de la friction, et la friction coûte des conversions.

L’intérêt en CRO

La logique, c’est d’éliminer les étapes au moment de l’intention. Un acheteur prend souvent la décision d’acheter en lisant les détails plus bas sur la page. Une barre sticky lui permet de concrétiser cette décision immédiatement au de lieu de partir à la recherche du bouton.

L’effet est le plus important là où les PDP sont longues et où la majorité du trafic est sur mobile, ce qui correspond à la plupart des boutiques Shopify. Sur un petit écran, le bouton d’achat principal quitte le viewport après un seul swipe, la présence persistante d’une bottom bar a donc un vrai poids.

Une barre sticky n’est qu’une tactique parmi d’autres au sein d’une stratégie de page produit plus globale. Pour avoir une vue d’ensemble, consultez notre guide CRO Shopify, et pour les mécaniques de mise en page associées, lisez notre guide expliquant comment personnaliser une page produit Shopify.

Les deux patterns : barre supérieure vs barre inférieure sur mobile

Il y a deux formats courants, et la plupart des boutiques déploient les deux à l’aide du même code.

1. Top sticky bar sur desktop. Une barre fine fixée en haut de la fenêtre. Elle affiche généralement une miniature du produit, le titre, le prix, un menu de variantes compact et le bouton Ajouter au panier aligné à droite. Elle apparaît une fois que la buy box principale disparaît lors du scroll.

2. Bottom bar sur mobile. Une barre pleine largeur fixée en bas de l’écran, juste au-dessus du pouce. Sur mobile, l’espace d’écran est limité et la zone de contact principale est en bas, donc une barre inférieure convertit mieux qu’une barre supérieure. Elle rassemble souvent le sélecteur de variantes dans un menu sélecteur compact ou un volet qui s’ouvre au clic.

Le contenu est le même ; seuls le placement et la densité changent par breakpoint. Pensez à limiter la taille de la barre pour qu’elle ne recouvre jamais plus d’une mince bande de la page.

Comment coder une barre sticky add to cart nativement dans son thème

Vous n’avez pas besoin d’une app pour cela. Une construction native comprend trois parties : l’élément sticky, le déclencheur d’affichage, et la synchronisation des variantes.

1. L’élément sticky

Pour une barre qui suit l’acheteur tout au long de la page, utilisez un élément positionné en fixed ou sticky. La règle CSS position:sticky permet de maintenir un élément épinglé par rapport à son conteneur de défilement une fois qu’il franchit un seuil défini avec top ou bottom, et le navigateur gère cela via son compositor sans JavaScript.¹ Pour une barre qui doit sortir de la section du produit et suivre l’ensemble de la page, position:fixed sur un élément de premier niveau est le choix le plus simple, car sticky est contraint par son parent et peut être bloqué par un parent ayant un overflow:hidden.

Le balisage est un conteneur unique avec les éléments essentiels à l’achat, masqué par défaut :

<div class="sticky-atc" data-sticky-atc hidden>
    <span class="sticky-atc__title">Nom du produit</span>
    <span class="sticky-atc__price" data-sticky-price>49,00 €</span>
    <!-- le sélecteur de variante compact reflète le sélecteur principal -->
    <button type="submit" form="product-form-id">Ajouter au panier</button>
</div>

Notez l’attribut form. Un bouton peut soumettre un formulaire dans lequel il n’est pas imbriqué en référençant l’id de ce formulaire, ainsi la barre peut réutiliser le formulaire de produit existant du thème au lieu de le dupliquer.

2. L’afficher et le masquer avec IntersectionObserver

La barre ne doit apparaître qu’une fois que le véritable bouton Ajouter au panier a disparu de l’écran lors du défilement. La façon la plus efficace de détecter cela est d’utiliser IntersectionObserver, qui surveille un élément cible et déclenche un callback (fonction de rappel) lorsqu’il entre ou sort du viewport. Contrairement à un écouteur de défilement (scroll listener), il s’exécute de manière asynchrone hors du thread principal et ne se déclenche que lorsque le seuil est réellement franchi, évitant ainsi de s’exécuter à chaque frame du défilement.²

Ciblez le bouton d’achat principal pour basculer l’affichage de la barre :

const mainButton = document.querySelector('[data-main-atc]')
const bar = document.querySelector('[data-sticky-atc]')

const observer = new IntersectionObserver(
    ([entry]) => {
        bar.hidden = entry.isIntersecting // masquer la barre tant que le bouton principal est visible à l'écran
    },
    {rootMargin: '0px'},
)

observer.observe(mainButton)

Lorsque le bouton principal est visible, masquez la barre. Lorsqu’il disparaît, affichez-la. C’est tout le principe du mécanisme.

3. Synchroniser la variante et le prix

La barre n’est autre qu’un second point de vue d’un même article, elle est donc censée indiquer exactement quelle variante est sélectionnée. Pour ce cas de figure, la règle dicte qu’il ne doit y avoir qu’une seule source of truth : le formulaire produit principal.

Lorsque le client potentiel bascule d’une variante à l’autre depuis le sélecteur principal, la grande majorité des thèmes de l’Online Store 2.0 (Dawn et ses dérivés) émettent un événement change qu’il est possible d’analyser. Dès cet un événement acté, occupez-vous de l’actualisation tarifaire tout comme de son champ d’identification des variables de façon à ce qu’aucune désynchronisation n’apparaisse. Au kazou qu’elle intègre son sélecteur compact sur-mesure, ajustez-le pour qu’il modifie automatiquement le sélecteur principal sans qu’il ne procède au calcul du mode opératoire des composantes pour son cas spécifique.

4. L’ajout au panier

Il y a principalement deux moyens pour ajouter une référence au panier avec la barre :

• Réutiliser le formulaire produit. Connectez le bouton de la barre au formulaire du produit du thème avec l’attribut form que l’on a vu plus haut. De cette manière, les mécanismes d’enregistrement et d’ajouts préexistants s’occuperont de tout acheminer (tiroirs d’ajouts et pop-ups inclus).
• Requête POST via l’AJAX cart. Chargez un renvoi de la sélection du variant sur le script suivant : ID et quantity sur /cart/add.js. C’est une méthode POST traitant la chaîne d’un ensemble de produits/éléments listés par une structure items (munie chacune de l’id assortie d’une quantity), qui relancera une intégration ligne par ligne et codée sous format JSON, avec un avertissement sur une éventuelle erreur type 422 si l’élément s’avérerait dépasser les quotas disponibles ou déjà épuisé.³ Enfin, rafraîchissez le rendu de ce qui figure dans le panier puis déployez le volet.

La méthode de réutilisation des requêtes liées au formulaire de base est l’option la plus facile à implémenter, dans la mesure où le comportement naturel qu’offre Shopify reprend instantanément les caractéristiques intégrées relatives au fonctionnement général d’ajouts au paniers - pop-in latérale, pop-ups contextuels, incitations montantes (upsells) sans omettre les outils mesurants de l’ensemble (analytique de comportements).

Accessibilité : la garder accessible, ne pas la bloquer

Une barre sticky se superpose au contenu, et elle pose par définition de véritables questions relatives à l’accessibilité.

• Ne couvrez pas le contenu. Assurez-vous d’avoir anticipé cet élément fixe en ajoutant une certaine hauteur, la barre ne peut à aucun moment chevaucher un avis informatif comme les conditions relatives à la collecte des données utilisateur, un pied de page ni sur la ligne textuelle qui conclut la zone finale de la vue étudiée. En navigation mobile, prévoyez une insertion bas de page (un padding final) pour assurer au minimum le respect des délimitations physiques qu’imposeraient une barre classique.
• Gardez-la dans l’ordre de tabulation et ne piégez pas le focus. On doit pouvoir accéder et interagir au bouton sans l’intervention de l’interface de pointage classique (souris), et aucune incertitude vis-à-vis des basculements de zones ne devraient y être perçus. Le bandeau de menu qui nous intéresse ne peut pas prendre le pas d’une pop-up dédiée (fenêtre type modal), veillez à ne l’avoir ni isolé ni figé en permanence sur ce champ de données.
• Respectez les critères de contraste. Le texte et l’appel à l’action ont intérêt à offrir des éléments chromatiques justifiants la nuance employée avec un recul appréciable aux contrastes, selon des considérations que justifieraient le reste de ce qui constitue la charte graphique abordée.
• Annoncez le prix. Lorsque la modification s’applique vis-à-vis du tarif et de ce qu’elle désigne, nul n’est censé redouter son adaptation (au titre informatif), bien au contraire : assurez l’évidence d’une mise en lumière d’une variable au détriment d’intempestives et dérangeantes manifestations de relances actives de contextes à chaque instant (annonces live-region).
• Respectez le reduced motion. Si certaines animations conditionnent la mise en marche d’un de vos champs, attardez-vous à désamorcer l’affichage de contextes qu’imposeraient les déclenchements chez ceux ayant opté sur des limitations d’animations (prefers-reduced-motion).

Performance : très légère si bien construite

Le paramétrage classique s’affiche presque pour un coût d’usage nul. L’allocation de fonction reposant sur position:sticky avec l’appui sur un mode position:fixed garantira un maintien constant en interne via compositeur d’interface dédié du navigateur, tandis qu’une observation type IntersectionObserver offrira bien mieux contre les anciens contextes qui s’appuyaient aux coûteux et trop courants observatoires déroulants traditionnels (scroll listeners). En somme on aborde, le cas échéant, de menus réglages de CSS en harmonie d’un bref module structurant un JavaScript allégé, point final.

Le prix à payer, quant à la lourdeur d’intégration, incombe bien mieux des applications (apps). En effet, qu’une interface intègre le parti de décliner ou bien insère avec excès la charge requise par chacune de ces exécutions, l’ensemble se chiffre (layout-shift) à partir du décalage (insertion ralentie du bandeau) qu’impartit de base tout code adossé, sachant que toute seconde à ce petit jeu coûte de précieuses étapes pour mener de concert, ce pour une transformation optimisée du trafic perçu vers votre chiffre d’affaires.

Si votre vue est plombée en temps, reprenez en premier ce pan avant toute manipulation annexe : fiez-vous au document qui propose comment optimiser la vitesse d’un thème Shopify pour anticiper les erreurs d’inclusions multiples.

Quand éviter d’utiliser un sticky add to cart

La démarche ne rime pas obligatoirement par universalisme et de bon ton pour toutes. Relativisez vos choix suivant certains enjeux si :

• Votre PDP est courte. Qu’une incitation principale (le bouton achat) est couverte en permanence de bout en bout de vue, un ajout flottant alourdit visuellement l’environnement au grand dam d’un manque problématique concret au global.
• L’espace à l’écran est précieux. Dans des espaces d’interfaces bien plus menues (les viewports des environnements mobiles en exemple), une insertion superposée ou accaparante serait en mesure de phagocyter plus de contenus utiles qu’elle ne simplifie. En conclusion, mieux vaut alors l’amaigrir ou la priver des éléments inutiles.
• Le produit doit être configuré avant l’achat. Concernant de strictes sélections requérantes des choix obligatoires, tout raccourci mal à propos aux vues d’opérations sur-mesure induirait irrésistiblement d’improbables requêtes au bout ou provoquerait au final la frustration des demandes erronées générant des abandons mal perçus.
• Il rentre en conflit avec d’autres éléments fixes. Outil interactifs conversationnels, affichages des contextes de traçage clientèles (cookies), encarts temporaires commerciaux (bandeau annonces contextuelles temporaires), de trop nombreuses entités se superposent hélas ensemble sous peu pour créer un amoncellement absurde. Considérez cet encart visuel tout autant qu’un panel préalable à de multiples ajouts qui s’en suivent pour éviter ces accumulations.

App vs Natif : les compromis

La possibilité d’addition d’une bande fixée est accordée en une série brève de manipulation au cours d’une configuration app avec la garantie, il est vrai, sur l’abord de compétences (sans expertise), d’une relative entrée en la matière bien compréhensible de la part des porteurs de sites marchands débutants. Ces contextuelles simplifications de développement (via des apps) concèdent en revers des tarifs forfaitaires au mensuel : abonnement sous-jacent, inclusions multiples (via JavaScript supplémentaire), adossement inadapté au thème déployable mais aussi une dépendance globale forte — au final l’application disparaîtra en des installations mal définies et il en va également de cette insertion du bandeau, lui emboîtant le pas immédiatement.

Le fait quant à lui d’aborder la version au standard pur dit code natif contourne ces points avec brio. Le hic serait tout de par que le travail réclame pour le coup la réalisation par exécution aux mains d’un vrai initié la rédaction des consignes relatives à la synchronisation à assurer (volet abordé), le tout afin de proposer toutes conditions acceptables vis-à-vis des contraintes (vues en amont au rayon inclusion de codes - d’outils annexés ou d’accessibilités globales). Que vous inspire un autre biais plus facile mais performant pour solution idéale ?

Là où Fudge intervient

L’interface de notre produit Fudge allie l’outil (un mode interactif d’édition de la boutique marchande axé intelligence artificielle) se spécialisant dans la codification d’un rendu aboutissant au code de thème natif exclusivement. Vous adressez une petite phrase — “Je désire un sticky add to cart de la façon d’un appui d’ajout qui figure de façon superposée suite du déroulé complet de la requête de base avec sur mobile le cas d’une barre s’alignant sur l’assise du terminal avec suivi permanent du module des prix ainsi que l’alignement des sélections des produits” — voilà, sans autre fioriture notre entité mettra d’applomb ce modèle sur Liquid, CSS pur au mieux ou encore au fil du script qui s’assimile direct vers ses trames constitutives sur la matrice thématique propre au commerce lui-même.

La génération propre (par une programmation de format local via votre code exclusif natif) assure qu’aucun module additionnel par intégration tierce (dite dépendante) n’interfère avec affichages ou lenteurs parasites quant à ce panel applicatif (ni exécutions en redondances scriptées n’embaumant des requêtes répétées et à la fin de quelconques surfacturations forfaitaires, soit dit au passage). Cela semble appartenir d’instinct à cet outil propre sur des données affichant les mêmes trames qui se devinent (sans qu’une insertion maladroite et greffée forcée en apparaisse).

Cette trame est la partie directe du cadre général (votre propre thème de déploiement) sous d’autres termes cela subsiste avec exactitude l’opérationnalité que l’outil l’ait mis à jour et quand bien même l’abonnement est mis sur nullité - au final l’ajout flotte perpétuellement contrairement à ces exécutions sous conditions restrictives ou pires qu’elles dépendent purent sur leurs instanciations au déploiement des apps. C’est le principe qui est le même pour tout le reste de ce que vous créez avec le Shopify store editor ou le Fudge page builder.

Si vous cherchez un pattern d’achat rapide pour vos pages collections aussi, jetez un oeil à la modale Shopify quick view, qui permet aux acheteurs d’ajouter au panier sans avoir à ouvrir la PDP complète.

FAQ