Rends le header sticky au scroll. Condense-le (logo plus petit, cache la navigation secondaire) avec une ombre subtile. Garde le panier, la recherche et le compte visibles.
Want more control? See the expanded prompt ›
Rends le header sticky au scroll. Quand l'utilisateur scrolle après le hero, condense le header (logo plus petit, cache la navigation secondaire) et fixe-le en haut avec une ombre subtile. Garde les icônes du panier, de la recherche et du compte toujours visibles.
- Devient fixe seulement après avoir scrollé au-delà du hero.
- Se condense (logo plus petit, moins de navigation) pour gagner de la place.
- Affiche toujours le panier, la recherche et le compte.
- Pur CSS lorsque c'est possible ; IntersectionObserver pour le déclencheur.
Ce que vous essayez de faire
Sur les pages longues — et la plupart des pages e-commerce le sont — le header disparaît dès que les acheteurs commencent à scroller. Un sticky header garde le panier, la recherche et la navigation clé toujours accessibles, supprimant la friction de devoir remonter en haut de page qui vous coûte des ajouts au panier et des découvertes par la recherche.
Points de vigilance
- Superposition avec le hero : Fudge attend de dépasser le hero pour fixer le header.
- Mobile : le header sticky utilise moins d'espace vertical sur mobile.
- Masquer au défilement vers le bas : en option, le header se masque quand les clients font défiler vers le bas et réapparaît quand ils remontent.
- Performance : du pur CSS autant que possible, avec un tout petit script pour la détection du défilement.
Comment Fudge procède
Fudge duplique votre thème en ligne dans un brouillon, crée la section sous forme de section Shopify modifiable avec le placement et le comportement exigés par votre prompt, et la connecte à vos vraies données produits et au style de votre marque. Tout commence en brouillon — prévisualisez sur votre boutique, ajustez via l'Éditeur de thème, et publiez uniquement quand vous êtes prêt. Votre boutique en ligne reste intacte.
Pourquoi un sticky header améliore la conversion
Un header qui reste fixe au scroll garde le panier, la recherche et le compte toujours accessibles — éliminant la friction de devoir remonter tout en haut qui coûte des conversions. Le fait de condenser le header au scroll permet de le garder utile sans encombrer l’écran.
Quand ça vaut le coup de l’utiliser
Créez le sticky header pour toute boutique avec une profondeur de scroll importante sur les pages produits (PDP) ou les pages de collection. À ignorer pour les tout petits catalogues où les acheteurs ne scrollent pas.
Ce qui fait un bon sticky header
- Réduit au défilement — logo plus petit, masque la navigation secondaire.
- Panier, recherche, compte toujours visibles — icônes très utilisées.
- Ombre subtile quand il se fixe — profondeur visuelle sans distraction.
- Transition fluide — pas de saut brusque.
Associez cela avec une barre de recherche bien visible dans la navigation et un mega menu.
Fudge crée cela avec son éditeur de boutique.