Comment personnaliser la disposition du menu d'en-tête dans Shopify (Paramètres du thème, menus déroulants et méga menus)

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

Pour personnaliser pas à pas la disposition de votre menu d’en-tête :

1. Ouvrez les réglages du thème : Dans votre interface administrateur Shopify, allez dans Boutique en ligne > Thèmes > Personnaliser et cliquez sur la section En-tête (Header).
2. Définissez la position du logo et la disposition : Ajustez le paramètre Logo position pour placer votre logo à gauche sur la même ligne ou centré au-dessus du menu. (Les intitulés varient selon les thèmes ; dans Dawn, l’option s’appelle Logo position).
3. Associez et imbriquez votre menu : Rendez-vous dans Contenu > Menus pour structurer vos liens jusqu’à 2 niveaux imbriqués, puis attribuez ce menu sous En-tête > Menu.
4. Choisissez le type de menu et vérifiez le mobile : Sous Menu type, sélectionnez Dropdown, Mega menu ou Drawer, puis ajustez l’affichage mobile via Mobile logo position.

What “Header Menu Layout” Means in Shopify

Lorsque les marchands souhaitent personnaliser la disposition de leur menu d’en-tête, ils ne modifient presque jamais un seul paramètre isolé. Dans Shopify, la disposition de l’en-tête repose sur l’interaction de quatre couches structurelles :

1. Identité et alignement (Logo position) : Détermine l’emplacement du logo par rapport aux liens de navigation, à la barre de recherche et au panier.
2. Liste de navigation assignée (Quel menu afficher) : Le menu précis créé dans l’administration et relié à la section d’en-tête.
3. Hiérarchie structurelle et type de menu (Profondeur & présentation) : La façon dont les sous-catégories s’ouvrent sur ordinateur – en listes déroulantes étroites, en larges panneaux multi-colonnes ou en tiroir dissimulé.
4. Règles d’affichage mobile (Disposition mobile & tiroir latéral) : La manière dont la barre s’adapte aux écrans tactiles, avec le placement des icônes et le comportement du tiroir coulissant.

D’après la documentation officielle de Shopify, vous modifiez le menu principal par défaut de la plupart des thèmes via les réglages de la section En-tête. En revanche, les liens eux-mêmes, leurs libellés et leurs relations hiérarchiques se configurent dans Contenu > Menus. Dans cette interface, l’élément de premier niveau prend en charge jusqu’à deux niveaux de menus déroulants imbriqués (soit trois niveaux au total).

Chaque thème gérant ces éléments à sa façon, ce guide s’appuie sur Dawn, le thème de référence de Shopify. Dans Dawn, ces commandes correspondent à des réglages de schéma modulaires, mais les libellés et options diffèrent dans d’autres thèmes. Pour approfondir les modèles d’architecture pour ordinateurs portables et les points de rupture flex, consultez notre étude sur les modèles de disposition d’en-tête et breakpoints.

Step 1: Change the Logo and Menu Position in the Theme Editor

Le premier niveau visuel de votre en-tête est l’alignement entre le logo et les liens de navigation. Voici comment le configurer dans Shopify :

1. Connectez-vous à votre panneau d’administration Shopify.
2. Allez dans Boutique en ligne > Thèmes.
3. Sur votre thème actif ou une copie de travail, cliquez sur Personnaliser.
4. Dans le panneau latéral gauche, sélectionnez la section En-tête (Header).

Dans Dawn, vous trouverez le paramètre Logo position, qui offre quatre configurations principales :

• Middle left : Place le logo à gauche, sur la même ligne horizontale que le menu principal. Cette disposition compacte préserve l’espace vertical.
• Top left : Positionne le logo en haut à gauche et décale les liens de navigation sur une ligne dédiée juste en dessous.
• Top center : Centre le logo en haut et dispose le menu de navigation centré juste en dessous. Si vous voulez un logo centré avec le menu dessous, c’est l’option native exacte à retenir.
• Middle center : Centre le logo, avec le menu à gauche et les icônes du header à droite.

Gardez en tête que ces libellés sont propres à Dawn ; les dénominations et les choix de mise en page diffèrent dans d’autres thèmes. Certains thèmes tiers séparent l’alignement du logo de celui du menu ou proposent des gabarits fixes. Si votre thème ne propose pas l’agencement recherché, référez-vous au cadre de décision lorsque le thème manque d’options ci-dessous.

Step 2: Choose the Header Menu and Build Nested Links

Modifier la position du menu ne sert à rien si l’en-tête pointe vers la mauvaise liste ou si les sous-catégories ne se déroulent pas. Sur Shopify, les menus sont créés dans l’administration puis assignés dans l’éditeur.

Pour construire et assigner votre menu :

1. Dans l’administration Shopify, allez dans Contenu > Menus (comme détaillé dans l’Aide Shopify).
2. Cliquez sur Menu principal (ou sur Créer un menu).
3. Ajoutez vos rubriques maîtresses en tant qu’éléments de premier niveau.
4. Pour créer des sous-menus, faites glisser les sous-éléments vers la droite sous l’élément parent jusqu’à faire apparaître un retrait.
5. Cliquez sur Enregistrer le menu.

Selon les spécifications de Shopify, l’élément de premier niveau peut comporter jusqu’à deux niveaux de menus déroulants imbriqués (soit trois niveaux au total). Tous les thèmes affichent ces éléments imbriqués sous forme de menus déroulants issus du menu principal.

Une fois la hiérarchie enregistrée, retournez dans Boutique en ligne > Thèmes > Personnaliser, ouvrez la section En-tête, repérez la carte Menu, cliquez sur Modifier, sélectionnez votre liste et cliquez sur Enregistrer. Pour un tutoriel pas à pas sur l’organisation des sous-catégories sans erreur de manipulation, lisez notre guide pour ajouter un sous-menu à votre menu de navigation.

Step 3: Pick Dropdown, Mega Menu, or Drawer

Une fois les liens associés, vous devez choisir la manière dont les sous-catégories apparaissent sur grand écran. Dans Dawn, la section En-tête propose le réglage Menu type avec 3 modes (les libellés varient selon le thème) :

Figure 1 : Illustration conceptuelle (Concept illustration) — Step 3: Pick Dropdown, Mega Menu, or Drawer

Selon les recherches du Nielsen Norman Group, les méga menus constituent « un excellent choix de conception pour accueillir un grand nombre d’options ». Le NN/g souligne qu’ils dévoilent tout d’un coup d’œil, permettant aux visiteurs de découvrir visuellement les produits au lieu d’essayer de se souvenir du contenu de titres génériques.

À l’inverse, choisir Drawer dans Dawn (piloté par la condition section.settings.menu_type_desktop == 'drawer' dans le header.liquid de Dawn) masque les liens horizontaux derrière un bouton de menu sur ordinateur. C’est épuré, mais avec un vrai compromis : la recherche du NN/g de 2016 a constaté que la découvrabilité est presque divisée par deux lorsque la navigation principale d’un site est masquée. Si votre catalogue est large, réservez le tiroir au mobile et gardez un menu ouvert sur ordinateur. Pour concevoir des colonnes de liens, des titres et des vignettes équilibrés, consultez notre guide sur meilleures pratiques pour méga menus.

Show Menu Links Directly in the Header Instead of a Dropdown

Une question courante, notamment dans un fil de la Shopify Community sur le thème Sense, est de savoir comment afficher les liens de premier niveau directement dans le header, sans menu déroulant.

Dans Shopify, le menu déroulant n’est pas activé par un bouton dans le thème, mais par la hiérarchie du menu. L’Aide Shopify précise que tous les thèmes affichent les éléments imbriqués sous forme de menus déroulants. Si un lien possède des sous-éléments indentés dans Contenu > Menus, le thème génère automatiquement un menu déroulant.

Pour afficher tous vos liens à plat sur la barre d’en-tête :

1. Accédez à votre administration Shopify et ouvrez Contenu > Menus.
2. Sélectionnez le menu associé à l’en-tête.
3. Vérifiez la liste. Si un élément est indenté sous un autre, glissez-le vers la gauche jusqu’à l’aligner avec le premier niveau.
4. Assurez-vous que chaque lien se situe au niveau racine.
5. Cliquez sur Enregistrer le menu.

Sur votre boutique, les liens s’afficheront désormais côte à côte sur la ligne de navigation horizontale, sans aucun conteneur déroulant.

Gardez en tête les limites de largeur. Le NN/g conseille d’afficher les liens sous forme de liens visibles lorsqu’un site compte 4 liens de navigation de premier niveau ou moins. Avec beaucoup de liens de premier niveau, la ligne peut passer sur deux lignes ou empiéter sur le logo sur les écrans de laptop plus étroits ; prévisualisez donc plusieurs largeurs. Si votre catalogue demande de nombreuses destinations, regroupez-les sous des titres parents, par exemple avec un méga-menu, plutôt que de surcharger la barre principale.

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Une mise en page de menu de header équilibrée sur un écran d’ordinateur peut facilement se dégrader sur un téléphone. L’espace mobile étant limité, les thèmes gèrent la navigation mobile avec des mises en page responsives dédiées.

Figure 2 : Illustration conceptuelle (Concept illustration) — Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Dans les paramètres d’En-tête de Dawn, les marchands disposent du réglage Mobile logo position :

• Center : Centre le logo dans la barre de header mobile.
• Left : Aligne le logo à gauche de la barre de header mobile.

Les libellés varient selon le thème. Par exemple, dans les thèmes tiers comme Stiletto, le menu mobile utilise des réglages de la section Header. Dans de nombreux thèmes, les liens de navigation mobile se replient dans un tiroir latéral ouvert d’un toucher sur l’icône hamburger.

S’appuyer uniquement sur un tiroir hamburger masqué a toutefois un coût. La recherche du Nielsen Norman Group de 2016 a constaté que la découvrabilité est presque divisée par deux lorsque la navigation principale d’un site est masquée.

Les tiroirs masqués restent utiles pour les grands catalogues, mais vous pouvez aussi garder quelques pages clés visibles avec une barre d’onglets fixe en bas (par exemple Home, Shop, Search et Cart), à portée de pouce, et laisser les catégories plus profondes au tiroir. Pour configurer des structures de liens indépendantes selon l’appareil, consultez notre tutoriel sur créer un menu de bureau et un menu mobile séparés.

When Your Theme Runs Out of Options: Code Edits vs a Menu App

Chaque marchand finit par rencontrer les limites du personnalisateur de thème : besoin de 5 colonnes au lieu de 4 dans le méga menu, menu divisé de part et d’autre d’un logo centré ou bannières visuelles dans le tiroir mobile. Face à ce constat, deux options s’offrent à vous : modifier le code Liquid ou installer une application spécialisée.

Before you edit code: duplicate the theme

Si vous choisissez d’intervenir dans le code du thème (comme sections/header.liquid ou les feuilles de style CSS), ne travaillez jamais directement sur votre thème en ligne. La documentation de Shopify recommande vivement de créer une copie de sauvegarde afin de pouvoir annuler vos modifications et recommencer en cas d’erreur.

Pour dupliquer votre thème en toute sécurité :

1. Dans l’administration Shopify, allez dans Boutique en ligne > Thèmes.
2. Repérez votre thème actuel, ouvrez son menu d’actions et sélectionnez Duplicate.
3. Renommez cette copie pour indiquer qu’il s’agit d’une version de test de code.
4. Effectuez et validez tous vos ajustements sur cette copie avant toute publication.

The hidden cost of custom theme edits

Modifier le code directement entraîne une maintenance continue. La documentation Shopify avertit que lors de la mise à jour d’un thème, vos modifications de code peuvent être supprimées de la copie mise à jour. Si vous réécrivez header.liquid pour changer l’alignement, les media queries CSS ou les animations du tiroir, prévoyez de vérifier et de réappliquer ces modifications après chaque mise à jour du thème.

Si vos besoins de mise en page dépassent les réglages natifs, vous pouvez envisager un thème conçu pour une navigation plus complexe, ou une application qui fonctionne en complément de votre thème.

Common Header Menu Problems and Fixes

Lors du réglage de l’en-tête, de petites erreurs de configuration peuvent masquer vos liens. Voici comment résoudre les dysfonctionnements les plus fréquents :

Trade-offs: When Not to Change Your Header Layout

Refondre la disposition de votre en-tête n’est pas toujours opportun. Avant d’engager des modifications, évaluez les compromis réels :

• Un petit catalogue n’a pas besoin de méga-menu : si votre boutique n’a que quelques catégories simples, un large panneau de méga-menu peut laisser plus d’espace que nécessaire. Un menu déroulant à une colonne ou une simple rangée de liens suffit souvent.
• Un tiroir sur ordinateur réduit la visibilité de la navigation : choisir Drawer sur ordinateur donne un rendu épuré, mais la recherche du NN/g de 2016 a constaté que masquer la navigation principale divise presque par deux la découvrabilité. Réservez-le aux boutiques où la découverte repose sur le storytelling de la page.
• Les modifications Liquid personnalisées créent du travail à chaque mise à jour : selon la documentation Shopify, les modifications de header.liquid ou du CSS personnalisé peuvent être perdues lors de la mise à jour du thème. Si personne ne peut maintenir ces modifications d’une version à l’autre, privilégiez les réglages standard du thème ou une application.
• Ajouter une application implique une charge de gestion : Chaque outil tiers ajoute un panneau de contrôle supplémentaire. N’installez une extension que si votre thème ne parvient réellement pas à gérer l’arborescence de vos produits.

Where Navi+ Fits

Lorsque les options de header de votre thème atteignent leurs limites, Navi+ est une façon d’ajouter des fonctions de navigation en complément de votre thème.

Vous créez le menu dans l’application Navi+ et l’activez comme app embed dans l’éditeur de thème. Le menu est dessiné dans le navigateur à côté du header de votre thème, donc vous n’avez pas besoin de modifier header.liquid :

• Desktop Mega Menu : affiche un menu déroulant riche avec colonnes, images et liens mis en avant.
• Mobile Menu : un menu mobile coulissant qui dévoile toute votre navigation sans quitter la page.
• Tab Bar : une barre d’onglets fixe en bas pour mobile, qui garde quelques destinations clés à portée de pouce.

Les menus Navi+ vont eux aussi jusqu’à trois niveaux. Pour décider quel type de menu convient à votre catalogue, consultez notre guide : choisir le bon type de menu.

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

Suivez cette liste de vérification en 8 points pour concevoir, régler et valider la disposition de votre menu d’en-tête :

• Dupliquer votre thème : Créez une sauvegarde sous Boutique en ligne > Thèmes avant de retoucher la disposition.
• Régler la position du logo : Dans Personnaliser > En-tête, choisissez la Logo position idéale (ex. Top center ou Middle left dans Dawn ; les intitulés varient selon les thèmes).
• Structurer la hiérarchie du menu : Dans Contenu > Menus, organisez vos liens par glisser-déposer avec des retraits propres (maximum 2 niveaux imbriqués sous un parent).
• Associer le menu à l’en-tête : Vérifiez sous En-tête > Menu que la section pointe bien vers votre liste de navigation.
• Sélectionner le type de menu pour ordinateur : Choisissez entre Dropdown, Mega menu ou Drawer selon l’ampleur de votre catalogue.
• Contrôler l’alignement mobile : Testez le rendu sur smartphone et ajustez Mobile logo position (Center ou Left).
• Tester l’ergonomie tactile : Vérifiez le tiroir mobile sur un vrai téléphone et évaluez l’intérêt d’une barre d’onglets inférieure pour vos pages clés.
• Vérifier les points de rupture d’écran : Validez l’affichage sur ordinateur, portable et tablette pour vous assurer que les liens ne passent pas maladroitement à la ligne.

FAQ

How many levels can a Shopify header menu have?

L’élément de premier niveau d’un menu Shopify peut comporter jusqu’à deux niveaux de menus déroulants imbriqués au-dessous, ce qui correspond à une profondeur maximale de trois niveaux hiérarchiques.

How do I make a dropdown in the Shopify header?

Dans l’administration Shopify, allez dans Contenu > Menus, sélectionnez votre menu, faites glisser les sous-éléments vers la droite sous un élément parent pour les indenter, puis enregistrez.

How do I put the logo in the center with the menu below?

Dans le personnalisateur de Dawn, cliquez sur la section En-tête et réglez Logo position sur Top center. Ce paramètre centre votre logo et place le menu de navigation juste en dessous. (Les intitulés diffèrent dans les autres thèmes).

Can I show menu links in the header instead of a dropdown?

Oui. Les thèmes Shopify affichent automatiquement sous forme de menu déroulant tout élément contenant des sous-liens. Pour que vos liens s’affichent à plat sur la barre, placez-les tous au premier niveau dans Contenu > Menus.

Can I change the menu layout only on mobile?

Oui. Dawn propose un paramètre dédié Mobile logo position (Center ou Left) dans la section En-tête. Les liens mobiles partagent généralement la liste du bureau au sein d’un tiroir latéral, mais certains thèmes offrent des réglages mobiles spécifiques dans l’en-tête.

Should I edit header.liquid?

Ne modifiez header.liquid qu’après avoir créé une copie de sauvegarde de votre thème. Gardez à l’esprit que vos modifications de code peuvent être supprimées lors de la mise à jour vers une version plus récente du thème.

Sources

• Shopify Help Center: Drop-down menus — Documentation officielle sur l’imbrication des menus, l’assignation de l’en-tête et la gestion dans Contenu > Menus.
• Shopify Help Center: Duplicating themes — Directives officielles recommandant la sauvegarde préalable avant toute modification de code.
• Shopify Help Center: Editing theme code — Avertissement concernant la suppression des modifications de code personnalisées lors des mises à jour de thème.
• Shopify Dawn GitHub Repository: en.default.schema.json — Schéma source définissant les paramètres natifs Logo position, Menu type et Mobile logo position.
• Shopify Dawn GitHub Repository: sections/header.liquid — Fichier modèle implémentant les types de menus pour ordinateur et les tiroirs latéraux.
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — Recherche en ergonomie démontrant l’efficacité des méga menus pour afficher un grand nombre d’options.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — Étude établissant que dissimuler la navigation principale derrière une icône réduit sa découvrabilité de presque moitié.
• Fluorescent Theme Documentation: Stiletto Header — Exemple technique montrant la gestion des paramètres d’en-tête mobile et bureau dans des thèmes tiers.
• Shopify Community: How to change header-menu layout Sense theme — Fil d’échange d’utilisateurs traitant de l’affichage horizontal direct de liens sans conteneur déroulant.