Comment ajouter un sous-menu à votre menu de navigation Shopify (Déroulant, Niveaux et Mobile)

Ajouter un sous-menu dans Shopify ne nécessite qu’un glisser-déposer dans Content > Menus — mais il ne fonctionnera de manière optimale pour vos acheteurs que si l’élément parent, le menu Header du thème et le tiroir mobile sont correctement paramétrés.

Lors du lancement d’une boutique en ligne, une barre horizontale simple avec quatre ou cinq liens est souvent suffisante. Mais à mesure que votre catalogue s’étoffe, regrouper chaque collection sur une seule ligne surcharge votre en-tête. Dans la conception e-commerce, un sous-menu, un menu déroulant (dropdown) et des éléments de menu imbriqués désignent le même concept : des liens secondaires organisés sous un en-tête principal. Vous pouvez les configurer directement dans l’administration Shopify sans modifier le code.

Réponse rapide : Comment ajouter un sous-menu sur Shopify

Pour ajouter un sous-menu dans Shopify, rendez-vous dans Content > Menus, ouvrez votre menu principal, ajoutez l’élément souhaité sous un parent, faites-le glisser en dessous et légèrement vers la droite de ce parent, puis cliquez sur Enregistrer le menu. Un élément de niveau supérieur peut contenir jusqu’à deux niveaux de menus déroulants imbriqués.

Suivez ces cinq étapes simples :

1. Dans votre interface administrateur Shopify, accédez à Content > Menus.
2. Cliquez sur le titre du menu à modifier (généralement Main menu).
3. Cliquez sur Ajouter un élément de menu, saisissez le Nom et le lien de destination, puis cliquez sur Ajouter.
4. Cliquez et maintenez l’icône de poignée (⠿) à côté de l’élément, puis faites-le glisser sous et légèrement à droite du parent pour l’imbriquer.
5. Cliquez sur Enregistrer le menu.

Un élément de premier niveau peut accueillir jusqu’à deux niveaux de menus déroulants en dessous.

Qu’est-ce qu’un sous-menu et quand votre boutique en a-t-elle besoin

Un sous-menu est une série de liens enfants regroupés sous un en-tête parent. Sur ordinateur, le survol ou le clic déroule la liste. Sur mobile, ces éléments s’affichent dans le tiroir de navigation latérale.

Les navigations imbriquées constituent une solution populaire pour organiser efficacement les collections, les produits et les pages. Au lieu d’encombrer votre vitrine, elles établissent un parcours visuel fluide. Les acheteurs explorent d’abord de grands ensembles comme « Vêtements » avant de choisir des sous-catégories comme « Vestes ».

Ajoutez un sous-menu lorsque votre catalogue dépasse une structure simple. Shopify recommande d’ajouter sept éléments de menu de premier niveau ou moins pour éviter l’encombrement. Regrouper les collections sous des parents rend un long en-tête plus facile à parcourir.

Vous n’avez pas besoin de sous-menu si votre boutique ne vend que quelques produits ou ne possède que deux ou trois collections. Imposer des menus déroulants sur un catalogue restreint ajoute des clics superflus.

Une hiérarchie soignée facilite également l’indexation par les moteurs de recherche. Découvrez comment Google explore votre menu pour voir comment les liens du menu aident les moteurs de recherche à trouver vos pages de collection.

Comment ajouter un sous-menu sur Shopify, étape par étape

Shopify intègre un gestionnaire de menus par glisser-déposer. Vous pouvez créer votre arborescence sur ordinateur ou dans l’application mobile.

Sur ordinateur

1. Rendez-vous dans Content > Menus dans votre administration Shopify. (Remarque : les anciens guides appellent cette section Boutique en ligne > Navigation ; le Centre d’aide Shopify actuel utilise Content > Menus.)
2. Cliquez sur le menu à modifier, généralement Main menu.
3. Si vous n’avez pas encore d’élément parent, cliquez sur Ajouter un élément de menu, nommez-le (ex. « Boutique »), attribuez un lien et cliquez sur Ajouter.
4. Cliquez à nouveau sur Ajouter un élément de menu pour créer l’élément enfant. Saisissez son nom, sélectionnez la collection ou la page cible et cliquez sur Ajouter.
5. Repérez l’icône de poignée à six points (⠿) à gauche. Cliquez et maintenez l’icône de poignée (⠿) à côté de l’élément de menu, puis faites-le glisser vers une autre position. Déplacez-le sous votre ligne parent, décalez votre curseur vers la droite jusqu’à ce que la ligne s’indente, puis relâchez.
6. Répétez l’opération pour vos autres sous-catégories en réorganisant les lignes selon vos préférences.
7. Cliquez sur Enregistrer le menu. Enregistrez régulièrement vos modifications pour ne pas atteindre la limite de modifications de Shopify.

Dans l’application mobile Shopify

Vous pouvez également gérer vos menus depuis votre smartphone :

1. Ouvrez l’application Shopify, appuyez sur l’icône Menu et ouvrez Menus dans la section Contents.
2. Appuyez sur le nom de votre menu principal, puis sur Ajouter un élément de menu.
3. Saisissez le nom et le lien de destination, puis appuyez sur Ajouter.
4. Maintenez l’icône de poignée (⠿), glissez l’élément sous le parent et décalez-le vers la droite pour l’indenter.
5. Appuyez sur Enregistrer.

Shopify recommande de tester les menus sur des appareils mobiles afin de vérifier que les menus déroulants s’ouvrent comme prévu et que les zones tactiles sont confortables.

Créer un élément parent qui ouvre uniquement le menu déroulant

De nombreux commerçants se demandent : « Comment rendre un élément de menu non cliquable dans Shopify ? »

Vous pouvez souhaiter qu’un libellé tel que « Acheter par catégorie » serve uniquement de déclencheur de menu déroulant. Si le parent renvoie vers une page vide, un clic involontaire détourne l’acheteur de sa navigation.

Pour rendre un élément parent non cliquable :

1. Dans Content > Menus, cliquez sur Modifier à côté de votre élément parent (ou cliquez sur Ajouter un élément de menu).
2. Saisissez votre titre dans le champ Nom. Utilisez des libellés descriptifs, tels que « Acheter par catégorie », pour les éléments de premier niveau dotés de liens # afin d’orienter immédiatement le visiteur.
3. Si vous ne souhaitez pas que l’en-tête renvoie vers une page, saisissez # dans le champ Rechercher ou coller un lien de cet élément.
4. Cliquez sur Appliquer les modifications, puis sur Enregistrer le menu.

La plupart des thèmes configurent les en-têtes de menu déroulant comme des boutons plutôt que comme des liens cliquables. Avec un lien #, le parent n’a aucune page à charger : un appui peut donc ouvrir le menu déroulant à la place.

Si vous souhaitez tout de même offrir un accès à la page de collection globale, ajoutez un élément enfant nommé « Tout afficher [Catégorie] » en toute première position dans le sous-menu.

Rappel important : lorsque vous supprimez un élément de menu comportant des éléments imbriqués, ces éléments imbriqués sont également supprimés. Si vous devez retirer un parent, glissez d’abord tous ses enfants au niveau supérieur pour les conserver.

Figure 1 : Illustration conceptuelle — Configuration d’un élément parent avec un lien dièse (#) servant de déclencheur face à un lien direct vers une page.

Combien de niveaux un sous-menu Shopify peut-il comporter ?

Les commerçants gérant de vastes catalogues demandent souvent : « Combien de niveaux de menu Shopify peut-il gérer ? »

Dans le gestionnaire de menus natif, l’élément de niveau supérieur peut comporter jusqu’à deux niveaux de menus déroulants imbriqués en dessous. Cela correspond à trois niveaux cumulés :

• Niveau 1 (Parent principal) : L’élément affiché sur la barre horizontale de votre en-tête (ex. « Hommes »).
• Niveau 2 (Premier sous-menu) : La liste déroulante qui s’ouvre sous le niveau 1 (ex. « Chaussures »).
• Niveau 3 (Second sous-menu / volet volant) : Une sous-branche rattachée au niveau 2 (ex. « Baskets »).

Si Shopify gère trois niveaux dans l’administration, l’affichage effectif dépend de votre thème. Assurez-vous de mettre à jour votre thème afin qu’il affiche les trois niveaux de menu sur votre boutique en ligne.

L’emplacement joue également un rôle : presque tous les thèmes affichent les éléments imbriqués sous forme de menus déroulants dans le menu principal, mais seuls certains thèmes le font à d’autres endroits comme le pied de page ou les barres latérales.

Pour tester votre thème, imbriquez un élément test de niveau 3 sous le niveau 2, enregistrez et observez l’aperçu sur ordinateur et mobile. Si le troisième niveau ne s’ouvre pas, votre thème ne le prend peut-être pas en charge.

Privilégiez deux niveaux dès que possible. Les sous-menus de niveau 3 sont plus difficiles à utiliser, surtout à la souris. Pour les catalogues plus denses, lisez notre guide sur la planification d’un menu multi-niveaux Shopify pour concilier profondeur et ergonomie.

Comment fonctionnent les sous-menus sur mobile

Un smartphone n’a pas de souris : votre sous-menu doit donc fonctionner au toucher.

L’expérience client dans le tiroir mobile

Sur petit écran, votre barre horizontale se replie derrière l’icône hamburger. Un appui sur cette icône ouvre un tiroir latéral :

• Les éléments parents affichent souvent un symbole d’ouverture (signe + ou chevron vers le bas).
• Un appui déroule en général les sous-éléments dans une liste ou ouvre un panneau dédié ; le comportement exact dépend de votre thème.
• Quand un parent utilise un lien #, la plupart des thèmes ouvrent la liste au lieu de charger une page.

Shopify souligne que vous devez tester les menus sur des appareils mobiles pour confirmer que les menus déroulants se déploient comme prévu et vérifier que les cibles tactiles sont accessibles.

Ajouter un lien Tout afficher

Sur ordinateur, un visiteur peut survoler un parent pour examiner les enfants tout en cliquant sur le titre pour atteindre la collection. Sur écran tactile, le survol n’existe pas : un appui ouvre le sous-menu ou charge une URL, mais ne peut faire les deux.

Ajouter une option « Tout afficher » dans la navigation principale mobile est un moyen économique pour les sites de répondre à ce besoin des utilisateurs mobiles, selon les études du Baymard Institute.

Pourtant, les analyses de Baymard montrent que seulement 24 % des sites mettent cela en œuvre correctement.

Pour corriger cela :

1. Sous chaque catégorie parente, insérez un lien enfant nommé « Tout afficher [Catégorie] » pointant vers la collection globale.
2. Placez ce lien en toute première position dans la liste imbriquée.
3. Gardez les listes concises afin d’éviter un défilement vertical excessif.

Pour approfondir l’ergonomie mobile, découvrez notre guide des meilleures pratiques pour les menus tiroirs mobiles.

Sous-menu invisible ? Dépannage des problèmes fréquents

Si votre sous-menu n’apparaît pas après l’enregistrement, le problème découle le plus souvent de l’une de ces quatre erreurs de configuration :

Le thème utilise un autre menu

L’erreur la plus fréquente consiste à modifier le menu Main menu par défaut alors que votre thème est configuré sur une autre liste. Assurez-vous que le menu sélectionné comme menu principal supérieur est bien celui que vous venez de créer. Vous pouvez modifier le menu par défaut pour la plupart des thèmes dans les paramètres de la section Header. Allez dans Boutique en ligne > Thèmes > Personnaliser > Header, contrôlez le champ Menu, sélectionnez le vôtre et enregistrez.

L’élément n’est pas indenté

Si les lignes enfants restent alignées sur la marge gauche, Shopify les considère comme des éléments de premier niveau. Dans Content > Menus, faites glisser chaque sous-élément sous son parent et déplacez légèrement votre curseur vers la droite jusqu’à l’indentation, puis enregistrez.

Le thème masque le troisième niveau

Si les éléments de niveau 3 ne s’affichent pas, votre thème ne supporte peut-être pas les menus volants à trois niveaux. Assurez-vous de mettre à jour votre thème afin qu’il affiche les trois niveaux de menu sur votre boutique en ligne. Sachez aussi que certains thèmes restreignent les sous-menus à l’en-tête principal.

Conflits de code personnalisé ou d’applications

Si les menus clignotent ou se bloquent, un script tiers ou du CSS injecté dans theme.liquid interfère avec les déclencheurs du thème. Dupliquez votre thème et testez la navigation sur la copie intacte.

Accessibilité clavier et lecteurs d’écran

La navigation doit également être accessible aux utilisateurs naviguant au clavier ou utilisant des technologies d’assistance.

Les directives de la W3C Web Accessibility Initiative (WAI) indiquent que vous devez signaler les éléments de menu de navigation avec sous-menus visuellement et à l’aide du balisage. Une icône de flèche indique visuellement la présence d’une liste, tandis que les balises ARIA informent les lecteurs d’écran.

De plus, les normes du W3C précisent que les sous-menus ne doivent pas s’ouvrir lors de l’utilisation de la touche tabulation pour parcourir le menu. La raison : les utilisateurs au clavier devraient sinon parcourir chaque sous-élément pour atteindre l’élément de premier niveau suivant.

Consultez notre guide dédié aux menus de navigation accessibles pour les normes de balisage complètes.

Figure 2 : Illustration conceptuelle — Vérification du menu sélectionné dans les paramètres d’en-tête du thème et contrôle de l’indentation des sous-éléments.

Compromis : Quand ne pas ajouter de sous-menu supplémentaire

Les sous-menus apportent de l’ordre, mais multiplier les niveaux n’est pas toujours la meilleure solution. Chaque couche supplémentaire ajoute une friction de navigation.

Lorsque les listes s’allongent trop, l’expérience utilisateur se dégrade. Les recherches du Nielsen Norman Group soulignent ce risque : « Les listes déroulantes très longues qui nécessitent un défilement empêchent les utilisateurs de voir tous leurs choix d’un seul coup d’œil. » Quand un acheteur doit faire défiler un menu, les options du bas sont souvent ignorées.

Avant d’ajouter un nouveau sous-menu, évaluez ces alternatives :

1. Regrouper les petites collections : Si vous avez plusieurs collections ne contenant que deux ou trois articles, fusionnez-les en une seule page plus consistante.
2. Clarifier les intitulés : Des noms explicites évitent aux acheteurs de devoir chercher dans des sous-arborescences complexes.
3. Exploiter les filtres de collection : Permettez le filtrage par taille, couleur ou prix directement sur la page de collection au lieu de lister chaque déclinaison dans le menu.
4. Adopter un méga-menu : Quand votre offre comporte des dizaines de sous-catégories, un méga-menu multi-colonnes organise les liens en blocs lisibles avec des titres, permettant d’embrasser l’offre sans défilement. Cela nécessite un support de thème ou une application tierce.

Pour approfondir les contraintes des thèmes natifs, lisez notre analyse des limites des menus de thèmes Shopify.

Où se situe Navi+

Les menus Shopify par défaut conviennent pour des menus déroulants simples. Cependant, avec l’expansion du catalogue, les listes à colonne unique montrent vite leurs limites. Les longues listes à colonne unique peuvent devenir difficiles à parcourir, et le menu mobile par défaut d’un thème peut être plus simple que ce dont votre catalogue a besoin.

Lorsque votre boutique dépasse ces contraintes basiques, Navi+ apporte des solutions adaptées :

• Desktop Mega Menus : Créez des méga-menus avec produits, collections, images, icônes et mises en page flexibles. Agencez vos sous-catégories dans des mises en page flexibles afin que vos clients parcourent les options sans avoir à faire défiler l’écran.
• Mobile Menus : Concevez des menus mobiles, menus tiroirs et menus hamburger pour faciliter la navigation sur smartphone.

Les menus Navi+ se créent dans l’application Navi+ par glisser-déposer, sans coder. Ils sont distincts du menu de votre administration Shopify, qui n’est pas remplacé automatiquement.

Si votre sous-menu est devenu trop long ou si vous souhaitez intégrer des images et des colonnes sur ordinateur ainsi qu’un tiroir plus clair sur mobile, vous pouvez essayer Navi+ Tab Bar & Mega Menu en complément de votre thème, tandis que votre menu Shopify reste en place.

Checklist avant publication pour votre sous-menu

Avant de déployer votre nouveau menu auprès de vos clients, passez en revue ces 8 points clés :

• Menu d’en-tête vérifié : Vérifié dans Boutique en ligne > Thèmes > Personnaliser > Header que le menu actif correspond à celui modifié dans Content > Menus.
• Indentation confirmée : Vérifié que chaque élément enfant est distinctement indenté sous son parent.
• Parent non cliquable explicite : Si le lien parent est #, vérifié qu’un libellé clair comme « Acheter par catégorie » a été défini.
• Lien « Tout afficher » présent : Ajouté un lien « Tout afficher [Catégorie] » en tête de chaque sous-groupe pour les utilisateurs mobiles.
• Testé sur smartphone réel : Confirmé que le sous-menu s’ouvre et que les liens sont faciles à toucher sur un vrai smartphone.
• Sept éléments principaux au maximum : Limité la barre principale à sept liens ou moins pour préserver la clarté.
• Indicateurs visuels présents : Vérifié la présence d’une flèche ou d’un chevron signalant le contenu déroulant.
• Modifications sauvegardées : Cliqué sur Enregistrer le menu pour acter tous les réglages.

Foire aux questions (FAQ)

Comment ajouter un sous-menu à un menu de navigation dans Shopify ?

Accédez à Content > Menus dans votre administration Shopify, ouvrez votre menu principal, cliquez sur Ajouter un élément de menu pour créer un lien enfant, puis faites-le glisser via son icône de poignée (⠿) sous et légèrement à droite du parent. Cliquez sur Enregistrer le menu.

Combien de niveaux un menu Shopify peut-il comporter ?

Un élément de niveau supérieur peut comporter jusqu’à deux niveaux de menus déroulants imbriqués en dessous, autorisant trois niveaux au total. Votre thème doit être mis à jour pour afficher ces trois niveaux sur votre boutique.

Comment rendre un élément de menu parent non cliquable ?

Saisissez # dans le champ « Rechercher ou coller un lien » de l’élément parent et donnez-lui un libellé évocateur tel que « Acheter par catégorie ». La plupart des thèmes le traiteront alors comme un bouton de bascule plutôt que comme un lien de page.

Pourquoi mon sous-menu ne s’affiche-t-il pas sur ma boutique ?

La cause la plus fréquente est que la section Header de votre thème est associée à un autre menu que celui que vous avez modifié. L’élément peut également ne pas avoir été suffisamment indenté, ou votre thème ne prend pas en charge ce niveau d’arborescence.

Les sous-menus fonctionnent-ils sur mobile ?

Oui. Sur smartphone, la plupart des thèmes affichent le menu derrière une icône hamburger et y ouvrent les sous-éléments. Testez systématiquement le rendu sur un smartphone réel et prévoyez un lien « Tout afficher » à chaque niveau pour faciliter l’accès aux collections mères.

Sources

• Shopify Help Center: Drop-down menus — Instructions officielles pour créer des menus déroulants et vérifications mobiles.
• Shopify Help Center: Editing menus — Règles d’utilisation des poignées de déplacement, limites de modification et suppression de parents.
• Shopify Partners Blog: Building Nested Navigations with Shopify Link List — Vue d’ensemble des listes de liens et des arborescences imbriquées.
• Shopify Community: Nesting menu not showing — Résolution marchande concernant l’affectation du menu dans la section Header du thème.
• W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — Normes d’accessibilité pour les repères visuels et le comportement de la touche Tab.
• Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — Données d’audit montrant que seulement 24 % des sites gèrent bien l’option « Tout afficher » sur mobile.
• Nielsen Norman Group: Dropdowns: Design Guidelines — Études ergonomiques sur les contraintes des menus déroulants trop longs avec défilement.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Fiche de l’application pour méga-menus et menus mobiles.
• YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — Tutoriel vidéo officiel pour créer des menus déroulants.
• YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — Tutoriel vidéo sur la restructuration des menus et la hiérarchie visuelle.