Barre collante

Qu’est-ce qu’une barre collante ?

Une barre collante (sticky bar) est une fine barre épinglée à une position fixe sur l’écran — généralement en haut ou en bas — tandis que le reste de la page défile. Techniquement, elle est conçue à l’aide de la propriété CSS position: sticky ou position: fixed. Dans une boutique en ligne, elle permet de garder un message ou une action constamment visible, quel que soit le niveau de défilement du client sur la page.

Pourquoi la barre collante est-elle importante ?

Une barre collante offre un emplacement fixe pour le message que vous ne voulez surtout pas que vos clients manquent : un code promotionnel, un seuil de livraison gratuite ou un appel à l’action clair. Puisqu’elle suit le client lors du défilement de la page, elle s’avère particulièrement efficace sur mobile et sur les longues pages produits, où le bouton d’achat finirait sinon par disparaître de l’écran. En contrepartie, elle occupe de l’espace d’affichage et, si elle est injectée tardivement ou sans espace réservé, elle peut provoquer un décalage de mise en page (CLS).

Cas d’utilisation courants

• Barre d’annonce contenant un code de réduction, une campagne ou un seuil de livraison gratuite affiché en haut de l’écran.
• Bouton d’achat collant sur mobile, maintenant le bouton d’ajout au panier visible sur les longues pages produits.
• Bannière de cookies et de consentement épinglée jusqu’à ce que l’utilisateur fasse un choix.
• Compte à rebours ou alerte de stock qui ajoute un sentiment d’urgence pendant une campagne.
• Barre de recherche ou de menu persistante au sein d’un en-tête épinglé.

Perspective Shopify

La plupart des thèmes Online Store 2.0 intègrent par défaut une section de barre d’annonce et souvent une option d’en-tête collant (sticky header), mais une barre épinglée de manière persistante ou un bouton d’achat collant nécessite généralement du code de thème ou une application dédiée. Testez toujours sur mobile et sur ordinateur pour vérifier que la barre ne masque pas de contenu important ou les boutons de passage à la caisse, et qu’elle ne déstabilise pas la mise en page. Une alternative connexe et moins intrusive est le slide-in, qui glisse depuis le côté de l’écran plutôt que d’occuper une barre fixe.