Ajoute une barre d'ajout au panier fixe sur mobile quand on fait défiler sous la section hero. Image du produit, nom, prix, sélecteur de variante.
Want more control? See the expanded prompt ›
Ajoute une barre d'ajout au panier fixe qui s'affiche sur mobile quand les utilisateurs font défiler après la section hero. Inclus l'image du produit, le nom, le prix et le sélecteur de variante.
- Barre fixe uniquement sur mobile qui glisse vers le haut quand la section hero disparaît au défilement.
- Gère les variantes : se cache en cas de rupture de stock, se synchronise avec le bloc d'achat principal.
- Environ 2 Ko de JS, utilise IntersectionObserver — aucun scroll listener.
- Compatible avec les tiroirs de panier AJAX et les redirections de panier standards.
Ce que vous essayez de faire
Les acheteurs sur mobile perdent de vue le bouton d'ajout au panier lorsqu'ils font défiler la page produit. Sur les boutiques avec de longues pages produits (avis, listes d'ingrédients, FAQ), une barre sticky garde le bouton d'achat à portée de main, et Fudge compare le taux d'ajout au panier sur mobile avant et après.
Points de vigilance
- Ordinateur vs mobile : la barre est uniquement sur mobile par défaut, pour ne pas interférer avec votre mise en page actuelle sur ordinateur.
- Collision avec le hero : la barre n'apparaît qu'une fois que l'acheteur a fait défiler au-delà du hero, de sorte que la première impression reste propre.
- Sélecteurs de variantes : la barre respecte les variantes en rupture de stock et désactive le bouton en conséquence.
- Compatibilité avec le tiroir de panier : la barre fonctionne aussi bien avec les tiroirs de panier AJAX qu'avec les redirections de panier classiques.
Comment Fudge procède
Fudge duplique votre thème en ligne en un brouillon, modifie le modèle concerné (page produit ou panier) avec les changements demandés par votre prompt, et teste avec vos vraies données produits. Tout commence en brouillon — prévisualisez sur n'importe quel produit ou dans le panier, ajustez le moindre détail, et publiez quand vous êtes prêt. Votre boutique en ligne reste intacte.
Pourquoi les barres d’ajout au panier fixes fonctionnent sur mobile
Sur les pages produit mobiles, le bloc d’achat disparaît vite au défilement. Une barre d’ajout au panier fixe qui apparaît après avoir fait défiler la section hero — avec l’image du produit, le nom, le prix et le sélecteur de variante — garde le moment de conversion toujours à portée de doigt.
Quand cela vaut le coup de la créer
Créez une barre d’ajout au panier fixe pour toute boutique avec un trafic mobile important et des pages produit longues. Ignorez-la pour les pages courtes où le défilement est minimal.
Ce qui la rend performante
- Uniquement sur mobile — sans intérêt sur ordinateur.
- Apparaît après le hero — déclenché par IntersectionObserver.
- Image, nom, prix, variante — toutes les infos pour finaliser l’achat.
- Design à votre marque — s’accorde avec le reste de la PDP.
Associez cela à l’urgence de stock selon la variante et à la rangée de badges de confiance et de garanties.
Fudge crée cela avec son éditeur de boutique ; pour une version étape par étape, consultez le guide de l’ajout au panier sticky.