Qu'est-ce que le sticky add to cart ?

Le sticky add to cart désigne un contrôle d'achat qui reste visible pendant le défilement de la fiche produit. Au lieu de disparaître en haut de page, le bouton reste ancré dans une barre en haut ou en bas de la fenêtre, souvent accompagné du nom du produit, de l'image, du prix et du sélecteur de variante. Le motif est surtout présent sur les fiches produit mobiles, où descriptions longues, avis et modules de recommandation repoussent le bouton d'origine hors du champ de vision. La barre apparaît une fois le bouton en ligne dépassé et disparaît à son retour.

Définition

Le sticky add to cart est un motif de présentation et non une fonction commerce distincte : il appelle la même action panier que le bouton en ligne et partage son état, y compris la désactivation des variantes indisponibles. Les variantes diffèrent par leur contenu. Une barre minimale n'affiche que le bouton, une barre complète reprend vignette, titre, prix et sélecteurs afin qu'un choix reste possible sans remonter. Les contraintes de conception comptent : la barre consomme de la hauteur, entre en conflit avec les barres du navigateur, les bandeaux de consentement et les widgets de chat, et ne doit masquer ni les champs de formulaire ni la zone de sécurité de l'appareil. Des identifiants analytiques distincts restent nécessaires.

Pourquoi c'est important

Dans une vitrine découplée, la barre fixe relève de la composition de vitrine et se traite entièrement dans la couche de présentation, tandis que prix, stock et mutations du panier restent derrière l'API commerce. Restituer la barre à partir du même état produit que le bouton en ligne évite toute divergence lors d'un changement de variante. Comme l'élément est fixe et souvent animé, il pèse sur le budget d'hydratation de la page et ne doit pas bloquer le thread principal au chargement initial. Piloter la visibilité par un intersection observer plutôt que par un écouteur de défilement protège la stabilité de mise en page et la réactivité. Les mutations passent par le même client d'API.

Cas d'usage

Le placement typique est la fiche produit sur petit écran, la barre apparaissant après la sortie de la section d'en-tête. Sur desktop, l'équivalent est une colonne fixe qui maintient prix et contrôles d'achat à côté d'un contenu long. Les aperçus rapides et les configurateurs de lots reprennent le motif pour garder l'action principale accessible. Sur les pages de liste, une barre fixe peut résumer une sélection de filtres ou une action de comparaison plutôt qu'une action panier. Dans les tunnels de commande, elle porte l'action de continuation. Lorsque la place le permet, la barre accueille aussi délai de livraison, état du stock ou bouton d'enregistrement.

Voir aussi

Découvrez Mobile Commerce · Conversion Rate Optimization (CRO).