Sticky Add to Cart sur les PDP Shopify (2026)

Points clés

• Une barre sticky add to cart garde le titre du produit, le prix, le sélecteur de variante et le bouton Ajouter au panier visibles pendant 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 PDP. Le bouton d’achat est toujours à portée de clic, les acheteurs n’ont donc jamais besoin de remonter pour acheter.
• L’intégration native consiste en une barre CSS position:sticky ou fixed, 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 fait, cela n’alourdit presque pas la page. Fait via une application lourde, cela peut ajouter du JavaScript et du layout shift dont vous n’aviez pas besoin.
• Fudge construit la barre en tant que code natif du thème - pas de widget, respectueux de votre image de marque, et elle reste si vous désinstallez l’app.

Une barre sticky add to cart garde le bouton d’achat à portée de main sur une longue page produit Shopify. Sur une longue PDP avec des avis, des caractéristiques et des images lifestyle, le bouton d’achat principal disparaît vite de l’écran. Une barre sticky permet de le garder accessible tout au long du scroll.

Ce guide explique ce qu’est ce pattern, son intérêt pour le CRO, les deux variantes principales, comment le construire 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 construit des patterns de page produit comme celui-ci sur des centaines de boutiques Shopify. Nous construisons Fudge, l’opérateur IA pour les boutiques Shopify, avec une note de 4.9 sur le Shopify App Store, nous travaillons donc sur la même couche de thème où réside une barre sticky et voyons 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 l’essentiel du bloc d’achat principal : le titre du produit, le prix actuel, le sélecteur de variantes, la quantité et le bouton Ajouter au panier.

Sur desktop, elle se place généralement en haut de l’écran. Sur mobile, elle se place en bas, à portée de pouce.

L’objectif est simple. Le bouton Ajouter au panier principal n’est visible que près du 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 d’acheter doit remonter tout en haut. Ce défilement crée de la friction, et la friction coûte des conversions.

L’argument CRO

La logique est de supprimer les étapes au moment de l’intention d’achat. L’acheteur prend la décision d’acheter en lisant les détails plus bas sur la page. Une barre sticky lui permet d’agir sur cette décision immédiatement au lieu de chercher le bouton.

L’effet est le plus important là où les PDP sont longues et où le trafic est majoritairement 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, donc une barre inférieure persistante a un réel impact.

Une barre sticky est une tactique parmi une stratégie plus large pour la page produit. Pour avoir une vue d’ensemble, consultez notre Guide CRO Shopify, et pour la mécanique de mise en page autour de cela, comment personnaliser une page produit Shopify.

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

Il existe deux formats courants, et la plupart des boutiques intègrent les deux à partir du même code.

1. Barre sticky en haut sur desktop. Une barre fine épinglée en haut de la fenêtre. Elle affiche généralement une miniature du produit, le titre, le prix, un menu déroulant compact pour les variantes et le bouton Ajouter au panier aligné à droite. Elle apparaît une fois que la buy box principale a disparu au scroll.

2. Barre en bas sur mobile. Une barre sur toute la largeur épinglée en bas de l’écran, juste au-dessus du pouce. Sur mobile, l’espace à l’écran est limité et la zone d’accès facile est en bas, une barre inférieure est donc plus facile à atteindre qu’une barre supérieure. Elle réduit souvent le sélecteur de variante à un select compact ou à une bottom sheet qui s’ouvre au clic.

Le contenu est le même ; seuls l’emplacement et la densité changent selon le breakpoint. Gardez la barre fine pour qu’elle ne couvre jamais plus d’une petite bande de la page.

Comment construire un sticky add to cart nativement dans votre thème

Vous n’avez pas besoin d’une application pour cela. Une construction native comporte trois parties : l’élément sticky, le déclencheur d’affichage/masquage et la synchronisation de la variante.

1. L’élément sticky

Pour une barre qui suit l’acheteur tout au long de la page, utilisez un élément à positionnement fixe ou sticky. La règle CSS position:sticky maintient un élément épinglé par rapport à son conteneur de défilement une fois qu’il franchit un seuil que vous avez défini avec top ou bottom, et cela est géré sur le compositeur du navigateur sans JavaScript.¹ Pour une barre qui doit sortir de la section produit et suivre la page entière, 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 cassé par un ancêtre avec overflow:hidden.

Le markup est un simple conteneur avec l’essentiel pour l’achat, caché 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>
    <!-- compact variant select mirrors the main picker -->
    <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, de sorte que la barre peut réutiliser le formulaire de produit existant du thème au lieu de le dupliquer.

2. L’afficher et la masquer avec IntersectionObserver

La barre ne doit apparaître qu’une fois que le vrai bouton Ajouter au panier n’est plus visible. La méthode la plus efficace pour détecter cela est l’IntersectionObserver, qui surveille un élément cible et déclenche un callback lorsqu’il entre ou sort du viewport. Contrairement à un écouteur de scroll, il s’exécute de manière asynchrone en dehors du main thread et ne se déclenche que lorsque le seuil est réellement franchi, évitant ainsi de s’exécuter à chaque frame de scroll.²

Ciblez le bouton d’achat principal et basculez l’affichage de la barre :

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

const observer = new IntersectionObserver(
    ([entry]) => {
        // masque la barre tant que le bouton principal est à l'écran ou encore sous la ligne de flottaison
        bar.hidden = entry.isIntersecting || entry.boundingClientRect.top > 0
    },
    {rootMargin: '0px'},
)

observer.observe(mainButton)

Lorsque le bouton principal est visible, ou encore sous la ligne de flottaison au chargement de la page, masquez la barre. Une fois que l’acheteur a scrollé plus bas, affichez-la. C’est toute la mécanique.

3. Garder la variante et le prix synchronisés

La barre est une seconde vue du même produit, elle doit donc refléter la variante actuellement sélectionnée. La règle est d’avoir une seule source de vérité : le formulaire principal du produit.

Lorsque l’acheteur modifie une variante dans le sélecteur principal, la plupart des thèmes Online Store 2.0 (Dawn et ses descendants) déclenchent un événement de changement que vous pouvez écouter. Lors de cet événement, mettez à jour le prix affiché sur la barre et l’input caché de l’ID de la variante pour que les deux vues ne soient jamais en désaccord. Si la barre possède son propre sélecteur compact, câblez-le pour écrire en retour sur le sélecteur principal au lieu de suivre l’état de son côté.

4. Soumettre au panier

Vous avez deux façons d’ajouter au panier depuis la barre.

• Réutiliser le formulaire du produit. Pointez le bouton de la barre vers le formulaire de produit du thème avec l’attribut form ci-dessus. La gestion existante de l’ajout au panier du thème prend le relais, y compris son tiroir de panier (cart drawer).
• Faire un POST vers le panier AJAX. Envoyez l’ID de la variante sélectionnée et la quantité à /cart/add.js. C’est un POST qui prend un tableau items (chacun avec id et quantity), retourne les articles ajoutés en JSON, et renvoie une erreur 422 si la variante est épuisée ou dépasse le stock disponible.³ Après un succès, mettez à jour le compteur du panier et ouvrez le tiroir.

Réutiliser le formulaire de produit est l’option par défaut la plus fiable, car elle hérite de tout ce que le thème fait déjà lors de l’ajout - tiroir, notifications (toasts), upsells et événements d’analytique.

Accessibilité : gardez-la accessible, ne la bloquez pas

Une barre sticky se superpose au contenu, elle a donc de vraies responsabilités en matière d’accessibilité.

• Ne couvrez pas le contenu. Réservez de l’espace pour que la barre ne se pose jamais par-dessus le footer, l’avis de cookies ou la dernière ligne de texte. Sur mobile, ajoutez un padding en bas de la page égal à la hauteur de la barre.
• Gardez-la dans l’ordre de tabulation et ne piégez pas le focus. Le sélecteur de variantes et le bouton doivent être accessibles au clavier, et le focus doit pouvoir y entrer et en sortir librement. Une barre sticky n’est pas une modale, donc n’y piégez jamais le focus.
• Respectez les exigences de contraste. Le texte et le bouton doivent avoir un contraste de couleurs suffisant avec l’arrière-plan de la barre, le même standard que le reste de la page.
• Annoncez le prix. Lorsque la variante change et que le prix se met à jour, le texte du prix visible est suffisant dans la plupart des cas ; évitez de déclencher des annonces de live-region bruyantes à chaque frappe de touche.
• Respectez la réduction des animations (reduced motion). Si la barre glisse pour apparaître, enveloppez la transition pour qu’elle soit désactivée pour les utilisateurs qui préfèrent les mouvements réduits.

Performance : économique si vous la construisez bien

La version native est presque gratuite. position:sticky et position:fixed sont gérés par le compositeur du navigateur, et IntersectionObserver remplace les écouteurs de défilement lourds sur lesquels s’appuyaient les anciens scripts sticky. Toute la fonctionnalité ne demande que quelques lignes de CSS et un petit script.

Le coût vient des applications. Une app de barre sticky injecte son propre JavaScript sur chaque page produit, et les plus lourdes ajoutent un payload ainsi qu’un impact sur le layout shift lorsque la barre s’injecte tardivement. Sur une boutique qui accumule déjà les apps, cela s’additionne, et la vitesse de la page impacte directement la conversion.

Si votre PDP est déjà lente, corrigez ça d’abord. Voyez comment accélérer un thème Shopify avant d’ajouter quoi que ce soit de nouveau sur la page.

Quand ne pas utiliser de sticky add to cart

Ce n’est pas universel. Ignorez-le ou repensez-y quand :

• Votre PDP est courte. Si le bouton d’achat principal est visible sur la majeure partie de la page, une barre ajoute du désordre sans résoudre de problème.
• L’espace à l’écran est précieux. Sur de très petits viewports, une barre haute qui mange le contenu est pire que pas de barre du tout. Gardez-la fine, ou ne la déployez pas.
• Le produit nécessite une configuration avant l’achat. Pour les produits sur mesure ou fortement personnalisés où l’acheteur doit d’abord faire des choix, une barre en un clic peut pousser les gens à acheter avant d’avoir configuré, causant des erreurs ou des retours.
• Elle entre en conflit avec un autre élément fixe. Les widgets de chat, les bannières de cookies et les barres promotionnelles peuvent s’empiler pour former un mur d’UI fixe. Auditez ce qui est déjà épinglé avant d’en rajouter.

App vs natif : le compromis

Vous pouvez ajouter une barre sticky avec une app en quelques clics, et pour une boutique non-technique, c’est un point de départ raisonnable. Les compromis sont les mêmes que pour les apps de widgets habituelles : un abonnement mensuel, du JavaScript supplémentaire, une barre qui peut ne pas correspondre à votre thème, et une dépendance - désinstallez l’app et la barre disparaît.

Le code natif évite ces quatre inconvénients. Le coût est que quelqu’un doit l’écrire, et bien gérer la synchronisation des variantes ainsi que l’accessibilité. C’est le vide que la section suivante vient combler.

Où Fudge intervient

Fudge est l’opérateur IA pour les boutiques Shopify, et il écrit du code de thème natif. Vous décrivez la barre - “ajoute un sticky add to cart sur mes pages produits qui apparaît une fois que le bouton d’achat principal défile hors de l’écran, avec une barre inférieure sur mobile qui garde la variante et le prix synchronisés” - et il écrit le Liquid, le CSS et le JavaScript directement dans votre thème sous forme de brouillon que vous vérifiez sur un téléphone avant de le publier.

Puisque le résultat est natif, il n’y a aucun widget tiers qui s’affiche par-dessus votre boutique, aucun script supplémentaire qui charge sur chaque PDP à cause d’une app, et aucun abonnement mensuel pour la barre. On dirait votre propre vitrine, pas un formulaire ajouté de force.

Et comme c’est du code de thème, il survit à la désinstallation. Annulez Fudge et la barre sticky reste exactement où elle est, à l’inverse d’un élément généré par une application qui disparaît lorsque vous supprimez l’application. La même chose vaut pour tout le reste que vous construisez avec l’éditeur de boutique Shopify ou le constructeur de pages Fudge. Une fois la barre en ligne, Fudge place le taux d’ajout au panier et le taux de conversion de ces pages produits à côté de ceux des semaines précédentes, ce qui vous indique si la barre mérite sa place.

Si vous souhaitez aussi un modèle d’achat rapide sur les pages de collection, la démarche liée est une modale de vue rapide Shopify (quick view), qui permet aux acheteurs d’ajouter au panier sans ouvrir la PDP complète.

FAQ