Réponse rapide : comment rendre un menu d’en-tête et de pied de page fixe
Pour rendre l’en-tête fixe, ouvrez Paramètres du thème > En-tête et choisissez une option Sticky header (Dawn propose Aucun, Au défilement vers le haut, Toujours et Toujours, réduire la taille du logo). La plupart des thèmes n’ayant pas de menu de pied de page fixe, ajoutez une barre d’onglets en bas via CSS ou une application, puis testez sur un vrai téléphone.
Suivez cette séquence en trois étapes pour configurer la navigation fixe aux deux extrémités de l’écran :
- Activer le réglage d’en-tête : Dans votre interface administrateur Shopify, accédez à Boutique en ligne > Thèmes > Personnaliser. Ouvrez la section En-tête (ou Paramètres du thème > En-tête), sélectionnez le comportement Sticky header souhaité et enregistrez.
- Ajouter une barre d’onglets mobile en bas : Comme les thèmes Shopify traitent le pied de page comme une fin de page statique plutôt qu’une barre de navigation, intégrez un menu inférieur persistant via CSS ou une application de menu.
- Vérifier sur des appareils réels : Inspectez votre boutique sur un smartphone physique pour vous assurer que ni l’en-tête ni la barre inférieure ne masquent les titres, les boutons d’action ou les zones sécurisées de l’écran.
- L'interface à deux pôles : Les en-têtes fixes maintiennent la marque, la recherche et le panier accessibles en haut, tandis que les menus de pied de page fixes agissent comme des barres d'onglets ancrées dans la zone du pouce.
- Flux du document et chevauchement : Le positionnement avec
position: fixedretire l'élément du flux normal et supprime son espace réservé, alors queposition: stickypréserve l'espace naturel jusqu'au seuil de défilement. - L'encombrement des deux barres : Épingler simultanément l'en-tête et la barre inférieure sur mobile réduit la hauteur d'affichage ; garder un en-tête compact et coordonner le bouton Ajouter au panier évite les collisions d'interface.
Sticky header vs menu de pied de page fixe : rôles et différences
Un sticky header (en-tête fixe) reste ancré en haut de la fenêtre du navigateur lorsque l’acheteur fait défiler la page. Il garantit que les éléments essentiels—comme le logo de la marque, les liens de collections principales, la recherche directe et l’icône du panier—restent toujours accessibles sans forcer le visiteur à remonter tout en haut d’une longue liste de produits.
À l’inverse, un menu de pied de page fixe ne désigne absolument pas le pied de page classique contenant les mentions légales, les politiques et les logos de paiement. Dans le web design moderne, ce terme désigne une barre de navigation inférieure (barre d’onglets mobile) fixée au bas de l’écran tactile, rassemblant quelques actions majeures (Accueil, Recherche, Tiroir de menu, Favoris, Panier) sous le pouce de l’utilisateur.
Différence entre sticky et fixed en CSS
En CSS, position: sticky conserve l’élément dans le flux normal du document jusqu’à ce que le défilement atteigne un seuil déterminé. Selon MDN Web Docs sur position en CSS, un élément sticky requiert au moins un seuil directionnel—tel que top, bottom, left ou right—pour fonctionner correctement. Comme il conserve sa place dans la mise en page avant d’adhérer, il ne provoque aucun décalage brusque.
En revanche, position: fixed retire totalement l’élément du flux normal du document. Comme l’indique MDN Web Docs, aucun espace n’est réservé pour l’élément dans la mise en page, ce qui pousse le contenu suivant à glisser vers le haut et à se loger directement derrière lui. De plus, fixed et sticky créent un nouveau contexte d’empilement (stacking context), modifiant le comportement des valeurs de z-index.
Méthode 1 : Activer le sticky header dans les paramètres du thème
Si votre boutique utilise le thème officiel Dawn de Shopify ou un thème moderne Online Store 2.0, vous n’avez pas besoin d’écrire de code. La fonctionnalité est directement intégrée dans l’éditeur visuel de thèmes.
- Dans votre panneau d’administration Shopify, allez dans Boutique en ligne > Thèmes.
- Repérez le thème que vous souhaitez modifier et cliquez sur Personnaliser.
- Dans la barre latérale gauche, cliquez sur la section En-tête (ou ouvrez Paramètres du thème > En-tête selon votre version).
- Déroulez jusqu’au paramètre Sticky header, sélectionnez le comportement souhaité et cliquez sur Enregistrer.
Les quatre options de Sticky header dans Dawn
Dans le thème Dawn de Shopify, la configuration de l’en-tête offre quatre choix explicites définis dans le schéma du thème :
| Option de réglage | Comportement sur la boutique | Cas d’usage recommandé |
|---|---|---|
| Aucun (None) | L’en-tête défile normalement avec le contenu et disparaît de l’écran lors du défilement vers le bas. | Boutiques mono-produit, pages d’atterrissage éditoriales ou designs privilégiant la zone d’affichage maximale. |
| Au défilement vers le haut (On scroll up) | L’en-tête se masque lors du défilement vers le bas et réapparaît dès que l’acheteur remonte. | Boutiques avec de grands catalogues ; c’est le réglage par défaut dans le code source de Dawn. |
| Toujours (Always) | L’en-tête reste constamment fixé en haut de l’écran avec sa hauteur initiale complète. | Boutiques où la barre de recherche, les devises et le panier doivent rester immédiatement visibles. |
| Toujours, réduire la taille du logo | L’en-tête reste fixé, mais réduit automatiquement le logo pour préserver la hauteur d’affichage. | Marques disposant d’un logo haut ou vertical qui masquerait autrement les photos de produits. |
Comme documenté dans le dépôt GitHub officiel de Shopify Dawn, Dawn définit on-scroll-up comme valeur par défaut pour sticky_header_type et implémente l’élément avec position: sticky.
Les recherches en ergonomie du Nielsen Norman Group sur les sticky headers soutiennent ce mécanisme : les en-têtes partiellement persistants partent du principe que tout défilement vers le haut traduit une intention de naviguer ou de consulter le panier. En masquant l’en-tête lors de la lecture vers le bas, la boutique optimise la surface visible sans compromettre l’accès au menu.
Autres thèmes Online Store 2.0
D’autres thèmes Online Store 2.0 peuvent proposer un réglage similaire, mais son nom et ses options peuvent différer de ceux de Dawn. Vérifiez toujours les paramètres natifs de l’en-tête avant d’envisager du CSS personnalisé ; s’il n’existe pas de tel réglage, passez à la méthode CSS ci-dessous. Si vous concevez votre boutique sur Dawn, consultez notre analyse dédiée à Navi+ sur le thème Dawn.
Vous préférez un tutoriel vidéo ? Cette démonstration montre l’emplacement du réglage dans l’éditeur de thème :
Méthode 2 : Rendre l’en-tête fixe avec du CSS personnalisé
Si votre thème ne propose pas de commutateur natif pour l’en-tête fixe, vous pouvez l’épingler avec du CSS personnalisé sans toucher au fichier theme.liquid ni aux modèles de code.
Dupliquez votre thème au préalable
Avant de modifier le style de votre boutique, protégez toujours votre thème actif en effectuant une copie de sauvegarde. Comme le rappelle le Centre d’aide Shopify sur la duplication de thèmes : “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”
Pour dupliquer votre thème, accédez à Boutique en ligne > Thèmes, cliquez sur les trois points (...) à côté de votre thème actif et sélectionnez Dupliquer. Testez toutes vos modifications sur cette copie avant de publier.
Où coller le code CSS
Shopify intègre un champ CSS personnalisé directement dans l’éditeur visuel de thème. Allez dans Boutique en ligne > Thèmes > Personnaliser, cliquez sur l’icône d’engrenage (Paramètres du thème) à gauche et ouvrez l’onglet CSS personnalisé.
Selon la documentation Shopify sur le CSS personnalisé, les règles insérées dans cette boîte globale s’appliquent à toute la boutique et sont limitées à 1 500 caractères. Notez que si vous ajoutez du CSS dans une section spécifique, Shopify l’isole à cette seule section, ce qui peut empêcher l’en-tête de rester fixe.
/* Exemple — adaptez les sélecteurs à votre thème et testez sur une copie */
.section-header {
position: sticky;
top: 0;
z-index: 3;
}
Cet extrait applique position: sticky au conteneur de l’en-tête. Comme l’établit MDN Web Docs, un élément sticky nécessite un seuil de référence—ici, top: 0 indique qu’il doit s’épingler dès qu’il touche le haut de la fenêtre. La propriété z-index: 3 assure que l’en-tête reste visible au-dessus des images et textes du corps de page.
Méfiez-vous des anciens tutoriels de forums. De nombreuses discussions populaires sur la communauté Shopify—notamment pour l’ancien thème Debut (Shopify Community)—reposent sur des scripts jQuery et du JavaScript manuel. La discussion elle-même indique qu’il s’agit d’un tutoriel avancé non pris en charge par Shopify : ne recopiez donc pas ses scripts dans un thème actuel. Ce guide n’utilise que les paramètres du thème et du CSS.
Résoudre les problèmes courants de sticky header
Figure 1 : Illustration du concept — Résolution des chevauchements de contenu et de calques avec scroll-padding-top.
L’ancrage d’une barre de navigation interagit avec la géométrie de la page, le rendu d’affichage et l’empilement des calques. Lorsqu’un dysfonctionnement apparaît, il découle presque toujours de quatre causes CSS bien identifiées.
Contenu masqué sous l’en-tête
Le problème le plus fréquemment rencontré est le masquage partiel des bannières d’accueil ou des titres de pages sous l’en-tête dès le chargement (discussion sur la communauté Shopify).
Cette anomalie se produit lorsqu’un thème ou un tutoriel applique position: fixed au lieu de position: sticky. Comme fixed retire l’en-tête du flux normal (MDN Web Docs), le reste de la page remonte occuper l’espace vide. Passer à position: sticky résout généralement le souci immédiatement, car l’en-tête conserve sa hauteur physique jusqu’au défilement.
Si votre thème requiert obligatoirement un positionnement fixe, ou si des liens d’ancrage internes (comme #avis ou #details) atterrissent sous l’en-tête, ajoutez scroll-padding-top sur l’élément HTML racine. Selon MDN Web Docs, cette règle exclut la zone supérieure occupée par l’en-tête lors du défilement :
/* Exemple — adaptez les sélecteurs à votre thème et testez sur une copie */
html {
scroll-padding-top: 80px; /* valeur indicative : remplacez-la par la hauteur mesurée de votre propre en-tête */
}
Mesurez toujours la hauteur exacte en pixels de l’en-tête de votre boutique avec les outils de développement de votre navigateur ; ne copiez pas aveuglément des valeurs arbitraires depuis des forums.
L’en-tête sticky ne colle plus (problème d’overflow)
Il arrive fréquemment qu’un en-tête fixe cesse brutalement de fonctionner après l’installation d’une application de carrousel ou d’une bannière publicitaire.
Le mécanisme technique est documenté sur MDN Web Docs : un élément sticky s’ancre à son ancêtre le plus proche disposant d’un mécanisme de défilement. Si un élément parent (html, body ou un conteneur principal) possède la propriété overflow: hidden, overflow: auto ou scroll, l’en-tête s’attache à ce conteneur plutôt qu’à la fenêtre du navigateur. Si ce conteneur parent ne défile pas, l’en-tête reste immobile. Pour corriger cela, supprimez les règles d’overflow superflues sur les conteneurs parents.
L’en-tête glisse sous d’autres éléments (z-index)
Lors du défilement devant des vidéos ou des modules d’avis clients, l’en-tête peut passer derrière ces éléments. Inversement, les menus déroulants ou le tiroir du panier peuvent être masqués par le conteneur de l’en-tête.
Comme position: sticky et position: fixed créent un nouveau contexte d’empilement (MDN Web Docs), les éléments internes sont évalués selon le niveau de l’en-tête. Attribuez à l’en-tête un z-index approprié, tout en veillant à ce que le panier latéral et les fenêtres modales gardent une valeur supérieure à celle de l’en-tête.
Désactiver l’effet fixe uniquement sur mobile
Sur un smartphone à écran restreint, un en-tête permanent peut encombrer l’affichage. Vous pouvez restreindre le style fixe aux ordinateurs grâce à une requête multimédia :
/* Exemple — adaptez les sélecteurs et le point de rupture (750px ici) à votre thème et testez sur une copie */
@media (min-width: 750px) {
.section-header {
position: sticky;
top: 0;
z-index: 3;
}
}
Le champ CSS personnalisé de Shopify prend en charge les requêtes @media (Aide Shopify). Sur Dawn, vous pouvez aussi régler l’option sur Aucun ou Au défilement vers le haut pour aérer l’affichage mobile. Évitez les scripts JavaScript qui modifient les classes de l’en-tête après le chargement, car ces décalages tardifs dégradent vos Core Web Vitals. Selon Google web.dev sur le Cumulative Layout Shift, les sites doivent maintenir un score CLS de 0,1 ou moins.
Le tableau ci-dessous récapitule les pannes courantes d’en-tête fixe et leurs remèdes techniques :
| Symptôme / Dysfonctionnement | Cause architecturale sous-jacente | Solution technique recommandée |
|---|---|---|
| Contenu masqué au chargement initial | L’en-tête utilise position: fixed, annulant l’espace réservé. |
Passer à position: sticky ou ajouter un padding supérieur au conteneur. |
| Les ancres internes sautent sous l’en-tête | Le défilement cible le bord supérieur sans déduire la hauteur de la barre. | Ajouter html { scroll-padding-top: <hauteur>; } avec la valeur mesurée. |
| L’en-tête ne colle pas au défilement | Un conteneur parent possède overflow: hidden, scroll ou auto. |
Inspecter les balises parentes (html, body, #wrapper) et retirer l’overflow. |
| Bannières ou modules passent par-dessus | Conflit de contexte d’empilement et valeur z-index d’en-tête insuffisante. | Augmenter le z-index de l’en-tête tout en maintenant le panier au-dessus. |
| Écran mobile encombré et comprimé | L’en-tête consomme trop de hauteur verticale sur petit écran. | Choisir ‘Au défilement vers le haut’ ou désactiver le sticky sur mobile. |
Pourquoi la plupart des thèmes Shopify n’ont pas de menu de pied de page fixe
Si les en-têtes fixes sont très répandus, la seconde partie de la recherche—un menu de pied de page fixe—met en lumière une lacune notable dans l’architecture des thèmes standard.
Dans les thèmes Shopify, le pied de page est conçu comme un bloc statique situé tout en bas du document. Il contient généralement plusieurs colonnes de texte : présentation de la marque, liens de service client, mentions légales et logos de paiement. Fixer un pied de page complet au bas de l’écran d’un smartphone obstruerait entièrement l’affichage et empêcherait de consulter les produits.
Ce que les marchands recherchent réellement sous l’appellation ‘menu de pied de page fixe’ est une barre d’onglets mobile en bas d’écran—une fine barre de navigation ancrée dans la zone du pouce. La plupart des thèmes ne proposant pas cette option en natif, les marchands doivent choisir entre du code CSS personnalisé ou une application dédiée.
Créer une barre d’onglets fixe avec du CSS personnalisé
Si vous optez pour du CSS personnalisé, la structure de base repose sur un conteneur fixe ancré au bord inférieur du viewport :
/* Exemple — adaptez les sélecteurs à votre thème et testez sur une copie */
.my-bottom-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background-color: #ffffff;
border-top: 1px solid #e5e7eb;
z-index: 10;
}
body {
padding-bottom: 60px;
}
Comme position: fixed retire la barre du flux du document (MDN Web Docs), l’application d’un padding-bottom correspondant sur la balise body est obligatoire. Sans cela, la barre d’onglets recouvrira en permanence les vrais liens de pied de page et les boutons de chat. Gardez également à l’esprit que vous devrez coder vous-même le balisage HTML/Liquid des liens et icônes et le maintenir à chaque mise à jour du thème.
Prise en compte de la Safe Area sur iPhone
Les smartphones récents—notamment les iPhone dépourvus de bouton d’accueil physique—affichent une barre de balayage système au bas de l’écran. Si votre barre de menu est collée au bord sans marge matérielle, les icônes de navigation entreront en collision avec cette barre système.
Comme documenté sur MDN Web Docs sur env() en CSS, les marges de sécurité matérielles s’intègrent facilement à l’aide de variables d’environnement standardisées :
/* Exemple — adaptez les sélecteurs à votre thème et testez sur une copie */
.my-bottom-bar {
padding-bottom: env(safe-area-inset-bottom, 0px);
}
body {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
L’utilisation de env(safe-area-inset-bottom) garantit que les boutons restent parfaitement cliquables et ne gênent pas les gestes tactiles du système. Pour approfondir les questions d’ergonomie mobile, consultez notre dossier technique sur la conception de la navigation inférieure et des barres d’onglets sur Shopify.
Combiner en-tête fixe et barre d’onglets inférieure sur mobile
Figure 2 : Illustration du concept — Équilibre des deux barres persistantes sur mobile pour éviter les collisions avec le panier.
L’utilisation simultanée d’un en-tête fixe et d’une barre d’onglets inférieure soulève un défi ergonomique majeur : la compétition pour la hauteur d’écran.
Sur un écran d’ordinateur, il y a généralement assez de hauteur pour un en-tête. Sur mobile, en revanche, la surface d’affichage est restreinte. Les conclusions du Nielsen Norman Group soulignent que la préservation de l’espace visuel est critique sur mobile en raison de la petite taille des écrans.
Si les deux barres restent affichées en permanence, l’utilisateur n’a plus qu’une fente étroite pour voir les produits. Pour préserver le confort de navigation, appliquez ces principes :
- Conservez un en-tête compact : Activez dans Dawn l’option Au défilement vers le haut, qui efface l’en-tête pendant la lecture vers le bas, ou Toujours, réduire la taille du logo pour garder un en-tête fixe plus petit.
- Évitez les collisions avec le bouton d’achat : Sur les pages de produits, certains thèmes intègrent leur propre bouton ‘Ajouter au panier’ fixe au bas de l’écran. Si votre barre d’onglets se positionne à
bottom: 0, elle risque de recouvrir complètement ce bouton crucial. Vérifiez systématiquement vos pages produits sur mobile. - Préservez la visibilité du focus clavier (WCAG 2.4.11) : La norme d’accessibilité W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) stipule que les éléments interactifs recevant le focus ne doivent pas être masqués par du contenu créé par l’auteur. Les en-têtes et pieds de page fixes en sont les causes principales. Définir à la fois
scroll-padding-topetscroll-padding-bottom(MDN Web Docs) assure un alignement parfait dans le champ de vision. - Maintenez des cibles tactiles confortables (WCAG 2.5.8) : Selon la norme W3C WCAG 2.5.8 (Target Size - Minimum), les cibles tactiles sur mobile doivent mesurer au moins 24 par 24 pixels CSS afin de prévenir les erreurs de frappe.
Pour approfondir ces architectures d’interface, consultez nos guides sur la navigation mobile au-delà du menu hamburger et notre guide sur l’accessibilité de la navigation.
Compromis : quand ne pas utiliser de menus fixes
Les barres fixes sont des outils précieux, mais elles ne conviennent pas à toutes les boutiques ni à toutes les mises en page. Comme le formule Page Laubheimer dans une étude du Nielsen Norman Group : “Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”
Évaluez ces compromis avant de figer vos menus :
- Boutiques mono-produit et pages de vente courtes : Si votre catalogue ne comporte que quelques références sur une page courte, vos clients n’ont pas besoin d’un accès permanent aux catégories. Une barre fixe ne fait qu’encombrer l’écran sans apporter d’utilité.
- Boutiques dotées d’éléments fixes concurrents : Si votre thème intègre déjà une barre d’achat fixe en bas, des bandeaux d’offres ou une bulle de chat flottante, ajouter une barre de menu inférieure crée une surcharge visuelle préjudiciable.
- Charge de maintenance lors des mises à jour : Chaque ligne de CSS personnalisé représente du code que vous devez maintenir vous-même. Comme le souligne Shopify dans son aide sur le CSS, les mises à niveau futures des thèmes peuvent modifier les noms de classes et nécessiter des corrections manuelles.
Pour déterminer le modèle de navigation le plus adapté à votre volume de produits, consultez notre dossier pour choisir le bon type de menu pour votre boutique.
La place de Navi+ : une barre d’onglets fixe sans coder
Précisons d’emblée : Navi+ ne crée ni ne gère les en-têtes fixes. Les réglages natifs de votre thème (Méthode 1) ou le CSS personnalisé global (Méthode 2) restent la meilleure approche pour le haut de votre boutique.
La valeur de Navi+ réside dans la résolution de la seconde partie du problème : le menu de pied de page fixe absent des thèmes standards. Plutôt que de développer des sections Liquid complexes et de gérer manuellement les zones sécurisées en CSS, Navi+ fournit une Tab Bar : une barre de menu fixée en bas de l’écran, que vous construisez à partir de modèles dans l’application.
Ce que fait la Tab Bar :
- Présence continue sur toutes les pages : La Tab Bar de Navi+ reste visible sur toutes les pages de la boutique (Documentation Navi+), et la structure de son menu prend en charge jusqu’à 3 niveaux.
- Activation sans modification de code : L’intégration s’effectue via les intégrations d’applications Shopify (App embeds). D’après le guide d’installation de Navi+, configurez votre menu dans l’app, allez dans Boutique en ligne > Thèmes > Personnaliser > Intégrations d’applications, activez Store Connector et cliquez sur Enregistrer.
- Règles d’affichage : Un menu peut être affiché ou masqué selon l’appareil (mobile ou ordinateur), le type de page (par exemple accueil, produit ou collection) ou des mots-clés d’URL (Documentation Navi+). Vous pouvez par exemple n’afficher la Tab Bar que sur mobile.
Comme pour toute modification d’interface, effectuez toujours vos essais préalables sur un thème dupliqué (Guide de duplication Shopify).
If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. Pour consulter la procédure officielle, découvrez comment publier la Tab Bar sur Shopify.
Liste de contrôle des actions
- Dupliquer le thème : Créer une copie de sauvegarde dans Boutique en ligne > Thèmes avant tout changement de réglage ou de code.
- Sélectionner le mode d’en-tête fixe : Choisir l’option appropriée dans les paramètres du thème (comme ‘Au défilement vers le haut’ ou ‘Toujours’).
- Vérifier la fluidité du défilement : Faire défiler les pages de collections et de produits pour contrôler la transition de l’en-tête.
- Contrôler les ancres internes : Tester les liens vers des sections (
#avis,#details) et vérifier qu’ils ne sont pas coupés ; appliquerscroll-padding-topsi besoin. - Inspecter les superpositions de calques : Ouvrir les menus déroulants, le méga menu et le tiroir du panier pour vérifier qu’ils s’affichent au-dessus de l’en-tête.
- Intégrer la barre de navigation inférieure : Ajouter la barre d’onglets mobile via CSS ou une app, en confirmant
env(safe-area-inset-bottom)et le padding du body. - Auditer les pages de produits : Vérifier sur mobile que la barre d’onglets ne recouvre pas le bouton Ajouter au panier ou les déclencheurs de paiement.
- Tester l’accessibilité et les terminaux réels : Parcourir les liens avec la touche Tab pour vérifier la visibilité du focus et valider sur iPhone et Android physiques.
FAQ
Comment rendre un menu d’en-tête et de pied de page fixe sur Shopify ?
Pour l’en-tête, activez l’option d’en-tête fixe dans les paramètres de votre thème (comme ‘Au défilement vers le haut’ sur Dawn). Pour le bas, les thèmes n’intégrant pas de pied de page fixe, ajoutez une barre d’onglets mobile via CSS personnalisé ou une intégration d’application.
Pourquoi le contenu de ma page est-il masqué derrière l’en-tête fixe ?
Ce problème provient souvent de l’utilisation de position: fixed, qui retire l’en-tête du flux du document sans réserver d’espace. Passer à position: sticky ou ajouter scroll-padding-top à la balise HTML racine corrige le chevauchement.
Pourquoi mon sticky header a-t-il cessé de fonctionner ?
Un en-tête fixe cesse d’adhérer si un conteneur parent possède overflow: hidden, scroll ou auto. En CSS, les éléments sticky s’attachent à leur ancêtre le plus proche ayant un mécanisme de défilement plutôt qu’à la fenêtre.
Puis-je garder l’en-tête fixe sur ordinateur mais le désactiver sur mobile ?
Oui. Avec du CSS personnalisé, enveloppez vos règles dans une requête min-width qui correspond au point de rupture de votre thème. Si vous utilisez une application comme Navi+ pour la barre inférieure, définissez sa règle d’affichage par appareil pour qu’elle n’apparaisse que sur mobile.
Une barre d’onglets inférieure va-t-elle recouvrir la barre d’accueil de l’iPhone ?
Une barre fixe risque de gêner les gestes tactiles si les zones sécurisées ne sont pas gérées. L’ajout de env(safe-area-inset-bottom) dans la marge interne de votre barre garantit que les icônes restent dégagées.
Un sticky header nuit-il à l’expérience utilisateur (UX) ?
Les recherches du Nielsen Norman Group indiquent que les en-têtes fixes sont bénéfiques lorsqu’ils répondent à un besoin clair. Cependant, sur smartphone, ils doivent rester très compacts ou s’effacer lors du défilement vers le bas.
Sources
- Schéma de langue par défaut du thème Dawn (Shopify) : locales/en.default.schema.json
- Code source de la section Header du thème Dawn (Shopify) : sections/header.liquid
- MDN Web Docs — Propriété CSS position : developer.mozilla.org/en-US/docs/Web/CSS/position
- MDN Web Docs — Propriété CSS scroll-padding-top : developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
- MDN Web Docs — Fonction CSS env() : developer.mozilla.org/en-US/docs/Web/CSS/env
- W3C Web Accessibility Initiative — Norme WCAG 2.4.11 Focus Not Obscured (Minimum) : w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
- W3C Web Accessibility Initiative — Norme WCAG 2.5.8 Target Size (Minimum) : w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
- Nielsen Norman Group — Étude sur les Sticky Headers (Page Laubheimer) : nngroup.com/articles/sticky-headers/
- Google web.dev — Optimisation du Cumulative Layout Shift (CLS) : web.dev/articles/cls
- Centre d’aide Shopify — Ajouter du CSS personnalisé à votre thème : help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
- Centre d’aide Shopify — Dupliquer des thèmes : help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
- Communauté Shopify — Discussion sur Sticky/Fixed Header Menu : community.shopify.com/t/sticky-fixed-header-menu/308093
- Communauté Shopify — Guide Sticky/Fixed Header pour Debut : community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
- Centre d’aide Navi+ — Publier la Tab Bar sur Shopify : help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
- Centre d’aide Navi+ — Utilisation et ciblage de la Tab Bar : help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/
Explorez les sujets
Ce guide renvoie vers des articles ciblés — approfondissez chaque thème.