Quick answer: how to create a menu with the Navi+ app on Shopify
Pour créer un menu avec l’application Navi+ sur Shopify, installez Navi+ depuis le Shopify App Store, cliquez sur Add menu, choisissez un type de menu, commencez avec un modèle, une page vierge ou l’IA, puis activez Store Connector dans les intégrations d’applications et publiez.
- Installez Navi+ depuis le Shopify App Store et ouvrez le tableau de bord de l’application.
- Cliquez sur Add menu et choisissez le type de menu de navigation souhaité.
- Démarrez à partir d’un modèle prédéfini, d’une page vierge ou d’un squelette IA.
- Ajoutez, organisez et stylisez vos liens vers des collections, produits ou pages.
- Activez Store Connector dans les intégrations d’applications du thème, enregistrez et cliquez sur Publish to website.
- Vérifiez la navigation en direct sur vos appareils mobiles et navigateurs de bureau.
Aucun code de thème n’est nécessaire. Navi+ fonctionne via un app embed de thème Shopify : vous créez et prévisualisez le menu dans l’application au lieu de modifier les fichiers du thème.
Before you start: which Navi+ menu type do you need?
Choisir le bon format de navigation avant de construire vous évite de tout refaire. Chaque boutique a un catalogue de taille différente : choisissez le type qui correspond à la façon dont vos clients naviguent.
Figure 1 : Illustration conceptuelle (Concept illustration) — Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | Ajoute une barre de navigation fixe en bas d’écran avec icônes et étiquettes pour mobile | Le trafic de votre boutique est principalement mobile et vous voulez un accès rapide aux pages clés |
| Mobile Menu | Crée un tiroir latéral ou menu hamburger pour l’ensemble de votre catalogue | Vous avez besoin d’un répertoire mobile structuré organisant clairement de larges catégories |
| Desktop Mega Menu | Construit des menus déroulants à plusieurs colonnes avec produits, collections et bannières | Les acheteurs sur ordinateur doivent visualiser plusieurs rayons et promotions en un coup d’œil |
| Mobile Mega Menu | Crée une mise en page de méga-menu conçue pour les écrans mobiles | Un catalogue à plusieurs niveaux demande des parcours plus profonds sans surcharger un petit écran |
| Icon Menu et Floating Button | Ajoute des tuiles d’icônes ou un bouton flottant qui mènent à des produits, collections ou pages | Vous voulez un accès rapide au support, au panier ou aux promotions sans occuper l’en-tête |
Les boutiques avec surtout des visiteurs mobiles peuvent commencer par une Tab Bar ou un Mobile Menu. Comme le souligne le Nielsen Norman Group, une navigation cachée est moins facile à découvrir qu’une navigation visible. Une Tab Bar fixe garde les destinations principales visibles au lieu de les cacher derrière un tiroir fermé.
Bien que vous puissiez déployer plusieurs menus simultanément, la meilleure pratique consiste à finaliser et tester un premier menu avant d’en ajouter un second. Pour un cadre de décision complet, consultez notre guide pour savoir comment choisir le bon type de menu.
Step 1: Install Navi+ from the Shopify App Store
Rendez-vous sur la fiche Navi+ Tab Bar & Mega Menu sur le Shopify App Store. L’installation depuis la place de marché officielle vous fait passer par le parcours d’installation standard de Shopify.
Cliquez sur Install pour lancer la configuration. Shopify affiche son écran d’autorisations standard. Navi+ affiche vos menus via un app embed de thème, que vous activez à l’étape 5.
Approuvez les autorisations pour finaliser l’installation. Une fois le processus terminé, l’application s’ouvre automatiquement dans votre interface Shopify. Par la suite, accédez au générateur à tout moment en sélectionnant Apps dans la barre latérale gauche de Shopify.
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
Dans le tableau de bord Navi+, cliquez sur le bouton bien visible Add menu. Cela ouvre l’écran Choose kind of menu présentant six cartes d’options : Tab Bar, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu et Floating Button. Choisissez la carte correspondant à votre objectif.
Start from a template
Sélectionnez Create from a template pour explorer des modèles prédéfinis. Dès qu’une structure correspond à votre univers produit, cliquez sur Use this template. L’éditeur intègre automatiquement des liens modèles, des icônes et des styles que vous pouvez personnaliser directement.
Start blank
Choisissez Blank si vous avez déjà défini votre hiérarchie exacte sur papier. Cette approche offre une liberté totale sans avoir à supprimer de faux liens. Si votre arborescence n’est pas encore prête, consultez notre tutoriel pour dessiner la structure de votre menu avant de commencer.
Build the structure with AI
Si vous souhaitez une ébauche rapide sans saisie manuelle, utilisez l’assistant IA intégré. Décrivez le concept de votre boutique et l’étendue de votre catalogue en quelques mots simples. L’IA génère un squelette de menu structuré directement dans l’éditeur. Vous conservez le contrôle total pour ajuster les liens, connecter vos collections et harmoniser les couleurs.
Use your existing Shopify menu
Navi+ peut aussi se connecter à un menu de navigation Shopify existant comme point de départ. Une fois dans l’éditeur, vérifiez les positions imbriquées avant de publier, puis de nouveau chaque fois que vous modifiez le menu d’origine dans Shopify.
Step 3: Add and arrange menu items
L’ajout et le réordonnancement des éléments se font par glisser-déposer. Vous pouvez ajouter de nouveaux éléments, les faire glisser pour changer leur ordre et les imbriquer sous un élément parent.
Link to products, collections, and pages
Chaque élément de menu doit mener vers une destination active. Dans Navi+, les éléments peuvent pointer vers des produits, des collections et des pages. Organisez les catégories de façon logique, gardez des titres courts au premier niveau, placez vos collections les plus vendues en premier et consultez notre guide pour configurer les liens de menu dans Shopify.
Nest items up to three levels
Pour les catalogues étoffés, l’imbrication évite la surcharge visuelle. Avec le forfait Business de Navi+, vous pouvez structurer votre navigation jusqu’à trois niveaux de profondeur. À titre de comparaison, le menu natif de Shopify prend en charge jusqu’à deux niveaux de sous-menus déroulants d’après la documentation officielle.
Step 4: Customize icons, images, colors, and layout
Une fois votre arborescence en place, ajustez le style à votre marque. Pour une Tab Bar, choisissez des icônes claires et vérifiez la lisibilité des libellés sur mobile. Pour les Mega Menus, ajoutez des images de collections et choisissez une mise en page adaptée à votre catalogue.
Ajustez les couleurs du texte et du fond à votre thème Shopify actif. Vérifiez toujours le contraste du texte et des icônes sur un vrai écran de téléphone pour confirmer qu’ils restent lisibles.
Avant la mise en ligne, ouvrez l’onglet Publish et utilisez Test this menu pour prévisualiser le menu. Pour aller plus loin sur le style, consultez notre guide pour modifier le style de votre menu.
Step 5: Turn on Store Connector in App embeds, then publish
Afficher Navi+ sur votre boutique ne demande ni d’écrire ni de modifier du code de thème. Il fonctionne via un app embed de thème Shopify.
Figure 2 : Illustration conceptuelle (Concept illustration) — Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
Si votre boutique génère du trafic régulier, la bonne pratique consiste à tester les modifications dans un environnement isolé. Conformément aux recommandations de Shopify sur la duplication des thèmes, créer une copie permet de vérifier vos réglages sans impacter l’expérience de vos clients actifs.
Turn on Store Connector
Dans l’administration Shopify, allez dans Online Store > Themes et cliquez sur Customize sur votre thème. Dans la barre latérale, cliquez sur l’icône App embeds, repérez Store Connector, activez le bouton bascule selon les instructions Shopify et cliquez sur Save. Cette activation ne doit être effectuée qu’une seule fois par site web.
Click Publish to website
Revenez dans le tableau de bord Navi+, ouvrez votre configuration et cliquez sur Publish to website. L’application propose des options de positionnement adaptées à votre format—comme Replace your main menu, Add below your header ou Use your existing menu icon. Navi+ répartit les déploiements en trois groupes et vous guide vers l’option compatible. Validez votre choix et basculez le bouton de publication.
Step 6: Preview on mobile and desktop and fix common problems
Après publication, examinez votre boutique sur écran d’ordinateur et sur un véritable smartphone. Les écrans tactiles mettent en évidence l’ergonomie de manipulation et l’espacement que les simulateurs d’ordinateurs peuvent occulter.
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connector est activé sur un autre thème ou non sauvegardé | Dans l’éditeur du thème actif, activez Store Connector dans App embeds et cliquez sur Save |
| Two menus show at once | Le menu natif du thème est toujours actif en parallèle de l’application | Dans les réglages Navi+ choisissez Replace your main menu ou masquez le bloc d’en-tête natif |
| Menu disappeared after changing theme | Les intégrations d’applications ne se transfèrent pas automatiquement sur un nouveau thème | Ouvrez l’éditeur du nouveau thème, réactivez Store Connector dans App embeds et enregistrez |
Menu does not appear
Si le menu ne s’affiche pas après publication, vérifiez que le bouton Store Connector a bien été activé sur le thème actif et que vous avez cliqué sur le bouton Save dans l’éditeur de thème.
Two menus show at once
Si les deux menus apparaissent simultanément, le bloc de navigation natif occupe toujours l’en-tête. Réglez les options de publication sur Replace your main menu ou désactivez le bloc de menu par défaut dans la section En-tête de votre thème.
Menu disappeared after changing theme
Lorsque vous publiez un nouveau thème Shopify, les intégrations d’applications ne sont pas actives par défaut. Ouvrez l’éditeur du nouveau thème, réactivez Store Connector dans App embeds et sauvegardez. Consultez notre liste de contrôle complète pour un menu d’application qui ne s’affiche pas.
How to turn off a Navi+ menu or go back to your theme menu
Revenir à votre navigation par défaut ne demande pas de modifier le code du thème, car Navi+ fonctionne via un app embed.
Pour désactiver un menu tout en gardant l’application active, ouvrez le tableau de bord Navi+. Chaque menu créé affiche un statut On / Off. Passer un menu sur Off l’arrête sur votre boutique en ligne, et le menu par défaut de votre thème peut alors s’afficher de nouveau.
Pour couper tous les menus Navi+ sur un thème, rendez-vous dans Online Store > Themes > Customize, ouvrez l’onglet App embeds, désactivez Store Connector et cliquez sur Save. Si vous aviez travaillé sur un thème dupliqué, supprimez simplement ce brouillon sans jamais le publier.
Trade-offs: when you don’t need Navi+ yet
Bien que les créateurs de menus offrent des fonctionnalités avancées, leur installation n’est pas impérative pour chaque marchand Shopify :
Premièrement, si votre boutique ne propose que quelques produits, la navigation native de Shopify—qui supporte jusqu’à deux niveaux de sous-menus déroulants—associée au menu mobile standard de votre thème est souvent amplement suffisante. Ajouter une application externe pour cinq liens simples alourdit inutilement votre gestion.
Deuxièmement, l’utilisation d’une intégration d’application requiert une attention opérationnelle lors des refontes. Dès que vous changez de thème, vous devez penser à réactiver l’intégration Store Connector sur la nouvelle base de code.
Troisièmement, bien que l’IA propose un premier squelette pratique, elle ne crée pas un menu prêt à l’emploi. Vous devez consacrer du temps à relier manuellement vos collections, insérer vos images et choisir des contrastes lisibles.
Enfin, activer trop de types de menus à la fois—comme une Tab Bar, un menu tiroir et des boutons flottants simultanément—peut encombrer l’écran des smartphones et dérouter vos visiteurs si votre arborescence n’est pas clairement définie.
Where Navi+ fits
Dès que votre premier menu est en ligne et fonctionne parfaitement, l’évolution naturelle consiste à ajouter un format de menu complémentaire dédié à un autre usage. Par exemple, de nombreuses marques associent une Tab Bar en bas d’écran (pour la recherche, le panier et les meilleures ventes) à un Mobile Menu latéral pour l’ensemble du catalogue. Un bouton flottant discret peut également faciliter la prise de contact.
Tous ces menus supplémentaires se créent depuis le même bouton Add menu du tableau de bord. De plus, les menus Navi+ peuvent également être intégrés sur des sites hors Shopify sans code. Pour concevoir une structure sur tous les écrans, explorez notre guide pour créer un menu pour ordinateur et un menu mobile.
Si votre premier menu est actif, l’étape suivante consiste souvent à ajouter un deuxième menu pour un usage différent — par exemple un Mobile Menu pour l’ensemble du catalogue aux côtés de la Tab Bar. Vous pouvez l’ajouter depuis ce même bouton Add menu. Si vous ne l’avez pas encore installée, commencez par ajouter Navi+ Tab Bar & Mega Menu sur le Shopify App Store.
Action checklist
Suivez cette liste d’actions étape par étape pour concevoir, publier et valider votre menu sur Shopify :
- Choisissez le format de menu qui répond à l’objectif immédiat de votre boutique
- Cliquez sur Add menu dans le tableau de bord Navi+
- Sélectionnez une méthode de départ : modèle, page vierge ou structure IA
- Associez des liens de destination vers vos produits, collections et pages
- Limitez la profondeur des sous-catégories à trois niveaux maximum
- Utilisez Test this menu dans l’onglet Publish pour valider le design
- Dupliquez votre thème actif avant de tester si votre boutique accueille du trafic
- Activez Store Connector dans App embeds et cliquez sur Save
- Cliquez sur Publish to website et sélectionnez votre emplacement d’affichage
- Contrôlez le fonctionnement sur de véritables smartphones et sur ordinateur
Installez Navi+ Tab Bar & Mega Menu sur le Shopify App Store pour structurer votre navigation sans toucher au code de votre thème.
FAQ
Do I need to edit theme code to show a Navi+ menu?
Non. Vous n’avez pas besoin de modifier le code Liquid ou les fichiers de votre thème. Activez simplement l’intégration Store Connector dans l’éditeur de thème Shopify et publiez le menu dans l’application. D’après la documentation, cette activation n’est requise qu’une seule fois par site.
Can I use my existing Shopify menu with Navi+?
Oui. Navi+ peut se connecter à vos menus Shopify existants. Après la connexion, vérifiez chaque niveau imbriqué pour confirmer que les catégories et les liens s’affichent comme vous le souhaitez.
Should I start from a template or with AI?
Partir d’un modèle est plus rapide si une structure existante vous convient. L’outil IA conçoit un squelette pratique d’après votre description textuelle, mais vous devez ensuite rattacher manuellement vos liens, photos et couleurs.
How many levels can a Navi+ menu have?
Avec le forfait Business, vous pouvez organiser vos catégories jusqu’à trois niveaux de profondeur. Par comparaison, le menu standard de Shopify autorise au maximum deux niveaux de sous-menus déroulants.
How do I turn a Navi+ menu off?
Vous pouvez désactiver n’importe quel menu à tout moment en passant son état sur Off dans le tableau de bord. Pour couper tous les menus sur un thème, désactivez Store Connector dans les intégrations d’applications de l’éditeur de thème et enregistrez.
Why is my Navi+ menu not showing?
La cause principale est que l’intégration Store Connector a été activée sur un thème de travail non publié, ou que vous avez oublié d’enregistrer les changements. Lors d’un changement de thème, réactivez l’intégration sur le nouveau thème.
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
Explorez les sujets
Ce guide renvoie vers des articles ciblés — approfondissez chaque thème.