À retenir
- Allez dans Boutique en ligne > Navigation > modifiez 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.
- Les menus Shopify ont jusqu’à trois niveaux de profondeur (parent, enfant, petit-enfant) ; la plupart des thèmes actuels affichent les trois.
- Pour les menus déroulants à plusieurs colonnes avec des images et du contenu mis en avant, il vous faut un méga menu.
Pour créer un menu déroulant sur Shopify, allez dans Boutique en ligne > Navigation, ouvrez votre menu principal, ajoutez les éléments, puis faites glisser chaque élément enfant vers la droite sous son parent et enregistrez.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques Shopify. Nous développons aussi Fudge, l’opérateur IA pour les boutiques Shopify, noté 4.9 sur le Shopify App Store. Les menus sur mesure font partie des modifications que son éditeur de boutique peut apporter à un thème.
Comment créer un menu déroulant sur Shopify
Étape 1. Allez dans Boutique en ligne > Navigation.
Étape 2. Cliquez sur le menu que vous souhaitez modifier (généralement Menu principal).
Étape 3. Si l’élément parent (l’étiquette de niveau supérieur du menu déroulant) n’existe pas encore, cliquez sur Ajouter un élément de menu, donnez-lui un nom (par ex. “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. Imbriquez maintenant les éléments enfants sous le parent. Survolez un élément enfant pour faire apparaître la poignée de déplacement à gauche. Faites glisser l’élément vers la droite et légèrement en dessous de l’élément parent. Vous verrez un retrait lorsqu’il sera imbriqué.
Étape 6. Répétez l’opération pour chaque élément que vous souhaitez dans le menu déroulant.
Étape 7. Cliquez sur Enregistrer le menu.
Lorsque les clients survolent ou cliquent sur l’élément parent dans votre boutique, les éléments imbriqués s’affichent sous forme de liste déroulante.
Pour savoir comment le menu déroulant s’affiche sur mobile, consultez comment modifier le menu mobile 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, saisissez la poignée de déplacement et faites-le glisser vers la droite jusqu’à ce qu’il soit en retrait sous l’élément parent cible. Enregistrez.
Quelle est la profondeur d’imbrication possible sur Shopify ?
Les menus Shopify ont trois niveaux de profondeur : parent > enfant > petit-enfant.
Dawn et la plupart des thèmes actuels affichent le troisième niveau sous forme de liste imbriquée dans le menu déroulant ; certains thèmes plus anciens n’en affichent que deux.
Avant de construire une structure de navigation à trois niveaux, vérifiez-la dans l’aperçu de votre thème. Si les liens “petits-enfants” ne s’affichent pas, aplatissez votre structure pour n’avoir qu’un seul niveau de menu déroulant.
Menu déroulant vs méga menu
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 personnalisées. C’est tout à fait différent. Certains thèmes, dont Dawn, ont un réglage basique de méga menu dans la section Header (En-tête), mais les images et les produits mis en avant nécessitent un thème premium, une application ou du code sur mesure.
Si vous avez plus de 10 collections, que vous voulez des images dans votre menu déroulant, ou que vous souhaitez intégrer une section promotionnelle dans la navigation, il vous faut un méga menu. Consultez notre guide sur comment créer un méga menu sur Shopify.
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 sous lui, les clients verront l’étiquette parente dans la navigation. Deux options s’offrent à vous pour le lien du parent :
Option 1 - Donner une destination au parent. Par exemple, un parent “Femmes” qui renvoie vers /collections/women. Les clients qui cliquent directement sur “Femmes” atterrissent sur 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 : cliquer dessus 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 valides. L’option 1 est généralement meilleure pour le SEO et l’expérience utilisateur, car chaque étiquette est cliquable.
Comportement des menus déroulants sur mobile
Sur mobile, les menus déroulants se transforment généralement en un accordéon extensible dans le tiroir du menu mobile. Toucher l’élément parent développe le menu déroulant directement dans la liste, plutôt que d’afficher un menu superposé au survol.
Le comportement exact sur mobile dépend de votre thème. Il est conseillé de tester la navigation mobile après avoir configuré vos menus déroulants pour vous assurer qu’elle s’affiche bien sur les petits écrans.
FAQ
Combien d'éléments un menu déroulant Shopify doit-il comporter ?
3 à 8 par parent est l'idéal en pratique. En dessous de 3, le menu déroulant ajoute de la friction inutilement (mettez simplement les éléments dans la navigation principale). Au-delà de 8, la liste est difficile à lire et les acheteurs ratent les éléments sous la ligne de flottaison. Si vous en avez plus de 10, utilisez plutôt un méga menu : les mises en page en plusieurs colonnes gèrent mieux visuellement les listes plus longues.
Pourquoi mon menu déroulant Shopify n'apparaît-il pas au survol ?
Trois causes fréquentes : (1) les éléments ne sont pas vraiment imbriqués (ils ont l'air en retrait mais ne le sont pas — tirez la poignée plus à droite jusqu'à voir une indentation claire), (2) le parent n'a aucun enfant visible en raison d'un bug du thème, ou (3) le thème utilise le clic obligatoire sur les ordinateurs tactiles. Inspectez le code HTML généré : l'élément enfant <ul> devrait apparaître sous l'élément parent <li>.
Puis-je ajouter des icônes ou des images à côté des éléments du menu déroulant Shopify ?
Pas via l'éditeur de navigation natif : la navigation Shopify ne gère que le texte simple et les URL. La solution la plus propre : décrivez ce que vous voulez à Fudge ("afficher une icône Lucide à côté de chaque élément du menu déroulant, associée via le handle") et il modifiera le Liquid du header pour générer un SVG par élément. Alternatives : une application de méga menu ou un thème premium prenant en charge les méta-champs de navigation.
Les éléments parents du menu déroulant doivent-ils pointer vers une page ou n'être qu'une simple étiquette ?
Lier le parent est généralement préférable pour le SEO et l'expérience utilisateur. Un parent "Femmes" qui mène à /collections/women donne une destination pertinente au clic sur l'étiquette, aide Google à comprendre la hiérarchie du site et sert les acheteurs qui cherchent la grande catégorie plutôt qu'une sous-collection. Les parents qui ne sont que des étiquettes sont utiles quand il n'y a pas de destination canonique.
Les menus déroulants Shopify affectent-ils le SEO ?
Oui, légèrement. Les menus déroulants envoient un signal de maillage interne : les pages liées depuis la navigation principale sont explorées et ont plus de poids pour Google. Inclure des collections clés dans les menus déroulants les met en avant sur chaque page, ce qui renforce le jus de lien interne. Évitez de surcharger vos menus : avoir plus de 30 liens dans la navigation peut diluer ce signal.
