Architecture du Header Navigation Shopify : Modèles de Mise en Page, Allocation d’Espace et Gestion des Breakpoints

Un en-tête sur ordinateur fonctionne selon un budget horizontal fixe, équilibrant présence de marque, catégories de produits, outils utilitaires et parcours de commande.

Traiter l’en-tête comme un conteneur flexbox non maîtrisé provoque des collisions avec la recherche, des retours à la ligne ou un repli prématuré en tiroir mobile. Une navigation fiable exige un choix de mise en page réfléchi, une budgétisation de l’espace et une vérification responsive.

Réponse rapide : Quelle mise en page de header Shopify convient à votre boutique ?

Il n’existe pas de meilleure mise en page d’en-tête Shopify unique. Les boutiques avec catalogue fonctionnent généralement mieux avec un logo à gauche et des liens de catégories en ligne, les petites boutiques peuvent utiliser un logo centré avec des liens scindés, et les grands magasins multi-rayons ont besoin d’un en-tête à deux niveaux avec une barre utilitaire séparée. Évitez de masquer la navigation desktop derrière un hamburger.

Le choix de la bonne architecture d’en-tête desktop repose sur quatre modèles de mise en page fondamentaux :

• Logo à gauche + Navigation en ligne : Ancre le logo à gauche avec les liens de catégories s’étirant vers la droite. Offre la plus grande largeur horizontale pour les catégories du catalogue tout en regroupant les utilitaires à droite.
• Logo centré + Navigation scindée : Centre le logo, encadré par des liens de catégories de chaque côté. Convient aux petits catalogues, mais divise l’espace horizontal en deux tronçons plus courts.
• Navigation superposée à deux niveaux : Répartit la navigation sur deux barres horizontales. Une fine bande supérieure accueille les utilitaires, réservant la barre inférieure aux catégories de produits.
• Tiroir masqué sur desktop : Dissimule les liens derrière une icône hamburger. Bien que visuellement minimaliste, le Nielsen Norman Group déconseille la navigation masquée dans les interfaces desktop.

Pourquoi l’espace du header vient à manquer sur les écrans d’ordinateurs portables

Les concepteurs examinent souvent un modèle sur un grand moniteur. Certains clients naviguent sur des ordinateurs portables où la mise à l’échelle d’affichage de l’OS réduit le nombre de pixels CSS disponibles pour la page.

À titre d’illustration (un calcul, pas une statistique) : un écran de 1920px de large avec une mise à l’échelle Windows de 150 % donne une largeur CSS effective de 1280px (1920 / 1.5 = 1280). Consultez les analytics de votre boutique pour connaître les tailles de viewport que vos propres clients utilisent réellement.

Lorsque les éléments de l’en-tête dépassent la largeur horizontale, la navigation peut se casser de trois façons distinctes :

+-------------------------------------------------------------------------------+
|  Wide Viewport - Illustration                                                 |
|  [Brand Logo]   Women   Men   Accessories   Footwear   Sale   [Search] [Cart] |
+-------------------------------------------------------------------------------+

+-------------------------------------------------------------------------------+
|  Laptop-Width Viewport - Unplanned Wrapping Illustration                      |
|  [Brand Logo]   Women   Men   Accessories   Footwear                          |
|  Sale   [Search] [Cart]  <-- Wraps onto second line, shifting content downward|
+-------------------------------------------------------------------------------+

1. Retour à la ligne flexbox involontaire : Les conteneurs flex repoussent les dernières catégories ou les champs de recherche sur une deuxième ligne, augmentant la hauteur de l’en-tête et déplaçant le merchandising de la bannière principale.
2. Débordement horizontal et utilitaires tronqués : Les conteneurs flex avec nowrap poussent les utilitaires au-delà du bord du viewport, cachant les déclencheurs du panier hors de l’écran ou provoquant des barres de défilement horizontales.
3. Basculement prématuré vers le tiroir desktop : Les media queries du thème peuvent passer au menu hamburger mobile sur un viewport desktop de largeur portable lorsque l’espace horizontal n’est pas géré.

Selon les recommandations Cumulative Layout Shift (CLS) de web.dev, « un décalage de mise en page se produit chaque fois qu’un élément visible change de position d’une image rendue à la suivante ». Un en-tête qui passe déjà à la ligne dès le premier rendu est un problème de mise en page, mais ce n’est pas en soi un décalage de mise en page. Les décalages surviennent lorsque l’en-tête change après avoir été affiché, par exemple lorsqu’une police ou un script chargé tardivement modifie sa hauteur. Les décalages de mise en page survenant dans les 500 millisecondes suivant une action de l’utilisateur sont exclus du CLS.

Ce que dit la recherche sur le balayage visuel, la recherche et les liens utilitaires

Les recherches publiées en ergonomie fournissent quelques attentes de base pour la conception d’en-têtes e-commerce. Elles ne tranchent pas toutes les questions de mise en page ; nous signalons donc les points qui relèvent de notre propre déduction.

Navigation visible ou cachée sur ordinateur de bureau

Dans l’étude du Nielsen Norman Group de Pernice & Budiu (2016), « sur desktop, les gens n’ont utilisé les menus masqués que dans 27 % des cas », tandis que la navigation visible et la navigation combinée ont été utilisées dans 48 % et 50 % des cas, respectivement. La recommandation du NN/g est directe : « N’utilisez pas de navigation masquée (comme les icônes hamburger) dans les interfaces utilisateur desktop. »

Balayage visuel en haut à gauche et hypothèse de la navigation scindée

L’article du NN/g sur le motif en F (Pernice, 2017) décrit « de nombreuses fixations concentrées en haut et sur le côté gauche de la page ». Un logo aligné à gauche avec des liens de catégories se situe dans cette zone.

La navigation scindée avec logo centré est une hypothèse. Nous n’avons trouvé aucune étude publiée qui la teste. Si l’attention commence en haut à gauche, les acheteurs qui parcourent l’aile gauche doivent sauter par-dessus le logo central pour atteindre les catégories de l’aile droite ; ces liens pourraient donc recevoir moins d’attention. Les marchands qui utilisent des en-têtes scindés devraient vérifier l’engagement avec des cartes de clics ou des cartes thermiques.

Emplacement et dimensionnement du champ de recherche

Les recommandations du NN/g sur la recherche (Nielsen, 2001) indiquent que « sur les pages d’accueil, la recherche doit être un champ de saisie et non un lien », placé en haut de la page, généralement dans le coin droit, et « assez large pour contenir la requête typique ». Une petite boutique peut malgré tout préférer une icône de recherche extensible pour gagner de la place ; considérez cela comme un compromis à tester plutôt que comme une bonne pratique documentée.

Catégories de produits en tant qu’éléments de premier niveau

Baymard Institute (2023) a constaté que « 33 % des sites mobiles ne font pas des catégories de produits les éléments de premier niveau », et note que « faire des catégories de produits les éléments de premier niveau sur les sites desktop correspond à l’implémentation mobile idéale ». Notre déduction : si « À propos », « FAQ » ou « Suivi de commande » se trouvent dans la même rangée que les catégories, ils rivalisent avec les catégories pour un espace et une attention limités. C’est un jugement de conception, pas un résultat mesuré.

Comparatif de quatre modèles de mise en page de header

Pour choisir la bonne architecture d’en-tête, les marchands doivent évaluer chaque modèle selon l’étendue du catalogue, les besoins de recherche et la charge d’utilitaires opérationnels.

Note : Cette comparaison est un résumé de modèles d’architecture, et non un audit mesuré de boutiques spécifiques.

La navigation en ligne alignée à gauche est un point de départ courant pour l’e-commerce. Ancrer le logo à gauche et faire courir les liens vers la droite offre aux catégories de produits une étendue horizontale ininterrompue.

Le logo centré avec navigation scindée offre une symétrie éditoriale aux marques ayant peu de liens. Cependant, comme l’espace est divisé, l’ajout de catégories ou de sélecteurs de localisation peut rapidement provoquer des collisions.

La navigation superposée à deux niveaux résout les conflits d’espace en séparant les rôles verticalement. Les marchands à fort volume peuvent placer l’identité de marque, la recherche ouverte et les utilitaires sur la barre supérieure et réserver la barre inférieure aux catégories. La profondeur des catégories peut alors passer dans un méga menu : Baymard indique que « les menus déroulants au survol (alias « méga menus ») sont actuellement utilisés comme navigation principale sur 88 % de tous les principaux sites e-commerce américains » dans son benchmark de navigation principale, dont les exemples proviennent d’un benchmark UX de 344 sites e-commerce. Pour la conception du panneau lui-même, consultez notre guide des meilleures pratiques pour méga menus Shopify.

Du point de vue de l’accessibilité, le guide W3C WAI ARIA Authoring Practices note que « un menu visuellement persistant est une barre de menus (menubar) ».

Séparer les menus utilitaires de la navigation du catalogue

Dans l’architecture d’un site web, la navigation utilitaire regroupe les outils qui aident le client dans ses tâches sans appartenir au catalogue de produits, comme la connexion au compte, le suivi de commande, les sélecteurs de devise, les localisateurs de magasins et le support client. Le NN/g le formule ainsi : « La navigation utilitaire se compose d’actions et d’outils secondaires ».

Figure 1 : Illustration conceptuelle (Concept illustration) — en-tête avec liens utilitaires mêlés au menu principal comparé à un en-tête qui les déplace dans une barre utilitaire.

Selon le Nielsen Norman Group (Farrell, 2015), les liens utilitaires peuvent occuper « un emplacement visuel secondaire (moins proéminent) » par rapport à la navigation principale.

Dans les boutiques Shopify, les marchands disposent généralement de trois moyens de sortir les liens utilitaires de la rangée principale. Ceux qui sont disponibles dépendent de votre thème :

1. Un menu secondaire ou une zone utilitaire dans la section En-tête du thème : Certains thèmes proposent un second réglage de menu ou une fine bande au-dessus de la barre principale. Consultez les réglages d’En-tête de votre thème pour voir ce qu’il propose.
2. Une barre utilitaire supérieure : Si votre thème prend en charge une bande au-dessus de l’en-tête principal, elle peut accueillir des éléments tels que le sélecteur de devise, le compte client et le suivi de commande, laissant la barre principale aux liens du catalogue.
3. Réaffectation au pied de page : Déplacer les liens institutionnels comme « À propos », « Presse » et « FAQ » vers le footer allège l’en-tête tout en les gardant accessibles.

Pour des conseils spécialisés sur la simplification de la navigation dans le parcours de paiement, consultez notre analyse de l’en-tête de page de paiement checkout.

Ingénierie des breakpoints : Tester votre header aux largeurs d’ordinateur portable

Plutôt que de se fier à une inspection visuelle sur un moniteur grand écran, planifiez l’en-tête selon un budget explicite de pixels horizontaux.

Figure 2 : Illustration conceptuelle (Concept illustration) — un en-tête Shopify testé à la largeur d’un grand moniteur et à une largeur d’ordinateur portable plus étroite où le menu nécessite un plan.

La formule de largeur disponible

Estimez le budget de pixels horizontaux disponible pour les liens de catégories principales avec cette formule pratique :

Available Width = Viewport Width - (Logo Width + Utility Cluster Width + Container Padding & Margins)
Max Width Per Item = Available Width / Number of Primary Links

Une structure hypothétique (aucune mesure réelle) : mesurez le logo, le bloc utilitaire et les marges de votre propre boutique, soustrayez-les de la largeur du viewport pour obtenir la largeur disponible (Available Width), puis divisez par le nombre de liens de catégories pour obtenir un budget par lien. Comparez ce budget au libellé le plus large que vous mesurez sur votre boutique.

Mesurer la largeur réelle des libellés dans les DevTools

Pour vérifier si la navigation tient sans retour à la ligne, auditez les largeurs des libellés directement dans les outils de développement du navigateur :

1. Ouvrez Chrome DevTools (Cmd+Option+I ou F12) et activez le mode appareil (Device Mode).
2. Réglez la largeur du viewport responsive sur la largeur effective d’ordinateur portable de l’exemple de mise à l’échelle ci-dessus, ou sur une largeur tirée de vos propres analytics.
3. Inspectez le libellé de navigation le plus long dans l’onglet Computed pour noter sa largeur en pixels rendue, padding et marge compris.
4. Multipliez la largeur du libellé le plus long par le nombre de liens pour une vérification prudente. Si le total dépasse la largeur disponible (Available Width), le menu risque de passer à la ligne ou d’être tronqué.

Règles empiriques d’architecture

Ce sont des jugements de conception, pas des seuils mesurés. Confirmez toujours avec la vérification de largeur ci-dessus.

• Boutique à petit catalogue : Avec peu de catégories principales, un logo à gauche en ligne ou un logo centré scindé tient généralement plus facilement sur les viewports d’ordinateurs portables.
• Boutique à catalogue intermédiaire : Le logo à gauche en ligne peut convenir si les liens utilitaires sont de compactes icônes et que les libellés sont courts.
• Grand magasin multi-rayons : Avec de nombreuses catégories principales, la navigation en ligne risque de entrer en collision sur les écrans d’ordinateurs portables. Envisagez une mise en page superposée à deux niveaux, ou un méga menu qui déplace la profondeur hors de la barre.
• Boutique internationale ou multi-devises : Les sélecteurs de localisation consomment de l’espace utilitaire horizontal. Envisagez de déplacer les sélecteurs vers une barre utilitaire supérieure ou le footer.

Lorsque la navigation dépasse la largeur disponible, trois voies de remédiation s’offrent à vous : élaguer les liens principaux, raccourcir le texte des libellés ou migrer vers une mise en page à deux niveaux. Évitez de réduire prématurément la navigation desktop dans un tiroir hors-canevas.

Pièges spécifiques à Shopify : Sélecteurs Markets, taille du DOM et majuscules

La construction de la navigation dans Shopify présente des défis propres à la plateforme.

Sélecteurs de devise et de langue Shopify Markets

Les boutiques qui vendent dans plusieurs pays ajoutent souvent des sélecteurs de devise, de pays ou de langue à l’en-tête. Selon le thème, ceux-ci peuvent s’afficher sous forme de boutons assez larges avec un code de devise ou un drapeau. Dans un en-tête en ligne sur une seule rangée, un sélecteur large prend de la place aux catégories et peut provoquer des retours à la ligne sur ordinateur portable. Envisagez de placer les sélecteurs Markets dans une bande utilitaire supérieure ou dans le footer.

Taille du DOM du header et surcharge Liquid

Générer un menu déroulant étendu à plusieurs niveaux directement en Liquid ajoute son balisage à chaque réponse de page, et ce balisage compte dans la taille du DOM de la page. Selon les recommandations Google Chrome Lighthouse sur la taille du DOM, Lighthouse « avertit lorsque l’élément body compte plus de ~800 nœuds » et « signale une erreur lorsque l’élément body compte plus de ~1 400 nœuds ». Un en-tête lourd consomme une partie de ce budget avant même que le contenu de la page soit rendu. Pour en savoir plus, consultez notre guide sur la navigation et les Core Web Vitals.

Typographie en majuscules et espacement des lettres

Les chartes graphiques de marque spécifient souvent une typographie en majuscules avec un espacement de lettres élargi pour les liens de navigation. Mettre le texte en majuscules (text-transform: uppercase) élargit généralement le texte par rapport à la casse de phrase, et letter-spacing ajoute de l’espace après chaque caractère. Remesurez les largeurs de libellés rendues chaque fois que vous modifiez la typographie de la boutique.

Limites natives de l’imbrication des menus Shopify

Selon la documentation du Centre d’aide Shopify sur les menus déroulants, « l’élément de premier niveau peut avoir jusqu’à deux niveaux de menus déroulants imbriqués », ce qui fixe un plafond de plateforme de trois niveaux de navigation. Vous configurez ces menus dans l’admin Shopify et les associez à des thèmes comme Horizon ou à d’autres couverts dans notre hub de thèmes Shopify.

Compromis : Quand éviter chaque modèle de header

Chaque mise en page d’en-tête impose des compromis entre esthétique, efficacité d’espace et découvrabilité du catalogue.

Les boutiques mono-produit utilisant des en-têtes en ligne peuvent se retrouver avec un vide gênant entre la marque et l’icône du panier. À l’inverse, une mise en page scindée centrée peut manquer de place de chaque côté lorsqu’une marque ajoute des collections saisonnières ou des sélecteurs de devises internationales.

Les en-têtes superposés à deux niveaux ajoutent de la hauteur verticale et repoussent le contenu principal vers le bas de la page ; mesurez donc la hauteur combinée de votre barre d’annonce, de votre barre utilitaire et de votre navigation principale. Pour les boutiques où les acheteurs mobiles sont largement majoritaires, cette hauteur supplémentaire sur desktop n’en vaut peut-être pas la peine.

Enfin, les tiroirs desktop masqués vont à l’encontre des recommandations du NN/g et de sa conclusion selon laquelle les utilisateurs desktop utilisaient beaucoup moins les menus masqués que les menus visibles (27 % contre 48 % des cas). Les tiroirs hors-canevas sont la norme sur les écrans mobiles, mais les viewports desktop ont généralement la place pour des liens visibles. Pour l’architecture des tiroirs mobiles, lisez notre guide sur la conception de menus tiroirs mobiles.

Checklist d’action : Auditer votre header Shopify

Auditez l’en-tête de votre boutique Shopify avec cette checklist en six étapes :

• Étape 1 : Réaliser l’audit du viewport d’ordinateur portable — Ouvrez Chrome DevTools et testez votre boutique à la largeur effective d’ordinateur portable de l’exemple de mise à l’échelle et aux largeurs présentes dans vos propres analytics. Vérifiez que les liens de catégories ne passent pas à la ligne, qu’aucune barre de défilement horizontale n’apparaît et que le thème ne se réduit pas en menu hamburger.
• Étape 2 : Sortir les utilitaires non commerciaux de la rangée catalogue — Retirez « Suivi de commande », « À propos » et « FAQ » du menu de catégories principal. Déplacez-les vers une barre utilitaire supérieure, un menu déroulant du compte ou le menu du footer.
• Étape 3 : Définir un budget de hauteur d’en-tête — Mesurez la hauteur combinée de la barre d’annonce, de la barre utilitaire et de la navigation principale. Vérifiez quelle part du premier écran ils occupent sur un ordinateur portable.
• Étape 4 : Auditer la typographie de navigation et la formulation des libellés — Inspectez le libellé de catégorie le plus long. Raccourcissez les formulations trop verbeuses (par exemple, « Vêtements d’extérieur et vestes pour hommes » en « Vestes homme »). Vérifiez si les majuscules ou l’espacement des lettres gonflent la largeur des libellés.
• Étape 5 : Vérifier la taille des cibles de clic et de toucher — Assurez-vous que les icônes et liens de l’en-tête respectent le critère de succès W3C WCAG 2.2 SC 2.5.8 Taille de la cible (minimum) : une cible de pointeur d’au moins 24 par 24 pixels CSS, ou un espacement suffisant autour des cibles plus petites.
• Étape 6 : Valider la navigation au clavier et la gestion du focus — Vérifiez que les acheteurs peuvent parcourir votre en-tête avec Tab et Shift+Tab. Contrôlez que la touche Échap ferme un menu déroulant ouvert et rend le focus à l’élément qui l’a ouvert, comme dans le modèle Menubar W3C WAI ARIA.

Où se positionne Navi+

Lorsqu’un catalogue en croissance dépasse ce que l’en-tête du thème peut contenir, une option consiste en un travail Liquid sur mesure. Navi+ est une application Shopify qui construit des menus séparés sans vous obliger à modifier le code de l’en-tête du thème.

• Menus desktop et mobile séparés : Concevez un Desktop Mega Menu pour les utilisateurs sur ordinateur et configurez un Mobile Menu (tiroir), une Tab Bar (voir notre analyse de l’architecture de barre d’onglets mobile), un Icon Menu ou un Floating Button pour mobile.
• Jusqu’à 3 niveaux : Comme les menus natifs de Shopify, les menus Navi+ vont jusqu’à trois niveaux. Un Desktop Mega Menu peut loger la profondeur des catégories dans un panneau plutôt que dans la barre d’en-tête.
• Intégration via Theme App Embed : Navi+ s’active via un theme app embed standard de Shopify. Les menus sont stockés sous forme de configuration et générés dans le navigateur par les scripts de l’application, sans modifier les fichiers Liquid du thème.

Nous n’avançons ici aucune affirmation de vitesse. Mesurez l’effet sur votre propre boutique avec Google PageSpeed Insights.

Quand ne pas utiliser Navi+ : Les marques mono-produit ou les boutiques à très petit catalogue ont rarement besoin d’une application de navigation tierce. Pour ces boutiques, les réglages d’en-tête propres au thème peuvent suffire. Nos guides de configuration Navi+ pour les thèmes Shopify couvrent les thèmes populaires si vous souhaitez comparer.

Si l’en-tête de votre thème manque de place, vous pouvez essayer Navi+ pour créer un Desktop Mega Menu et un Mobile Menu séparés sans modifier le code du thème, puis refaire la vérification à largeur d’ordinateur portable de la checklist ci-dessus.

FAQ

Comment modifier le menu d’en-tête sur Shopify ?

Ouvrez votre thème dans l’éditeur de thème et sélectionnez la section En-tête. Selon le Centre d’aide Shopify, vous pouvez modifier le menu principal par défaut de la plupart des thèmes en éditant les réglages de la section En-tête du thème.

Combien de niveaux un menu déroulant Shopify peut-il comporter ?

Selon la documentation officielle Shopify, un élément de premier niveau peut avoir jusqu’à deux niveaux de menus déroulants imbriqués, ce qui donne un maximum de trois niveaux de navigation.

Faut-il utiliser un menu hamburger sur ordinateur ?

Le Nielsen Norman Group le déconseille : « N’utilisez pas de navigation masquée (comme les icônes hamburger) dans les interfaces utilisateur desktop. » Dans son test, les utilisateurs desktop ont utilisé les menus masqués dans 27 % des cas contre 48 % pour la navigation visible.

Où placer la barre de recherche dans l’en-tête ?

Le NN/g recommande un champ de saisie plutôt qu’un lien, placé en haut de la page (généralement dans le coin droit) et assez large pour contenir la requête typique.

Où placer les liens de compte, de suivi de commande et de devise ?

Ces éléments relèvent de la navigation utilitaire : des actions et outils secondaires. Le NN/g note qu’ils peuvent occuper un emplacement secondaire, moins proéminent ; une barre utilitaire supérieure ou le côté droit de l’en-tête convient donc, séparés des catégories du catalogue.

Quelle taille doivent avoir les liens et icônes d’en-tête ?

Selon le critère W3C WCAG 2.2 SC 2.5.8, la taille de cible pour les entrées de pointeur est d’au moins 24 par 24 pixels CSS, sauf si une exception s’applique, comme un espacement suffisant autour de la cible.

Sources

1. Nielsen Norman Group: Pernice, K. & Budiu, R. (2016). Hamburger Menus and Hidden Navigation Hurt UX Metrics. nngroup.com/articles/hamburger-menus
2. Nielsen Norman Group: Nielsen, J. (2001). Search: Visible and Simple. nngroup.com/articles/search-visible-and-simple
3. Nielsen Norman Group: Pernice, K. (2017). F-Shaped Pattern of Reading: Misunderstood, But Still Relevant. nngroup.com/articles/f-shaped-pattern-reading-web-content
4. Nielsen Norman Group: Farrell, S. (2015). Utility Navigation: What It Is and How to Design It. nngroup.com/articles/utility-navigation
5. Baymard Institute: ‘Main Navigation’ Design Examples. baymard.com/homepage-and-category-usability/benchmark/page-types/drop-down-menu
6. Baymard Institute (2023): Make Product Categories the Top-Level Navigation Items on Mobile Sites (33% Don’t). baymard.com/blog/main-navigation-product-categories
7. Shopify Help Center: Set up drop-down menus in your online store. help.shopify.com
8. W3C Web Accessibility Initiative: Understanding SC 2.5.8: Target Size (Minimum). w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
9. W3C WAI ARIA: Menu and Menubar Pattern. w3.org/WAI/ARIA/apg/patterns/menubar
10. Google web.dev: Cumulative Layout Shift (CLS). web.dev/articles/cls
11. Google Chrome Lighthouse: Avoid an excessive DOM size. developer.chrome.com
12. Navi+: Setup guides for Shopify themes. naviplus.io/shopify-themes