Aller au contenu

Shopify - Comment créer un menu / une navigation ?

Découvrez notre tutoriel

Shopify - Comment créer un menu / une navigation ?

Création d'un nouveau menu dans le backend Shopify

La navigation est l'une des toutes premières mécaniques que vos visiteurs manipulent et l'un des derniers leviers que beaucoup de marchands prennent le temps d'optimiser. Sur Shopify, la création et la mise à jour d'un menu reste pourtant accessible sans aucune intervention technique, à condition de connaître quelques pièges et les limites natives de la plateforme. Ce tutoriel couvre l'ensemble du parcours : ouverture du backoffice, ajout d'éléments, hiérarchie, intégration des collections, des pages et des articles, ainsi que les arbitrages UX et SEO que nous appliquons sur les boutiques que nous accompagnons chez rou9e. Comptez vingt minutes pour configurer un menu propre la première fois, puis dix minutes par mise à jour ensuite.

Pour démarrer, connectez-vous à l'administration de votre boutique avec un compte disposant des droits sur la section "Online store". Dans la barre latérale gauche, dépliez l'entrée "Boutique en ligne" (ou "Online Store" si votre admin reste configuré en anglais) puis cliquez sur "Navigation". Vous arrivez sur la liste des menus existants. Par défaut, Shopify en crée deux dès l'installation : le menu principal (Main menu) affiché en en-tête, et le menu de pied de page (Footer menu). Pour en créer un troisième, cliquez sur le bouton "Ajouter un menu" situé en haut à droite de l'écran.


Avant d'aller plus loin, prenez deux minutes pour clarifier l'usage de chacun de vos menus. Le menu principal porte la promesse commerciale et oriente vers les collections phares de la boutique. Le menu de pied de page accueille plutôt les liens institutionnels : mentions légales, politique de retour, conditions générales de vente, formulaire de contact, informations de retrait en magasin. Un troisième menu peut servir à alimenter un bandeau d'annonce, un mega-menu thématique, ou une navigation secondaire intégrée dans une page de collection via les sections personnalisables du thème. Cette distinction évite de surcharger l'en-tête et garde une logique claire pour vos visiteurs comme pour vos équipes internes.

Une fois sur l'écran de création, nommez votre menu de manière explicite. Le titre saisi dans ce champ n'apparaît jamais sur la boutique côté visiteur : il sert uniquement à vous repérer dans le backoffice. Préférez donc "Footer SAV 2026" ou "Mega-menu Femme" plutôt qu'un simple "Menu 2". Sur les comptes que nous gérons à plusieurs mains chez rou9e, cette discipline de nommage évite les confusions au moment d'assigner un menu à un emplacement de thème, particulièrement lorsque plusieurs prestataires interviennent en parallèle sur la même boutique.


Vient ensuite l'ajout des éléments, un à un, via le bouton "Ajouter un élément de menu". Notre conseil opérationnel le plus important : commencez toujours par renseigner le champ "Lien" avant le champ "Nom". En tapant les premiers caractères dans le champ Lien, Shopify déroule une liste de suggestions issues directement de votre catalogue : collections automatiques et manuelles, fiches produits actives, pages CMS publiées, articles de blog. Cliquez sur la suggestion pertinente et le champ Nom se pré-remplit automatiquement avec le titre exact de la ressource. Vous garantissez ainsi un lien stable, et vous évitez les fautes de frappe dans une URL collée à la main qui finiraient en 404 silencieuse.

Les types de liens disponibles couvrent toute la plateforme. Vous pouvez pointer vers une collection que vous avez préalablement créée, vers une fiche produit, vers une page CMS construite dans la section Pages, vers un article de blog ou vers une URL externe (sous-domaine, landing page Klaviyo, formulaire Tally, page partenaire). Le champ accepte également les liens d'ancrage interne (#contact, #faq) pour les pages longues, ainsi que les liens "mailto:" et "tel:" particulièrement utiles dans le pied de page. Shopify n'expose pas de panneau dédié aux paramètres UTM : si vous tracez vos clics avec Google Analytics, ajoutez les paramètres directement dans le champ Lien sous la forme "/collections/soldes?utm_source=header".

La hiérarchie se construit ensuite par simple glisser-déposer. Une fois un élément ajouté, déplacez-le vers la droite sous son parent pour créer un sous-niveau. Shopify autorise jusqu'à trois niveaux d'imbrication : un parent, un enfant et un petit-enfant. Au-delà, l'interface bloque le glisser-déposer sans message d'erreur explicite, ce qui surprend souvent les nouveaux marchands. Cette limite n'est pas un défaut : sur les projets que nous accompagnons, nous constatons que la majorité des thèmes Shopify natifs (Dawn, Sense, Refresh, Craft, Studio) n'affichent proprement que deux niveaux dans le menu déroulant. Le troisième niveau, lui, n'est exploité que via un mega-menu personnalisé ou une application tierce dédiée à la navigation.

Le mega-menu est précisément l'élément qui dépend du thème. Tous les thèmes Shopify ne proposent pas un affichage en grille avec visuels, sous-rubriques colorées et zone de mise en avant ; certains se contentent d'un déroulant texte vertical, voire d'un simple menu plat sans visuel. Avant d'investir du temps à structurer vingt sous-niveaux, vérifiez dans la documentation officielle de votre thème, ou via une simulation rapide sur le thème de démonstration, le rendu réel obtenu sur la boutique. Si votre thème ne supporte pas le mega-menu et que vous en avez besoin, le passage à un thème compatible ou la personnalisation de votre thème via Liquid reste la voie la plus propre. Cette approche reste plus stable dans le temps qu'une application tierce qui injecte du JavaScript en surcouche.

La navigation mobile mérite une réflexion à part entière. Sur Shopify, le menu principal est généralement replié dans un menu hamburger sur smartphone. Les déroulants à plusieurs niveaux s'affichent alors en accordéon vertical, ce qui change radicalement le rythme de lecture pour vos visiteurs. Un menu confortable sur desktop avec vingt sous-rubriques devient pénible sur mobile, où le pouce doit parcourir tout l'écran pour atteindre la dernière entrée. Sur les boutiques que nous déployons, notre expérience montre qu'au-delà de huit éléments racines, la conversion mobile commence à baisser sensiblement. Mieux vaut alors regrouper, simplifier et utiliser les pages de collections elles-mêmes pour la profondeur de catalogue, plutôt que d'empiler des niveaux dans le menu hamburger.

Côté UX, deux règles simples encadrent les arbitrages quotidiens. La loi de Hick stipule que le temps de décision d'un utilisateur augmente avec le nombre d'options proposées. La règle du sept plus ou moins deux, héritée de la psychologie cognitive, suggère qu'un menu principal lisible compte entre cinq et neuf entrées de premier niveau. Au-delà, les visiteurs balayent du regard sans réellement choisir. Préférez également des libellés descriptifs ("Robes d'été", "Bijoux argent 925", "Sneakers homme") aux génériques ("Boutique", "Produits", "Catalogue") : un libellé descriptif aide à la fois l'utilisateur à se projeter dans votre offre et le moteur de recherche à comprendre l'arborescence sémantique de votre site.

L'impact SEO d'un menu bien construit est rarement spectaculaire mais durable. Chaque libellé est une ancre interne pointant vers une URL de votre boutique ; multiplier les liens vers une collection prioritaire renforce mécaniquement son poids dans le maillage interne perçu par Google. La structure du menu se retrouve aussi indirectement dans le fil d'Ariane affiché sur vos pages produits, à condition que votre thème génère ce fil à partir de l'arborescence des collections. Pour creuser ces aspects en profondeur, notre guide complet d'optimisation SEO sur Shopify détaille la liaison entre menu principal, maillage interne et indexation des fiches produits dans la SERP.

Quelques pièges récurrents reviennent sur les audits que nous menons chez rou9e. Premier piège, le plus fréquent : les liens orphelins. Si vous renommez le handle d'une collection (par exemple "soldes-ete" remplacé par "soldes-ete-2026"), Shopify ne met pas à jour les liens du menu qui pointaient vers l'ancien handle. Le menu continue d'afficher l'entrée, mais le clic renvoie une 404 silencieuse côté visiteur. Vérifiez systématiquement les éléments de menu après chaque modification de slug, ou utilisez les redirections natives proposées par Shopify dans la section "Boutique en ligne > Navigation > Redirections d'URL". Deuxième piège : la désynchronisation entre marchés. Sur une boutique multi-locale opérée via Shopify Markets ou via des stores séparés en duplication, chaque locale conserve son propre menu. Une modification appliquée sur le menu français n'est pas répercutée automatiquement sur les menus anglais ou espagnol.

Troisième piège, plus discret : les éléments désactivés ou archivés. Lorsque vous dépubliez une page CMS ou archivez une collection, Shopify ne supprime pas l'entrée correspondante dans le menu. Le lien reste cliquable côté visiteur mais aboutit à une page vide, voire à une 404 selon la configuration de votre thème et de votre fichier robots.txt. Prenez l'habitude de faire un passage mensuel sur l'ensemble de vos menus, surtout après une refonte saisonnière ou une opération commerciale importante. Sur les boutiques de marchands saisonniers que nous suivons (vins primeurs, mode capsule, ventes flash, calendriers de l'avent), ce nettoyage régulier évite des frictions invisibles dans Google Analytics, mais coûteuses sur le taux de conversion mesuré en fin de mois.

Avant de pousser un nouveau menu en production, prévisualisez-le toujours via la fonction "Aperçu" de l'éditeur de thème Shopify. Vous y vérifiez le rendu desktop, tablette et mobile sans impacter les visiteurs en cours de session, et vous pouvez tester plusieurs scénarios de navigation avant la mise en ligne effective. Si votre boutique est complexe et que la navigation porte une part importante du chiffre d'affaires, une migration ou refonte accompagnée reste le meilleur moyen de remettre à plat l'arborescence en partant des données réelles de navigation et d'achat. Pour un audit ciblé ou une mise en place sur mesure de votre nouvelle navigation, notre équipe propose un accompagnement projet de bout en bout, du backoffice aux performances frontales.

Adrien FERREIRA
  • Shopify
  • Tutoriel
  • Navigation

Autres articles de blog qui pourraient vous intéresser