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. Une barre fixe garde l'achat à portée de doigt — et sur les boutiques ayant de longues pages produit (avis, listes d'ingrédients, FAQ), elle augmente régulièrement le taux d'ajout au panier sur mobile de 5 à 15 %.
Points de vigilance
- Desktop vs mobile — Fudge gère ça : la barre s'affiche uniquement sur mobile par défaut pour ne pas interférer avec votre mise en page desktop actuelle.
- Collision avec la section hero — Fudge gère ça : la barre n'apparaît qu'après que l'utilisateur ait fait défiler la section hero, l'impression initiale reste donc impeccable.
- Sélecteurs de variantes — Fudge gère ça : la barre prend en compte les variantes en rupture de stock et désactive le bouton en conséquence.
- Compatibilité avec le tiroir de panier — Fudge gère ça : fonctionne avec les tiroirs de panier AJAX et les redirections de panier standards.
Comment Fudge procède
Fudge duplique votre thème en ligne dans un brouillon, modifie le template concerné (produit, panier ou checkout) avec les changements demandés dans votre prompt, et teste avec vos vraies données produit. Tout commence en mode brouillon — prévisualisez sur n'importe quel produit ou dans le panier, ajustez chaque 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 — le format desktop n’en tire aucun bénéfice.
- Apparaît après la section hero — déclenché par IntersectionObserver.
- Image, nom, prix, variante — toutes les infos prêtes pour l’achat.
- Aux couleurs de la marque — s’accorde avec le reste de la page produit.
Associez cela avec l’urgence de stock selon la variante et la ligne de badges de confiance et garanties.