Points clés

Allez dans Boutique en ligne > Navigation > modifier le menu > faites glisser un élément de menu vers la droite sous un élément parent pour l’imbriquer.

L’élément parent devient l’étiquette du menu déroulant ; les éléments enfants apparaissent au survol ou au clic du client.

La plupart des thèmes Shopify prennent en charge 1 à 2 niveaux d’imbrication.

Pour les menus déroulants à plusieurs colonnes avec des images et du contenu mis en avant, il vous faut un méga menu.

Un menu déroulant regroupe des éléments de navigation liés sous une étiquette parente. Il permet de garder la navigation principale épurée tout en rendant de nombreuses pages accessibles. Voici comment le créer.

Pourquoi vous pouvez nous faire confiance

Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous avons également créé Fudge - un éditeur de boutique IA avec une note de 5.0 sur l’App Store de Shopify.

Étape 1. Allez dans Boutique en ligne > Navigation.

Étape 2. Cliquez sur le menu que vous souhaitez modifier (en général le Menu principal).

Étape 3. Si l’élément parent (l’étiquette du menu déroulant de haut niveau) n’existe pas encore, cliquez sur Ajouter un élément de menu, donnez-lui un nom (par exemple, “Boutique” ou “Collections”) et définissez son lien. S’il doit s’agir uniquement d’une étiquette sans destination, laissez le lien vide.

Étape 4. Ajoutez les éléments que vous voulez dans le menu déroulant de la même manière : cliquez sur Ajouter un élément de menu pour chacun d’eux et définissez leurs noms et liens.

Étape 5. Maintenant, imbriquez les éléments enfants sous le parent. Survolez un élément enfant pour faire apparaître la poignée (icône avec les six points) sur la gauche. Faites glisser l’élément vers la droite et légèrement en dessous de l’élément parent. Vous verrez qu’il s’indente lorsqu’il est imbriqué.

Étape 6. Répétez l’opération pour chaque élément que vous souhaitez intégrer au menu déroulant.

Étape 7. Cliquez sur Enregistrer le menu.

Lorsque les clients survolent ou cliquent sur l’élément parent de votre boutique, les éléments imbriqués apparaissent sous forme de menu déroulant.

En relation : Modifier le menu mobile sur Shopify.

En relation : Modifier le comportement du menu mobile sur Shopify.

En relation : Créer une page de collection sur Shopify.

Comment imbriquer des éléments sous un parent existant

Si vous avez déjà un élément de premier niveau et que vous souhaitez déplacer des éléments existants en dessous :

Survolez l’élément que vous souhaitez imbriquer, attrapez la poignée et faites-le glisser vers la droite jusqu’à ce qu’il s’indente sous l’élément parent cible. Enregistrez.

Jusqu’à quel niveau peut-on imbriquer sur Shopify ?

Techniquement, le système de navigation de Shopify prend en charge deux niveaux d’imbrication : parent > enfant > petit-enfant.

Cependant, la plupart des thèmes n’affichent visuellement qu’un seul niveau de menu déroulant. Un élément “petit-enfant” peut apparaître dans les données du menu mais ne s’affichera pas dans la navigation de la plupart des thèmes.

Avant de construire une structure de navigation à trois niveaux, testez la façon dont votre thème la gère. Si elle ne s’affiche pas correctement, la solution pratique consiste à aplatir votre structure à un seul niveau de menu déroulant.

Un menu déroulant standard affiche une simple liste verticale de liens. Cela fonctionne bien pour 3 à 8 éléments par parent.

Un méga menu affiche un large panneau avec plusieurs colonnes, des images, des produits mis en avant et des mises en page sur mesure. C’est tout autre chose : la plupart des thèmes Shopify ne prennent pas en charge les méga menus nativement via l’éditeur de navigation.

Si vous avez plus de 10 collections, que vous voulez des images dans votre menu déroulant, ou si vous voulez intégrer une section promotionnelle dans la navigation, il vous faut un méga menu. Consultez notre guide pour savoir comment créer un méga menu sur Shopify.

Besoin d'un méga menu ou d'un design de menu déroulant sur mesure ? Décrivez-le à Fudge.

Try Fudge for Free

Le lien de l’élément parent lors de la création de menus déroulants

Lorsqu’un élément de navigation a des enfants imbriqués en dessous, les clients verront l’étiquette parente dans la navigation. Vous avez deux options pour le lien du parent :

Option 1 - Donner une destination au parent. Par exemple, un parent “Femme” qui renvoie vers /collections/femme. Les clients qui cliquent directement sur “Femme” vont vers cette collection. Le menu déroulant affiche les sous-collections.

Option 2 - Laisser le lien parent vide. L’étiquette parente n’a pas de destination : en cliquant dessus, cela ouvre simplement le menu déroulant. Utilisez cette option lorsque le parent est une étiquette de catégorie et qu’il n’y a pas de page unique pertinente vers laquelle pointer.

Les deux approches sont valables. L’option 1 est généralement meilleure pour le référencement naturel (SEO) et l’expérience utilisateur, car chaque étiquette permet de naviguer.

Sur mobile, les menus déroulants se transforment généralement en accordéon dans le tiroir du menu mobile. Toucher l’élément parent ouvre le menu déroulant directement en dessous, plutôt que d’afficher une superposition au survol.

L’affichage exact sur mobile dépend de votre thème. Cela vaut le coup de tester la navigation mobile après avoir configuré vos menus déroulants pour vous assurer que le rendu est bon sur les petits écrans.