Lorsque les commerçants recherchent une application de menu, ils trouvent souvent des tutoriels pour des cartes de restaurants plutôt que pour la navigation e-commerce—ce guide est exclusivement consacré à la navigation de boutique en ligne sur Shopify. Configurer une application de menu pour la première fois sur une boutique en activité peut sembler risqué, mais cet apprentissage ne requiert aucun code.
Esquissez vos catégories sur papier, entraînez-vous sur un thème dupliqué, concentrez-vous sur un seul type de menu à la fois et validez les zones tactiles sur un vrai smartphone avant de publier.
- S'entraîner sur un thème dupliqué : Une copie de sauvegarde protège vos ventes pendant que vous apprenez.
- Maîtriser un seul format d'abord : Choisissez un format unique—comme une barre d'onglets ou un tiroir—avant de multiplier les menus.
- Activer l'app embed : Vous devez activer l'app embed dans l'éditeur de thème pour que le menu puisse s'afficher.
Quick answer: how to get started with a Shopify menu builder app
Pour démarrer avec une application de menu Shopify, esquissez d’abord votre menu sur papier, choisissez un type de menu à apprendre, activez l’app embed dans l’éditeur de thème, créez quelques éléments, prévisualisez sur smartphone, puis publiez et vérifiez chaque lien :
- Step 1: Sketch your menu structure : Esquissez vos collections sur papier, puis organisez vos liens natifs dans Content > Menus.
- Step 2: Pick one menu type to learn first : Choisissez une Tab Bar, un Mobile Drawer ou un Mega Menu selon vos visiteurs.
- Step 3: Install the app and turn on the app embed : Installez l’application, activez le bouton app embed dans l’éditeur et enregistrez.
- Step 4: Build your first menu : Créez 4 à 5 éléments principaux avec des libellés clairs, des icônes et des liens de destination.
- Step 5: Match your brand : Harmonisez les couleurs d’arrière-plan, les polices et l’alignement avec votre thème.
- Step 6: Preview on a phone and a desktop : Testez les zones tactiles sur un thème dupliqué à l’aide d’un vrai smartphone.
- Step 7: Publish, check every link, and fix common problems : Publiez dans l’application et vérifiez vos liens en direct.
Si vous ne disposez que d’une heure, réalisez les étapes 1 à 3 et 6 sur un thème dupliqué.
Four terms to learn before you start
Avant d’ouvrir les écrans de réglages, familiarisez-vous avec ces cinq termes récurrents :
| Terme | Signification pratique | Emplacement visible |
|---|---|---|
| Menu | Une liste structurée de liens permettant d’organiser les accès aux produits, collections, pages et articles de blog (Shopify Help Center). | Dans Shopify Admin sous Content > Menus, ainsi que dans l’en-tête, le pied de page ou le tiroir. |
| Élément de menu / lien | Un composant cliquable menant vers une page, une collection, une URL externe ou une ancre fictive (#). |
Boutons, liens textuels ou onglets avec icônes. |
| Niveau (Level) | La profondeur hiérarchique de la navigation. Sur Shopify, un élément principal peut comporter jusqu’à deux niveaux de sous-menus déroulants (Shopify Help Center). | Menus déroulants, colonnes de méga menu et accordéons mobiles. |
| App embed | Un élément fourni par une application qui s’affiche en superposition sur votre thème sans modifier le code Liquid permanent (Shopify Help Center). | Dans la barre latérale de l’éditeur de thème Shopify, sous l’onglet App embeds. |
| Publier (Publish) | L’action qui rend votre menu visible aux clients. Activer l’app embed charge le script, mais certaines applications, dont Navi+, nécessitent aussi de cliquer sur publier dans leur tableau de bord. | Dans le tableau de bord de l’application ou les réglages du thème. |
Step 1: Sketch your menu structure before you open the app
N’ouvrez pas une application de menu sans plan préalable. Concevoir une arborescence directement dans un outil logiciel mène vite à la confusion. Préparez votre contenu sur papier.
Listez les destinations indispensables pour vos clients : collections phares, produits vedettes, pages d’information (À propos, Livraison, Contact) et blog (Shopify Help Center). Esquissez votre arborescence (sketch your menu structure) sous forme d’arbre à 2 ou 3 niveaux. Définissez 4 à 5 catégories majeures et regroupez les sous-collections en dessous.
Ouvrez ensuite l’administration Shopify dans Content > Menus (Shopify Help Center). Nettoyez vos menus par défaut, supprimez les liens obsolètes et vérifiez les URLs. Si un élément parent sert uniquement de groupe sans devoir ouvrir de page, insérez # dans le champ de lien (Shopify Help Center).
Respectez la discipline de Shopify : un élément principal prend en charge au maximum deux niveaux de sous-menus déroulants imbriqués (Shopify Help Center). Préparer vos liens dans Shopify Admin facilite grandement leur liaison future dans une application.
Shopify’s own video shows how to nest menu items :
Step 2: Pick one menu type to learn first
Les applications proposent de nombreux formats : barres d’onglets, méga menus, tiroirs coulissants et boutons flottants. Tout configurer dès la première session est une source d’erreurs. Choisissez un premier type de menu à maîtriser (pick one menu type) selon l’appareil le plus utilisé par vos visiteurs.
Figure 1 : Illustration conceptuelle (Concept illustration) — Step 2: Pick one menu type to learn first
Mobile shoppers first
Si la majorité de vos visiteurs naviguent sur smartphone, l’essentiel est un menu facile à repérer et à toucher sur mobile (voir la citation du Nielsen Norman Group plus bas). Pour les boutiques axées mobile, deux formats méritent d’être appris en premier :
- Tab Bar : Une barre de navigation ancrée en bas de l’écran du smartphone. Elle garde les destinations clés (Accueil, Boutique, Recherche, Panier) visibles dans une seule barre permanente.
- Mobile Drawer : Un panneau latéral coulissant qui se déploie au toucher, affichant clairement les arborescences de catégories et les accès au compte client.
Desktop shoppers first
Si vous gérez un vaste catalogue sur écran d’ordinateur où les acheteurs ont besoin d’une vue d’ensemble immédiate, privilégiez :
- Mega Menu : Un large panneau déroulant présentant simultanément plusieurs colonnes de catégories et d’images promotionnelles.
| Type de menu | Idéal lorsque | À apprendre en premier si |
|---|---|---|
| Tab Bar | Fort trafic mobile et ensemble ciblé d’actions courantes (Accueil, Boutique, Recherche, Panier). | Mobile shoppers first : la majorité des commandes provient des smartphones. |
| Mobile Drawer | Catalogue étendu avec sous-catégories nécessitant une navigation claire hors champ. | Mobile shoppers first : vous souhaitez remplacer un tiroir de thème étroit. |
| Mega Menu | Grand catalogue sur ordinateur nécessitant une vue d’ensemble visuelle des rayons. | Desktop shoppers first : les ordinateurs représentent votre principal volume de vente. |
Comme l’a souligné le Nielsen Norman Group dans ses recherches sur la découverte mobile : “visual salience, information scent, context, tappability signifiers, and user expectations also affect navigation discoverability on mobile devices” (Nielsen Norman Group).
Consultez notre comparatif pour savoir how to choose the right menu type selon votre catalogue, et découvrez comment déployer tab bars and hybrid mobile navigation. Choisissez un seul format pour aujourd’hui.
Step 3: Install the app and turn on the app embed
Installez l’application de menu de votre choix depuis le Shopify App Store. Une fois installée, elle apparaît dans Shopify Admin sous Apps, mais n’affiche encore aucun élément sur votre vitrine.
Les applications modernes s’appuient sur les app embeds. Selon Shopify, les app embeds sont des éléments fournis par l’application qui s’affichent en superposition sur votre thème (Shopify Help Center), sans altérer votre code Liquid.
Pour activer l’app embed (turn on the app embed) :
- Dans Shopify Admin, accédez à Online Store > Themes.
- Sélectionnez le thème de travail—idéalement un thème dupliqué (voir Étape 6)—puis cliquez sur Customize.
- Dans la barre latérale gauche, cliquez sur l’icône App embeds (Shopify Help Center).
- Repérez votre application et activez le commutateur sur Activé (On).
- Cliquez sur Enregistrer (Save) en haut à droite.
- Affichez l’aperçu pour voir l’application fonctionner en direct (Shopify Help Center).
La documentation Shopify précise que les app embeds fonctionnent avec toutes les versions de thème (Shopify Help Center). Cela ne signifie pas pour autant que chaque application tierce s’ajuste parfaitement à chaque mise en page personnalisée. Retenez cette règle essentielle : si vous changez de thème actif plus tard, vous devrez réactiver les applications dans votre nouveau thème (Shopify Help Center).
Pour approfondir le fonctionnement des extensions de thème, lisez notre analyse sur how app embeds work with your theme.
Step 4: Build your first menu: items, links, and icons
Ouvrez le tableau de bord de l’application dans Shopify Admin. Commencez par une structure modeste : créez 4 à 5 éléments principaux basés sur votre schéma de l’Étape 1.
Recommandations pratiques :
- Libellés explicites : Utilisez des noms simples comme “Nouveautés”, “Collections”, “Meilleures ventes” et “Aide”.
- Liens vers des destinations réelles : Reliez chaque élément à une collection ou page active. Ne pointez jamais vers des catégories vides.
- Icônes intuitives : Sur une Tab Bar mobile, associez chaque libellé à une icône claire (maison pour Accueil, loupe pour Recherche, panier pour Commandes) tout en conservant le texte pour l’accessibilité.
- Ajout progressif des sous-menus : Une fois le niveau principal validé, ajoutez des sous-liens. Rappelez-vous que Shopify autorise jusqu’à deux niveaux de sous-menus déroulants (Shopify Help Center).
- Connecter les menus Shopify existants : Beaucoup d’applications permettent de connecter directement vos menus de Content > Menus. Si votre application le propose, utilisez-le plutôt que de tout saisir à la main.
Note : Ce tutoriel est centré sur la prise en main d’un premier menu fonctionnel. La conception de méga menus élaborés avec bannières promotionnelles fait l’objet de guides avancés distincts.
Step 5: Match your brand: colors, fonts, and position
Un menu non personnalisé crée une rupture visuelle et nuit à la confiance des acheteurs. Adaptez votre nouveau menu pour l’intégrer au style de votre boutique.
Trois éléments stylistiques clés :
- Couleurs : Consultez les paramètres de votre thème et copiez les codes hexadécimaux de votre fond, en-tête et texte. Appliquez ces valeurs au fond du menu, aux bordures, aux icônes et à l’état actif. Assurez un contraste suffisant pour une lecture mobile en plein soleil.
- Polices et tailles : Utilisez la même typographie que le corps de texte de votre thème. Gardez sur smartphone des tailles de texte lisibles et faciles à toucher.
- Emplacement : Fixez une Tab Bar au bas de l’écran, faites glisser un Mobile Drawer depuis le bord gauche et alignez un Mega Menu sous l’en-tête principal.
Veillez à ce que le menu ne masque aucun élément natif, comme un bouton fixe “Ajouter au panier” ou une bulle de messagerie instantanée.
Consultez notre guide dédié pour make navigation feel like your store avec des techniques visuelles cohérentes.
Step 6: Preview on a phone and a desktop before you publish
Ne publiez jamais un menu directement sur votre boutique en direct sans phase de test. Respectez ces trois règles fondamentales :
Figure 2 : Illustration conceptuelle (Concept illustration) — Step 6: Preview on a phone and a desktop before you publish
- Duplicate theme first : Shopify recommande avant toute modification de “make a backup copy so that you can discard your changes and start again if you need to” (Shopify Help Center). Dans Online Store > Themes, dupliquez votre thème actif. Activez l’app embed et créez votre menu sur cette copie afin de ne pas perturber les clients en ligne.
- Tap every item : Ne vous fiez pas uniquement au simulateur de votre navigateur. Preview on a phone : ouvrez le lien d’aperçu sur un véritable smartphone. Tenez l’appareil d’une main et touchez chaque onglet et lien pour tester la réactivité tactile.
- Check the theme menu : Vérifiez si le menu natif de votre thème s’affiche en doublon. Comme l’affichage des menus dépend du thème (Shopify Help Center), vous devrez peut-être masquer le menu d’en-tête par défaut dans l’éditeur de thème.
Élargissez enfin votre navigateur pour valider l’affichage sur grand écran d’ordinateur.
Step 7: Publish, check every link, and fix common problems
Lorsque tous les tests sont concluants, vous êtes prêt à publier. Dans certaines applications, dont Navi+, activer l’app embed ne fait que charger le script ; vous devez cliquer sur un bouton de publication dédié dans le tableau de bord de l’application (Navi+ Help Center).
Check every link : Après publication, ouvrez une fenêtre de navigation privée et cliquez sur chaque lien de votre boutique en direct. En cas d’anomalie, reportez-vous à ce tableau de dépannage :
| Problème | Cause fréquente | Solution |
|---|---|---|
| Le menu n’apparaît pas | L’app embed n’est pas activé ou n’a pas été enregistré (Shopify Help Center), ou la publication n’a pas été effectuée dans l’application (Navi+ Help Center). | Allez dans Theme Editor > App embeds, activez le commutateur, cliquez sur Save, puis publiez dans l’application. |
| Le menu a disparu après un changement de thème | L’app embed n’a pas été réactivé sur le nouveau thème publié (Shopify Help Center). | Ouvrez Customize sur votre nouveau thème actif, allez dans App embeds, réactivez l’application et enregistrez. |
| Deux menus s’affichent en double | Le menu natif de l’en-tête du thème est toujours actif en parallèle (Shopify Help Center). | Dans la section d’en-tête de l’éditeur de thème, masquez le menu natif ou déplacez l’application vers un autre emplacement (comme une Tab Bar en bas). |
Si un problème d’affichage persiste, consultez la documentation officielle de l’application ou contactez son équipe d’assistance.
Trade-offs: when you don’t need a menu builder app yet
Une analyse rigoureuse doit rester objective : une application de menu n’est pas indispensable pour toutes les boutiques Shopify. Savoir quand les outils de base suffisent vous évite des manipulations superflues.
Si votre boutique présente un petit catalogue—par exemple un produit unique ou quelques articles—la navigation intégrée de Shopify dans Content > Menus suffit souvent (Shopify Help Center). Les menus par défaut prennent en charge jusqu’à deux niveaux de sous-menus déroulants (Shopify Help Center), offrant une solution légère sans outil externe.
Ajouter une application implique des compromis pratiques : un tableau de bord supplémentaire à gérer, un temps d’apprentissage et un app embed à réactiver à chaque changement de thème (Shopify Help Center).
Cependant, lorsque votre gamme s’élargit et que vous souhaitez une barre d’onglets fixe sur mobile, un tiroir coulissant structuré ou un méga menu avec visuels que votre thème ne peut pas créer, adopter une application spécialisée devient un excellent investissement.
Consultez notre dossier sur les Shopify theme menu limitations pour évaluer si votre catalogue dépasse les capacités de votre thème actuel.
What to learn next: Icon Menu, Floating Button, and seasonal menus
Une fois votre premier menu déployé et fiable en production, vous pouvez explorer des formats complémentaires :
- Icon Menu : Intégrez une rangée d’icônes rondes de collections sur votre page d’accueil pour accélérer la découverte visuelle des rayons.
- Floating Button (FAB) : Placez un bouton flottant dans un coin inférieur pour accéder directement au suivi de commande ou au service client.
- Menus saisonniers : Réorganisez temporairement vos rubriques lors du Black Friday ou des soldes, en mettant les sélections cadeaux en tête de liste.
Découvrez when an icon menu beats a text list pour la navigation visuelle, et suivez les retombées grâce aux 5 metrics worth tracking après mise en ligne.
Where Navi+ fits
Si vous recherchez une application permettant d’appliquer l’ensemble de ces étapes au sein d’un même outil intuitif, découvrez Navi+ Tab Bar & Mega Menu.
Navi+ est conçue pour les marchands Shopify souhaitant bâtir des barres d’onglets fixes, des méga menus, des tiroirs mobiles, des menus d’icônes et des boutons flottants via un éditeur en glisser-déposer (Shopify App Store). Vous pouvez connecter vos menus Shopify existants, utiliser des modèles préconfigurés et générer une structure plus rapidement grâce à l’assistance IA (Shopify App Store).
Navi+ propose un forfait gratuit pour commencer sereinement (Shopify App Store). Le flux de publication est simple : activez l’app embed “Store Connector” dans l’éditeur de thème Shopify, personnalisez votre menu, puis cliquez sur “Publish to website” dans Navi+ (Navi+ Help Center).
La documentation de Navi+ préconise explicitement la démarche sécurisée décrite ici : “The best practice is to create a duplicate Theme and test Navi+ on that version first” (Navi+ Help Center). Cela vous garantit des réglages parfaits sur smartphone avant que vos clients ne découvrent le résultat.
Action checklist: your first-session plan
Utilisez cette liste de contrôle lors de votre première session :
- Sketch your menu structure : Esquissez vos 4–5 catégories clés et sous-collections sur papier.
- Tidy Content > Menus : Supprimez les liens obsolètes dans Shopify Admin (Shopify Help Center).
- Duplicate theme first : Dupliquez votre thème actif pour tester sans risque (Shopify Help Center).
- Pick one menu type : Choisissez un seul format : Tab Bar, Mobile Drawer ou Mega Menu.
- Turn on the app embed : Activez l’app embed dans l’éditeur de thème et sauvegardez (Shopify Help Center).
- Build 4–5 core items : Définissez des libellés précis, des icônes claires et des liens actifs.
- Match colors/fonts : Harmonisez les codes couleurs et polices avec votre thème.
- Tap every item on a phone : Ouvrez l’aperçu sur smartphone et testez chaque bouton.
- Publish and check every link : Publiez depuis l’application et testez vos liens en ligne (Navi+ Help Center).
- Re-check after theme changes : Réactivez l’app embed si vous changez de thème à l’avenir (Shopify Help Center).
Si vous souhaitez pratiquer ces étapes dans une seule application, Navi+ Tab Bar & Mega Menu propose un forfait gratuit, des modèles prêts à l’emploi et peut connecter vos menus Shopify existants — commencez sur un thème dupliqué et publiez quand vous êtes satisfait.
FAQ
Quel type de menu créer en premier ?
Commencez par le format adapté au terminal le plus utilisé par vos clients : une Tab Bar ou un Mobile Drawer sur smartphone, ou un Mega Menu sur ordinateur.
Faut-il modifier les menus Shopify au préalable ?
Un tri préalable dans Content > Menus est conseillé (Shopify Help Center) ; des applications comme Navi+ peuvent ensuite se connecter directement à vos menus existants (Shopify App Store).
Comment activer un app embed sur Shopify ?
Dans l’éditeur de thème, cliquez sur l’icône App embeds dans la barre latérale gauche, basculez l’interrupteur sur On et cliquez sur Save (Shopify Help Center).
Pourquoi l’application de menu ne s’affiche-t-elle pas ?
Les causes courantes sont un app embed non activé ou non enregistré (Shopify Help Center), un app embed inactif suite à un changement de thème (Shopify Help Center), ou l’absence de publication dans l’application (Navi+ Help Center).
Puis-je tester sans que les clients ne le voient ?
Oui. Dupliquez votre thème, activez l’app embed sur cette copie et testez sur votre téléphone avant de publier sur votre thème actif (Shopify Help Center ; Navi+ Help Center).
Combien de niveaux un menu déroulant Shopify peut-il comporter ?
Dans les menus standards de Shopify, un élément principal peut comporter jusqu’à deux niveaux de sous-menus déroulants imbriqués (Shopify Help Center).
Sources
- Shopify Help Center: Set up drop-down menus in your online store
- Shopify Help Center: Menus and links
- Shopify Help Center: App embeds and theme extensions
- Shopify Help Center: Duplicating themes
- Nielsen Norman Group: Mobile Navigation Discoverability
- Navi+ Help Center: Publishing on Shopify
- Shopify App Store: Navi+ Tab Bar & Mega Menu
Explorez les sujets
Ce guide renvoie vers des articles ciblés — approfondissez chaque thème.