Configurer les liens de menu dans votre boutique Shopify (Guide étape par étape)

Configurer les liens de menu dans Shopify ne prend que quelques clics dans Content > Menus, mais le menu n’est réellement “terminé” que lorsque le thème affiche le bon menu et qu’il fonctionne parfaitement sur smartphone — ce guide traite de ces deux aspects.

Lorsque vous lancez votre boutique en ligne, relier vos produits, vos collections et vos pages d’information à votre barre de navigation figure parmi vos premières priorités. Une navigation claire aide vos visiteurs à se repérer dans votre boutique. Dans les boutiques Shopify actuelles, la gestion des liens s’effectue dans l’interface administrateur centrale, tandis que votre thème actif détermine la manière dont ces éléments s’affichent sur ordinateur et sur mobile.

Réponse rapide : comment configurer les liens de menu sur Shopify

Pour configurer les liens de menu sur Shopify, rendez-vous dans Content > Menus dans votre interface administrateur Shopify, ouvrez le menu souhaité (généralement le menu principal), cliquez sur Add menu item, indiquez un nom, choisissez un lien, puis cliquez sur Save menu. Glissez des éléments sous un autre élément pour créer un menu déroulant.

Suivez ces six étapes simples pour ajouter n’importe quel lien :

1. Dans votre interface administrateur Shopify, accédez à Content > Menus.
2. Cliquez sur le titre du menu à modifier (le plus souvent Main menu).
3. Cliquez sur Add menu item.
4. Dans le champ Name, saisissez le libellé visible pour les clients, puis choisissez ou collez la destination dans Link.
5. Cliquez sur Add.
6. Cliquez sur Save menu pour publier vos modifications.

Glissez un élément sous un autre pour créer un menu déroulant dès que vous avez besoin de regrouper des sous-catégories sous une rubrique principale.

Comprendre les menus et liens dans Shopify (en-tête, pied de page, thème)

Pour maîtriser la navigation dans Shopify, il est essentiel de distinguer la liste de liens en arrière-plan de l’affichage fourni par le thème. Un menu est une liste structurée de liens créée dans votre tableau de bord. Un lien est un élément individuel cliquable qui redirige les acheteurs vers une collection, un produit, une page de contenu ou un site externe.

Chaque boutique Shopify est initialisée avec deux menus par défaut qui s’affichent sur toutes les pages : le menu principal (main menu) et le menu de pied de page (footer menu). Le menu principal s’étend généralement le long de l’en-tête sur ordinateur ou prend la forme d’un menu latéral. Le menu de pied de page rassemble les conditions générales, les politiques de retour et les coordonnées de contact.

Votre thème détermine l’emplacement et le style de ces menus. Chaque thème possède une conception différente, de sorte que vos menus peuvent s’afficher différemment d’un thème à l’autre. Par exemple, un thème présentera les liens horizontalement, tandis qu’un autre les regroupera dans un panneau latéral escamotable.

Dans la mesure où le thème contrôle la présentation, vous devez vérifier les paramètres de votre thème dans les sections En-tête et Pied de page afin de confirmer que le menu sélectionné correspond bien à celui que vous modifiez. Si vous modifiez un menu dans l’administrateur sans constater de changement sur votre site, votre thème est très probablement configuré avec une autre liste. Pour approfondir ces structures, consultez notre guide complet des menus Shopify.

Ajouter un lien de menu pas à pas dans Content > Menus

Shopify centralise la gestion de la navigation dans un écran dédié. Notez que les anciens tutoriels mentionnent l’emplacement “Boutique en ligne > Navigation”. Dans les versions récentes de Shopify, ces réglages se trouvent désormais sous Content > Menus.

Créer un nouveau menu

Bien que votre boutique dispose déjà de menus par défaut, vous pourriez avoir besoin d’une liste séparée pour une colonne secondaire de pied de page ou une liste latérale.

Pour créer une nouvelle liste, accédez à Content > Menus et cliquez sur l’option permettant de créer un menu. Donnez-lui un nom explicite comme “Liens secondaires pied de page” ou “Aide rapide”. Une fois la liste créée, vous pourrez y ajouter des liens et la sélectionner dans votre éditeur de thème.

Ajouter un élément de menu (Add menu item)

L’ajout d’un lien prend moins d’une minute :

1. Accédez à Content > Menus dans votre interface administrateur Shopify.
2. Cliquez sur le titre du menu que vous souhaitez modifier (par exemple Main menu).
3. Faites défiler la page et cliquez sur Add menu item.
4. Dans le champ Name, écrivez le texte que verront vos clients. Ce nom s’affiche dans le menu et peut contenir des caractères spéciaux ou des émojis pour mettre en avant une promotion ou une nouvelle collection.
5. Dans le champ Link, sélectionnez une collection, un produit, une page ou un article de blog, ou collez une URL externe.
6. Cliquez sur Add pour insérer le lien dans votre liste.

Enregistrer le menu et réorganiser l’ordre (Save menu)

Après avoir ajouté vos liens, vérifiez leur disposition :

1. Repérez l’icône de poignée (⠿) située à côté de l’élément de menu.
2. Cliquez et maintenez l’icône de poignée (⠿) à côté de l’élément de menu, puis faites glisser l’élément vers une autre position vers le haut ou vers le bas.
3. Relâchez le curseur dès que l’élément est au bon endroit.
4. Cliquez sur Save menu.

Pensez à toujours cliquer sur Save menu avant de quitter la page afin de sauvegarder toutes vos modifications.

Choisir le bon type de lien : collection, produit, page, blog, URL externe

Le système de navigation de Shopify offre une grande flexibilité. Vous pouvez ajouter des menus à votre boutique en ligne pour afficher et organiser des liens vers des produits, des collections, des pages web, des articles de blog et bien plus encore. Choisir la destination adéquate évite des clics superflus à vos clients.

Veillez toujours à créer votre collection, page ou article de blog dans Shopify avant d’essayer de l’intégrer au menu. Si la ressource n’existe pas encore, vous devrez quitter le gestionnaire de menus, la configurer et recommencer.

Si vous souhaitez un en-tête de premier niveau qui ouvre seulement un menu déroulant sans mener à une page, utilisez, comme le suggère l’aide de Shopify sur les menus déroulants, un libellé descriptif tel que “Acheter par catégorie” pour les éléments de premier niveau associés à des liens #. Testez l’élément dans votre thème pour vérifier qu’il ouvre le menu déroulant sans charger de page.

Créer un menu déroulant en imbriquant des éléments

À mesure que votre catalogue s’étoffe, présenter chaque collection sur la barre principale surcharge votre interface. Vous pouvez créer un menu déroulant en imbriquant des éléments secondaires sous un titre parent.

Illustration conceptuelle (Concept illustration) : une liste de menu plate comparée à un menu déroulant imbriqué.

Pour imbriquer un élément, ajoutez d’abord le titre parent et l’élément enfant dans le menu. Cliquez et maintenez l’icône de poignée (⠿) située à côté de l’élément enfant, glissez-le juste sous le parent, puis faites-le glisser vers la droite (Drag to nest) jusqu’à ce que la ligne s’indente. Relâchez le curseur. La ligne décalée devient alors un Nested item subordonné à votre Top-level item.

Dans votre éditeur, vous pouvez comparer une Flat menu list où tous les éléments sont alignés sur le bord gauche avec un Nested drop-down menu où les sous-liens apparaissent en retrait sous leur en-tête parent.

Quelle est la profondeur d’imbrication maximale ?

Shopify applique une règle hiérarchique précise : l’élément de niveau supérieur peut comporter jusqu’à deux niveaux de menus déroulants imbriqués. Cela vous donne un total de trois paliers :

• Élément de premier niveau (Top-level item, ex. : “Vêtements”)
  • Premier niveau imbriqué (Nested item niveau 1, ex. : “Femme”)
    • Second niveau imbriqué (Nested item niveau 2, ex. : “Robes”)

Bien que l’administrateur Shopify prenne en charge deux niveaux imbriqués, leur affichage dépend de la conception de votre thème. Chaque thème a un design différent, de sorte que vos menus peuvent s’afficher différemment selon le thème, et certains thèmes peuvent ne pas montrer tous les niveaux. Testez votre menu sur votre propre thème. Pour découvrir les structures arborescentes approfondies, lisez notre guide sur le fonctionnement des menus à plusieurs niveaux.

Menus déroulants dans le pied de page

De nombreux e-commerçants se demandent s’il est possible de créer des menus déroulants dans le pied de page. La documentation de Shopify précise que les menus de pied de page ne peuvent afficher que des éléments de premier niveau dans les configurations standard.

La page d’aide de Shopify sur les menus déroulants n’est pas tout à fait cohérente au sujet du pied de page : ne comptez donc pas sur les menus déroulants du footer. Prévoyez uniquement des liens de premier niveau, puis vérifiez les réglages de votre thème et testez votre boutique pour voir comment il gère la navigation du pied de page.

Le tutoriel vidéo officiel de Shopify ci-dessous illustre la technique de glisser-déposer pour créer des menus déroulants imbriqués :

Organiser et nommer les éléments pour faciliter la navigation

Structurer votre navigation, c’est aider les visiteurs à trouver ce qu’ils cherchent. Des libellés explicites et un ordre cohérent rendent le menu plus facile à parcourir.

Shopify recommande d’ajouter sept éléments de menu de premier niveau ou moins pour éviter l’encombrement. Un premier niveau plus court est aussi plus facile à parcourir pour les visiteurs.

Concernant les libellés, suivez les règles d’ergonomie éprouvées. Les recommandations du Nielsen Norman Group rappellent que les menus ne sont pas l’endroit approprié pour inventer des mots, employer du jargon interne ou proposer des catégorisations trop abstraites. Privilégiez des termes clairs et universels comme “Boutique”, “Hommes”, “Femmes”, “Promotions” ou “Contact” plutôt que des intitulés nébuleux comme “L’Atelier” ou “Notre Monde”. Si les visiteurs ne devinent pas ce que contient un lien, ils sont moins susceptibles de cliquer.

Placez vos collections les plus vendeuses en tête de liste. Choisissez des intitulés courts pour qu’ils tiennent aisément sur l’écran étroit d’un smartphone sans provoquer de retours à la ligne inattendus.

Vérifier votre menu sur mobile et résoudre les problèmes courants

Valider votre navigation uniquement sur ordinateur est insuffisant. Shopify recommande de vérifier que le menu s’affiche correctement sur ordinateur comme sur les appareils mobiles avant de publier votre boutique.

Ouvrez votre boutique sur un smartphone réel. Testez votre menu sur mobile en touchant l’icône hamburger, en ouvrant chaque dossier imbriqué et en vérifiant que chaque cible tactile est facile à sélectionner avec le pouce.

Les études du Nielsen Norman Group rappellent qu’une navigation masquée est moins facile à découvrir qu’une navigation visible ou partiellement visible. Sur smartphone, les thèmes regroupent les liens dans un Theme mobile drawer placé derrière une icône de menu hamburger. Ces liens étant dissimulés jusqu’à ce qu’on clique dessus, les clients doivent faire un effort délibéré pour explorer vos rubriques. Si ce tiroir est désorganisé, vos produits clés passeront inaperçus. De plus, certains thèmes peuvent nécessiter des ajustements CSS pour améliorer la convivialité mobile, surtout si les espacements tactiles sont trop étroits.

Si votre menu ne réagit pas comme prévu, reportez-vous à ce tableau de dépannage :

Pourquoi mes modifications de menu n’apparaissent-elles pas ?

C’est la déconvenue la plus fréquente chez les nouveaux marchands Shopify. Vous ajoutez soigneusement plusieurs collections dans Content > Menus, cliquez sur Save menu, actualisez votre boutique et constatez que l’ancien menu est toujours en place.

Cette situation provient du fait que Shopify sépare les listes de menus des paramètres d’affichage du thème. Votre boutique peut avoir plus d’un menu, mais votre thème n’affiche que celui sélectionné dans l’éditeur de thème. Ouvrez l’éditeur de thème, allez dans la section Header et vérifiez quel menu elle utilise. S’il pointe vers une ancienne liste, choisissez votre menu mis à jour et enregistrez.

Sous-liens manquants ou non déroulants

Si vous avez imbriqué des éléments mais qu’ils ne se déroulent pas sur votre boutique, examinez l’indentation. Dans Content > Menus, un élément imbriqué doit être clairement décalé vers la droite sous la ligne parente. S’il est aligné sur la même colonne que le parent, Shopify le considère comme un lien principal autonome. Si l’indentation est correcte mais que le menu ne se déploie toujours pas, votre thème ne supporte peut-être que les menus à un niveau.

Un élément de menu a disparu

Shopify garde vos liens cohérents : supprimer la ressource liée supprime également l’élément de menu. Si vous supprimez une collection saisonnière ou une page brouillon dans votre tableau de bord, l’élément de menu qui y pointait est lui aussi retiré. Si un élément a disparu, inspectez votre liste de collections ou de pages pour vérifier si la ressource a été supprimée.

Si vous constatez que le tiroir mobile masque trop vos collections prioritaires, vous pouvez envisager l’ajout d’une barre d’onglets inférieure sur mobile pour conserver vos rubriques clés toujours visibles.

Compromis : quand le menu Shopify par défaut est suffisant

Toutes les boutiques Shopify n’ont pas besoin d’applications de navigation tierces ou de code sur mesure. Pour un grand nombre de marchands, les outils natifs de Shopify suffisent.

Le menu standard de Shopify convient parfaitement lorsque :

• Votre boutique propose un catalogue resserré avec quelques collections bien définies.
• Votre barre principale compte sept éléments de premier niveau ou moins.
• Votre thème intègre un tiroir mobile fluide et bien lisible par défaut.
• Vous n’avez pas besoin d’insérer des bannières promotionnelles, des photos de produits ou des colonnes multiples dans vos déroulants.

Les menus par défaut ne nécessitent aucune application supplémentaire.

Cependant, les menus par défaut imposent des limites concrètes :

• Limites d’imbrication : L’élément de premier niveau peut accueillir au maximum deux niveaux de menus déroulants imbriqués, soit trois niveaux au total.
• Dépendance envers le thème : Chaque thème a un design différent, de sorte que vos menus peuvent s’afficher différemment d’un thème à l’autre, vous rendant dépendant du code du développeur pour la mise en page et les espacements tactiles.
• Navigation mobile masquée : Les thèmes par défaut masquent l’intégralité des rubriques derrière un bouton hamburger. Une navigation masquée étant moins repérable qu’une navigation visible, les utilisateurs mobiles doivent faire une action supplémentaire pour explorer votre catalogue.

Pour comprendre à quel moment un catalogue dépasse les capacités des thèmes ordinaires, lisez notre analyse sur les limites des menus de thèmes.

Aller plus loin : Mobile Menu, Mega Menu, Tab Bar avec Navi+

Quand votre catalogue s’élargit ou que votre audience mobile recherche une exploration plus rapide, une simple liste textuelle dans un tiroir classique peut restreindre vos conversions. C’est ici que des agencements spécialisés apportent une réelle valeur ajoutée.

Illustration conceptuelle (Concept illustration) : un tiroir mobile de thème par défaut comparé à un menu mobile avec barre d’onglets inférieure.

Grâce à Navi+ Tab Bar & Mega Menu, vous pouvez créer par glisser-déposer des barres d’onglets inférieures fixes, des méga menus, des tiroirs de navigation mobile, des menus à icônes et des boutons d’action flottants, sans modifier le code de votre thème.

Pour les marchands désireux d’améliorer l’expérience mobile tout en conservant leurs habitudes dans l’administrateur, Navi+ peut réutiliser vos menus Shopify existants. La fonction Mobile Menu peut intégrer un menu Shopify existant et actualiser sa copie en un clic grâce au bouton “Sync now”. Vous pouvez ainsi continuer à gérer vos liens dans Content > Menus dans l’administrateur Shopify, puis simplement cliquer sur “Sync now” dans Navi+ chaque fois que vous souhaitez répercuter les dernières modifications sur votre tiroir mobile. La synchronisation est manuelle : Navi+ ne se met pas à jour tout seul et ne modifie pas les menus de Content > Menus.

Les menus Navi+ prennent eux aussi en charge jusqu’à trois niveaux d’imbrication, soit la même profondeur que le menu Shopify : l’intérêt tient donc à l’apparence et à l’emplacement du menu (tiroir, barre d’onglets, panneau méga), pas à une profondeur supplémentaire. Pour identifier le format le plus adapté à votre offre, consultez notre guide pour choisir le bon type de menu pour votre boutique.

Que vous ayez besoin d’une Tab Bar pour rendre vos meilleures ventes immédiatement accessibles au pouce, d’un Mega Menu complet sur ordinateur ou d’un Mobile Menu repensé, plusieurs solutions s’offrent à vous. Si le menu de votre thème couvre vos besoins actuels, conservez-le. Si vous souhaitez un tiroir mobile plus riche, une barre d’onglets inférieure ou un méga menu sans toucher au code de votre thème, vous pouvez essayer Navi+ Tab Bar & Mega Menu sur l’App Store de Shopify.

Check-list d’action avant publication

Avant de lancer votre boutique ou de diffuser des campagnes publicitaires, parcourez cette liste de vérification :

• Tester chaque destination : Cliquez sur chaque lien pour vérifier qu’il mène vers une collection, un produit ou une page active et publiée.
• Respecter la limite de 7 éléments : Conservez sept éléments de menu de premier niveau ou moins pour préserver la clarté de votre en-tête.
• Choisir des termes évidents : Remplacez le jargon interne par des mots courants et immédiatement compréhensibles pour vos acheteurs.
• Contrôler l’attribution du thème : Vérifiez les paramètres de thème dans les sections En-tête et Pied de page pour vous assurer que le menu sélectionné est bien celui édité dans Content > Menus.
• Effectuer un test sur smartphone réel : Assurez-vous que le menu s’affiche convenablement sur ordinateur et mobile en naviguant sur un véritable smartphone.
• Mettre en place des redirections d’URL : Si vous avez renommé l’adresse d’une page ou d’une collection, n’oubliez pas que les redirections d’URL permettent de réacheminer le trafic d’une page web vers une autre afin d’éviter les erreurs 404.
• Sauvegarder les modifications : Vérifiez que vous avez bien cliqué sur Save menu dans Content > Menus avant de fermer votre navigateur.

FAQ

Où se trouvent les menus dans l’interface administrateur de Shopify ?

Vous pouvez ajouter, supprimer, modifier et afficher vos liens et vos menus depuis Content > Menus dans votre interface Shopify. Les anciens guides indiquent Boutique en ligne > Navigation, mais les boutiques actuelles rassemblent ces paramètres sous Content.

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

L’élément de niveau supérieur peut comporter jusqu’à deux niveaux de menus déroulants imbriqués en dessous. Cela permet d’obtenir un total de trois paliers, bien que leur rendu dépende de la conception de votre thème.

Pourquoi les modifications de mon menu ne s’affichent-elles pas sur ma boutique ?

Votre thème utilise peut-être une autre liste de menu dans ses sections En-tête ou Pied de page. Vérifiez les paramètres de votre thème dans ces sections pour vous assurer que le menu sélectionné correspond bien à celui que vous avez modifié.

Combien d’éléments de premier niveau un menu devrait-il contenir ?

Shopify recommande d’inclure sept éléments de premier niveau ou moins pour éviter de surcharger votre barre de navigation.

Peut-on intégrer des menus déroulants dans le pied de page ?

Shopify précise que les menus de pied de page ne peuvent afficher que les éléments de premier niveau dans les configurations standard. Vérifiez les réglages de votre thème pour voir comment il traite les liens de pied de page.

Pourquoi un élément de menu a-t-il disparu ?

La suppression de la ressource liée entraîne également la suppression de l’élément de menu correspondant. Si vous supprimez un produit, une collection ou une page dans Shopify, le lien associé dans le menu est automatiquement effacé.

Sources

• Shopify Help Center: Menus and links — Gestion des menus et liens dans Content > Menus sur Shopify.
• Shopify Help Center: Editing menus — Ajout d’éléments de menu, réorganisation par poignée et prise en charge des émojis.
• Shopify Help Center: Understanding navigation — Menus par défaut et attribution des menus dans les paramètres de thème.
• Shopify Help Center: Drop-down menus — Limites d’imbrication, comportement en pied de page, règles de suppression et tests mobiles.
• Shopify Help Center: URL redirects — Utilisation des redirections d’URL lors de la modification des liens.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation — Recherche sur la découvrabilité des navigations masquées sur mobile.
• Nielsen Norman Group: Menu Design — Principes pour des libellés de catégories clairs sans jargon interne.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Application pour créer des barres d’onglets, méga menus et tiroirs mobiles.
• Navi+ Blog: Shopify Menu Guide — Architecture de navigation et documentation de synchronisation pour Mobile Menu.