Comment créer un menu Shopify avec une application de navigation (Étape par étape)

Concevoir une navigation claire et fluide constitue une base importante pour l’ergonomie d’une boutique Shopify. Une application de menu ne supprime pas votre navigation native : elle s’appuie directement sur une arborescence propre dans la section Contenu > Menus (Content > Menus), apporte les mises en page que votre thème ne peut pas offrir seul (comme des méga menus visuels ou une ergonomie mobile dédiée), et ne devient active qu’une fois activée dans les intégrations d’applications (App embeds) de votre thème.

Si vos menus déroulants par défaut manquent de place, si vous souhaitez afficher des colonnes enrichies d’images de collections, ou si vous désirez une barre d’onglets accessible au pouce sur smartphone, ce guide vous accompagne pas à pas sans nécessiter la moindre ligne de code.

Réponse rapide : créer un menu avec une application de navigation Shopify

Pour créer un menu avec une application de navigation Shopify, planifiez vos liens dans Contenu > Menus, installez l’application et créez le menu dans son éditeur, ajoutez des sous-menus ou un méga menu, configurez une disposition mobile, puis activez l’application dans App embeds dans l’éditeur de thème et testez sur ordinateur et mobile.

Voici les 5 étapes essentielles :

1. Planifier la structure dans Contenu > Menus : Préparez vos collections, produits et pages clés dans l’administration Shopify avant d’installer la moindre application tierce.
2. Installer l’application de navigation et créer le premier menu : Ajoutez l’application depuis le Shopify App Store, configurez le conteneur pour ordinateur ou partez d’un modèle prédéfini.
3. Ajouter des sous-menus, un méga menu et des images : Regroupez les liens par colonnes thématiques et intégrez des visuels de collection pour guider le regard des clients.
4. Construire le menu mobile et le tester sur un vrai smartphone : Configurez un tiroir latéral fluide ou une barre d’onglets fixée en bas d’écran, puis vérifiez la précision tactile sur un appareil réel.
5. Publier via les App embeds et corriger les erreurs courantes : Activez le bouton de l’application dans l’éditeur de thème, enregistrez vos modifications et validez l’affichage sur tous les écrans.

Quand le menu natif de Shopify suffit (et quand une application devient nécessaire)

Dans l’écosystème Shopify, les menus natifs sont gérés de manière centralisée sous Contenu > Menus dans l’interface administrateur, tandis que les paramètres de votre thème déterminent l’emplacement exact où ces éléments s’affichent sur votre boutique en ligne.

Pour les catalogues compacts, la navigation par défaut de Shopify répond bien aux usages courants. D’après la documentation officielle du centre d’aide Shopify, un élément de menu de premier niveau peut comporter jusqu’à deux niveaux de menus déroulants imbriqués (Élément principal → Niveau 1 → Niveau 2). Ce plafond à trois niveaux convient aux petites collections, aux pages institutionnelles et aux catalogues simples, sans logiciel supplémentaire.

Cependant, comme le souligne le Baymard Institute dans ses recherches sur l’ergonomie e-commerce, pour acheter un produit, vos clients doivent d’abord pouvoir le trouver. Quand une boutique compte de nombreuses sous-catégories, les menus textuels classiques forcent les visiteurs à faire défiler de longues listes verticales. Selon votre thème, le menu natif peut ne pas permettre d’ajouter des visuels promotionnels, des images produits ou des grilles à plusieurs colonnes sans personnalisation supplémentaire.

Pour découvrir en détail les contraintes architecturales des thèmes natifs, consultez notre analyse des Shopify theme menu limitations.

Si votre boutique ne propose qu’un nombre restreint d’articles et que les clients accèdent aux produits en un ou deux clics, le menu natif est non seulement suffisant, mais constitue aussi la solution la plus simple. En revanche, dès que votre catalogue réclame des repères visuels et une disposition ergonomique pour faciliter l’exploration, une application spécialisée devient utile.

Étape 1 : Planifier la structure du menu avant d’installer une application

Un menu clair commence par un catalogue Shopify clair. Avant de vous rendre sur l’App Store ou d’ajouter des blocs d’application, prenez le temps de schématiser votre arborescence.

Assurez-vous d’abord que toutes vos pages de destination existent bel et bien dans votre espace administrateur. Créez l’ensemble de vos collections, vérifiez que des produits actifs y sont associés, et publiez vos pages essentielles (À propos, Contact, Livraison, FAQ). Un menu ne peut pas pointer vers des contenus qui n’ont pas encore été créés.

Ensuite, esquissez votre arborescence sur papier ou dans un tableau en limitant la profondeur à trois niveaux logiques au maximum. Des libellés courts et explicites se lisent plus facilement que des formulations marketing complexes. Privilégiez des termes clairs comme “Vestes homme” plutôt que des expressions abstraites comme “Horizons d’hiver”.

Enfin, construisez ou nettoyez vos liens principaux sous Contenu > Menus dans l’administrateur Shopify. De nombreuses applications de navigation sont capables de se connecter directement à cette arborescence existante, vous évitant de ressaisir chaque adresse manuellement. Pour affiner votre choix de disposition selon la taille de votre inventaire, découvrez notre guide pour choose the right menu type.

Le tutoriel officiel de Shopify sur les menus déroulants :

Dès que vos collections et liens sont en ordre dans l’administrateur, vous pouvez passer à la configuration de l’application.

Étape 2 : Installer l’application et construire votre premier menu

Après avoir sélectionné une application de menu sur le Shopify App Store, cliquez sur Installer pour l’ajouter à votre boutique. Les applications conçues avec les Theme App Extensions de Shopify ne vous obligent pas à modifier manuellement le code de votre thème : vérifiez que l’application choisie fonctionne ainsi.

Dans le tableau de bord de l’application, la première décision consiste à déterminer le type de menu que vous souhaitez concevoir :

• Desktop Mega Menu : Un large panneau déroulant pour grand écran, affichant plusieurs colonnes de liens aux côtés de visuels promotionnels.
• Mobile Drawer Menu : Un panneau latéral qui s’ouvre avec fluidité lorsque les mobinautes touchent l’icône hamburger.
• Bottom Tab Bar : Une barre de navigation ancrée en permanence au bas de l’écran mobile, regroupant les accès prioritaires de la boutique.

Selon l’application, vous pouvez démarrer à partir d’un modèle préconçu ou créer un conteneur vierge. Certaines solutions permettent de lier vos menus Shopify existants afin d’importer directement vos listes de liens, vous évitant de reconstruire manuellement vos groupes de catégories.

Dans l’éditeur visuel, ajoutez vos entrées principales (comme “Boutique”, “Nouveautés” ou “Collections”) et reliez chaque élément via le sélecteur interne de l’application plutôt qu’en collant des adresses URL absolues. Utilisez le mode aperçu pour vérifier la typographie, l’espacement et les alignements avant d’incorporer des visuels.

Étape 3 : Ajouter des sous-menus, un méga menu, des images et des collections

Une fois les éléments principaux définis, enrichissez vos catégories denses en les transformant en méga menus à plusieurs colonnes. Comme le note le Nielsen Norman Group à propos des méga menus, ce format est un excellent choix de conception pour accueillir un grand nombre d’options, car il garde tout visible en même temps.

Pour réussir la conception de votre méga menu :

1. Organiser les liens par ensembles logiques : Répartissez vos sous-catégories dans des colonnes verticales coiffées de titres clairs (par exemple : “Hauts”, “Pantalons”, “Accessoires”).
2. Garder une structure peu profonde : Maintenez les liens sous chaque titre de colonne sur un seul niveau afin que le regard puisse embrasser l’ensemble des choix immédiatement.
3. Intégrer des repères visuels : L’étude du Nielsen Norman Group indique que la présence d’images dans un méga menu aide les utilisateurs à sélectionner la bonne option. Intégrez des vignettes de collections ou des cartes produits représentatives à côté de vos listes de liens.
4. Pointer vers des collections et des produits : Choisissez vos collections ou produits avec le sélecteur intégré de l’application plutôt que de saisir les URL à la main. Cela limite les fautes de frappe, mais revérifiez vos liens dès que vous renommez ou supprimez une collection ou une page.

Pour obtenir des conseils approfondis sur l’espacement des colonnes, la hiérarchie visuelle et l’agencement des bannières, reportez-vous à notre dossier sur les mega menu best practices.

Une application de menu remplace-t-elle votre menu de navigation Shopify ?

Beaucoup de commerçants craignent qu’installer une application ne supprime définitivement leur menu Shopify existant.

En pratique, votre menu natif reste dans la section Contenu > Menus de votre interface administrateur, où vous continuez à gérer vos liens. L’application gère uniquement la façon dont son propre menu s’affiche sur la vitrine de votre thème.

Selon l’application et les paramètres choisis, plusieurs méthodes d’intégration existent :

• Insérer avant ou après (Insert Before / Insert After) : L’application place son menu directement au-dessus ou en dessous d’un élément existant du thème grâce à un sélecteur CSS (comme l’en-tête ou la barre d’annonces).
• Remplacer le menu du thème (Replace Theme Menu) : L’application cible l’élément de navigation d’origine à l’aide d’un sélecteur CSS et le remplace intégralement par le menu conçu dans l’application.
• Ajout par section ou par bloc : Certaines applications permettent d’ajouter les menus sous forme de sections ou de blocs natifs directement dans l’éditeur de thème. Par exemple, avec Navi+, cette méthode s’applique spécifiquement aux Mega Menus et Grid Menus.

Illustration de concept : Comparaison entre l’insertion sous l’en-tête et le remplacement complet du menu via un sélecteur CSS.

Figure 1 : Illustration de concept — Insérer un menu d’application sous l’en-tête ou remplacer le menu du thème avec un sélecteur CSS.

Utiliser votre menu Shopify existant dans l’application

Certaines applications peuvent se relier à votre menu Shopify actuel pour en exploiter la structure. Pensez toutefois à consulter la documentation de l’application pour savoir si les ajustements effectués dans Contenu > Menus sont synchronisés automatiquement ou s’ils nécessitent un clic manuel sur un bouton de synchronisation (Sync) dans l’application.

Que se passe-t-il lorsque vous changez de thème ?

Lorsque vous installez ou publiez un nouveau thème, le menu créé dans l’application n’apparaît pas de façon magique sur le nouveau site. Comme le rappelle le centre d’aide Shopify sur les extensions de thèmes, vous devez réactiver ces applications sur votre nouveau thème car elles ne sont pas actives par défaut.

De plus, chaque thème possédant son propre code HTML et ses propres classes CSS pour l’en-tête, un remplacement basé sur un sélecteur CSS précis peut nécessiter une mise à jour sur le nouveau thème. Pour les boutiques enregistrant des ventes régulières, il est recommandé de tester l’application sur un thème dupliqué avant toute mise en ligne.

Étape 4 : Construire le menu mobile et le tester sur un smartphone réel

Un méga menu pensé pour grand écran ne peut pas simplement être rétréci pour s’afficher sur mobile. Tenter d’imposer des grilles multi-colonnes sur un smartphone encombre l’écran et déroute les clients.

Dans les tests utilisateurs du Baymard Institute, certains participants ont ouvert le menu principal sur mobile pour le refermer aussitôt, submergés et désorientés par les options proposées. De surcroît, la documentation Shopify sur les menus déroulants souligne que certains thèmes peuvent nécessiter des ajustements CSS pour améliorer l’ergonomie mobile.

Pour concevoir une navigation mobile efficace, deux approches principales ainsi qu’un basculement responsive se distinguent :

• Tiroir mobile coulissant (Mobile Drawer) : Un panneau latéral qui s’ouvre en douceur, déployant les sous-catégories sous forme d’accordéons clairs pour que l’utilisateur garde toujours ses repères.
• Barre d’onglets inférieure (Bottom Tab Bar) : Une barre horizontale fixée en permanence en bas d’écran, plaçant les fonctions vitales (Accueil, Recherche, Collections, Panier) directement sous le pouce de l’utilisateur.
• Basculement responsive automatique : Certaines applications proposent une adaptation fluide. Par exemple, Navi+ bascule par défaut les méga menus en mode mobile sur les écrans inférieurs à 768 pixels, et sa fonction Smart responsive intègre une référence dynamique du menu bureau au sein d’un tiroir mobile.

Illustration de concept : Comparaison entre un tiroir latéral mobile et une barre d’onglets inférieure fixée.

Figure 2 : Illustration de concept — Tiroir mobile coulissant et barre d’onglets fixée au bas de l’écran.

Prenez toujours le soin d’examiner le résultat sur un smartphone réel plutôt que de vous fier uniquement aux simulateurs de navigateur. C’est en tenant l’appareil en main que vous constaterez si les zones de contact sont assez spacieuses et si les gestes tactiles répondent sans accroc.

Pour perfectionner vos interfaces mobiles, consultez nos guides détaillés sur le mobile drawer menu, la mise en place d’une bottom tab bar, ainsi que nos réflexions sur l’ergonomie tactile dans notre article mobile navigation beyond the hamburger menu.

Étape 5 : Publier sur votre boutique et résoudre les problèmes courants

La mise en forme de votre menu dans l’éditeur d’application ne suffit pas à le rendre visible auprès de vos acheteurs. Les applications conçues avec des Theme App Extensions s’appuient sur les App embeds : vous activez l’application depuis l’éditeur de thème sans modifier manuellement le code de votre thème.

Selon les recommandations pour développeurs de Shopify, les blocs d’App embed sont désactivés par défaut après l’installation d’une application. Les marchands doivent donc activer ces blocs dans l’éditeur de thème sous Paramètres du thème > Intégrations d’applications (App embeds) puis enregistrer.

D’après la documentation technique de Shopify, les App embeds sont des éléments fournis par les applications qui s’affichent sous forme de calque ou de superposition, et ils sont compatibles avec toutes les versions de thèmes. Grâce à ce mécanisme, les marchands n’ont pas besoin de modifier le code de leur thème manuellement.

Voici la marche à suivre pour publier votre menu :

1. Accédez à votre administration Shopify et rendez-vous dans Boutique en ligne > Thèmes.
2. Cliquez sur Personnaliser à côté de votre thème actif (ou de votre thème dupliqué de test).
3. Dans la barre latérale gauche, cliquez sur l’icône Intégrations d’applications.
4. Repérez le nom de votre application de menu et basculez l’interrupteur sur Activé (On).
5. Cliquez sur Enregistrer en haut à droite.

Compromis : quand vous n’avez pas besoin d’une application de menu

Bien que les applications de navigation offrent une souplesse graphique indéniable, tous les commerçants Shopify n’en ont pas l’utilité. L’ajout d’une application extérieure s’accompagne toujours de contraintes à considérer :

• Les catalogues simples n’ont pas besoin de menus complexes : Si votre boutique ne propose que quelques produits répartis en deux ou trois collections, les menus déroulants natifs de Shopify (jusqu’à deux niveaux imbriqués) peuvent offrir une navigation rapide et claire.
• Vérifications requises lors des changements de thème : À chaque fois que vous changez de thème, les App embeds ne s’activent pas d’elles-mêmes et les sélecteurs doivent être contrôlés.
• Certains thèmes intègrent déjà un méga menu : Certains thèmes proposent un réglage natif d’en-tête à plusieurs colonnes. Si cette option répond à votre cahier des charges, testez-la en priorité avant d’envisager une application supplémentaire.

N’installez une application de navigation que si l’étendue de votre catalogue, vos objectifs de mise en avant visuelle ou vos impératifs sur mobile dépassent les possibilités offertes par votre thème.

Check-list : questions à poser avant d’installer une application de menu

Avant d’arrêter votre choix sur une application de menu, passez en revue ces quelques critères pratiques :

• Liaison avec les menus natifs : L’application peut-elle se connecter à vos listes existantes dans Contenu > Menus, et explique-t-elle clairement la gestion des mises à jour ?
• Ergonomie mobile dédiée : Propose-t-elle de véritables solutions mobiles (comme un tiroir fluide ou une barre d’onglets inférieure) plutôt que de simplement rétrécir les panneaux pour ordinateur ?
• Intégration sans modification de code : L’application fonctionne-t-elle exclusivement via les App embeds et les blocs de thème, sans exiger de modifications dans les fichiers Liquid ?
• Procédure de changement de thème : La réactivation de l’application lors d’un changement de thème est-elle simple et bien documentée ?
• Test sécurisé sur thème dupliqué : Pouvez-vous construire et vérifier l’ensemble de vos menus sur un thème dupliqué non publié avant d’impacter les clients ?
• Niveaux d’arborescence : L’application permet-elle d’atteindre la profondeur de sous-catégories souhaitée sans saturer la lisibilité (idéalement 3 niveaux au plus) ?
• Assistance en cas de conflit d’affichage : L’éditeur de l’application fournit-il un support réactif si votre thème utilise des sélecteurs CSS particuliers ?

Où se positionne Navi+

Si vous recherchez une solution pour déployer cette méthode sur votre boutique, Navi+ Tab Bar & Mega Menu propose un éditeur par glisser-déposer pour Shopify.

Navi+ permet aux marchands de concevoir des barres d’onglets inférieures, des méga menus multi-colonnes pour ordinateur, des tiroirs mobiles, des menus à icônes et des boutons d’action flottants par simple glisser-déposer. L’application se connecte directement à vos menus Shopify existants pour en reprendre la structure.

Pour afficher vos menus sur votre boutique, activez l’intégration “Store Connector” dans les App embeds de votre thème. Vous pourrez ensuite choisir d’insérer vos menus avant ou après les sections existantes, ou activer le mode Replace pour substituer complètement la navigation du thème à l’aide de sélecteurs CSS. Pour les Mega Menus et Grid Menus, l’intégration sous forme de section ou de bloc est également disponible.

Pour protéger l’expérience de vos visiteurs, Navi+ recommande aux boutiques qui ont déjà du trafic de tester d’abord le menu sur une copie du thème. Si vous souhaitez essayer cette méthode, Navi+ Tab Bar & Mega Menu propose un forfait gratuit : créez le menu, testez-le sur un thème dupliqué et n’activez-le que lorsqu’il vous convient.

FAQ

Une application de menu remplace-t-elle mon menu de navigation Shopify ?

Cela dépend des options configurées dans l’application. Une application peut ajouter des menus au-dessus ou en dessous de votre en-tête, ou remplacer entièrement la barre du thème via un sélecteur CSS, tandis que vos liens d’origine restent préservés dans Contenu > Menus.

Que devient mon application de menu si je change de thème ?

Les intégrations App embeds ne sont pas activées par défaut lors de la publication d’un nouveau thème. Vous devez réactiver l’application dans l’éditeur du nouveau thème et vous assurer que les sélecteurs CSS de remplacement correspondent bien au nouveau code.

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

Selon la documentation officielle de Shopify, un élément principal de menu peut comporter au maximum deux niveaux de sous-menus déroulants imbriqués, ce qui porte la profondeur totale à trois niveaux.

Dois-je modifier le code du thème pour utiliser une application de menu ?

Pas si l’application est conçue avec les Theme App Extensions de Shopify : vous pouvez publier et paramétrer les menus depuis l’éditeur de thème sans modifier manuellement le code du thème. Vérifiez que l’application choisie fonctionne ainsi.

Quand ai-je besoin d’un méga menu plutôt que d’un menu déroulant ?

Un méga menu est utile lorsque votre catalogue regroupe de nombreuses catégories que les visiteurs doivent pouvoir embrasser d’un coup d’œil, ou lorsque l’insertion d’images aide à orienter instantanément l’acheteur.

Comment faire fonctionner mon menu de manière optimale sur mobile ?

Concevez une disposition spécifiquement dédiée au mobile – comme un tiroir latéral clair ou une barre d’onglets fixée en bas d’écran – ou choisissez une application dotée d’un basculement responsive automatique, et testez toujours le confort tactile sur un smartphone physique.

Sources

• Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
• Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
• Shopify Help Center — Apps and theme structure. help.shopify.com/en/manual/online-store/themes/theme-structure/extend/apps
• Shopify Developer Documentation — Theme app extension configuration. shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration
• Shopify Developer Documentation — Theme app extensions overview. shopify.dev/docs/apps/build/online-store/theme-app-extensions
• Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well
• Baymard Institute — Homepage & Navigation UX Best Practices. baymard.com/blog/ecommerce-navigation-best-practice
• Navi+ Help Center — Publishing Mega Menu on Shopify. help.naviplus.io/docs/usage/mega-menu-desktop/publishing-on-shopify
• Navi+ Help Center — Mega Menu Desktop FAQ. help.naviplus.io/docs/usage/mega-menu-desktop/faq
• Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design