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
- Chevauchement du hero — Fudge attend d'avoir passé le hero pour fixer le header.
- Mobile — Fudge s'en occupe : le sticky header sur mobile utilise moins d'espace vertical.
- Masquage au défilement vers le bas — Fudge s'en occupe : comportement optionnel où le header se cache en scrollant vers le bas, et revient en scrollant vers le haut.
- Performances — Fudge s'en occupe : pur CSS lorsque c'est possible ; tout petit script pour la détection du scroll.
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
- Condensé au scroll — logo plus petit, masquage de la navigation secondaire.
- Panier, recherche, compte toujours visibles — icônes très utilisées.
- Ombre subtile lorsqu’il est fixé — profondeur visuelle sans distraction.
- Transition fluide — pas d’accrocs ou de sauts brusques.
À associer avec une barre de recherche bien visible dans la navigation et un mega menu.