How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)

Vous avez créé votre navigation dans une application de menu, mais elle n’apparaît pas sur votre boutique. L’ajout d’un menu d’application à Shopify repose sur une règle fondamentale : le menu réside dans l’application, et non dans votre thème. Il n’apparaît qu’après avoir activé l’app embed du thème, publié dans l’application et configuré son emplacement.

Quick answer: how to add a menu from a menu app to your Shopify store

Un menu d’application réside dans l’app, et non dans Shopify Content > Menus, et n’apparaît qu’une fois relié à votre thème. Activez l’app embed, enregistrez, publiez dans l’app, choisissez l’emplacement, masquez le menu du thème et vérifiez la boutique en direct.

Suivez ces cinq étapes :

1. Dans l’administration Shopify, ouvrez Online Store > Themes > Customize, accédez à Theme settings > App embeds, activez votre application et cliquez sur Save.
2. Dans le tableau de bord de votre application de menu, cliquez sur publier pour déployer votre menu.
3. Choisissez l’emplacement : floating overlay, sélecteur CSS (insert/replace) ou bloc d’application.
4. Masquez ou dissociez le menu d’en-tête par défaut du thème pour éviter les doublons de navigation.
5. Prévisualisez les mises en page sur ordinateur et mobile, puis vérifiez la boutique en direct dans une fenêtre de navigation privée.

Si vous n’avez pas encore créé votre navigation, commencez par notre guide pas à pas pour application de création de menu.

Why a menu built in an app doesn’t appear on its own

Dans Shopify, vous gérez les liens natifs depuis Content > Menus, et les thèmes les affichent automatiquement via les paramètres de la section Header.

Les applications de menu conservent vos menus à l’intérieur de l’application. Selon la documentation pour développeurs Shopify, les blocs app embed sont désactivés par défaut après l’installation, et les thèmes n’incluent pas automatiquement les blocs d’application. L’installation d’une application ne place pas d’elle-même son menu sur votre vitrine. Vos menus dans Content > Menus restent là où ils sont.

L’éditeur intégré de Shopify permet à un élément de premier niveau d’avoir jusqu’à deux niveaux de menus déroulants imbriqués. Pour des mises en page au-delà des limites natives, les marchands créent le menu lui-même dans une application de menu de navigation.

Cette vidéo officielle de Shopify présente l’éditeur de menu intégré, qui fonctionne indépendamment de votre application de menu.

Step 1: Turn on the app embed in the theme editor

La première étape consiste à activer l’app embed de votre thème. Selon Shopify, les app embeds sont des éléments fournis par l’application qui flottent ou s’affichent en superposition dans votre thème.

Pour activer l’app embed :

1. Dans l’administration Shopify, ouvrez Online Store > Themes.
2. Cliquez sur Customize pour le thème que vous souhaitez modifier.
3. Dans la barre latérale, ouvrez Theme settings > App embeds.
4. Localisez votre application de menu dans la liste.
5. À côté de l’app embed, cliquez sur le bouton pour l’activer.
6. Cliquez sur Save.

Avant toute modification, dupliquez votre thème. Le Centre d’aide Shopify souligne que dupliquer votre thème permet d’annuler les modifications si nécessaire, et Helium conseille également de dupliquer votre thème actif en premier.

Les app embeds fonctionnent sur les thèmes vintage et Online Store 2.0. L’activation d’un embed n’affecte que le thème modifié ; les thèmes préliminaires ne mettent pas à jour la boutique en direct avant d’être publiés.

Step 2: Publish the menu inside the app

L’enregistrement de l’app embed du thème charge uniquement le script de l’application ; vous devez encore publier le menu dans le tableau de bord de l’application.

Les applications de menu séparent l’activation de l’embed et la publication. Par exemple, la documentation de Navi+ précise qu’après avoir activé l’embed Store Connector, “le processus n’est pas encore terminé”. Vous devez ouvrir l’application et cliquer sur Publish to website (ou le bouton de publication de votre application).

Avant de publier, vérifiez les règles de ciblage proposées par votre application (par exemple dans Navi+) :

• Device targeting: Afficher sur mobile, sur ordinateur ou sur les deux fenêtres d’affichage.
• Page group rules: Afficher le menu sur toutes les pages ou seulement sur certains groupes de pages.
• URL keyword filtering: Inclure ou exclure des termes spécifiques dans la barre d’adresse.

Si une règle exclut une page, votre menu n’y apparaîtra pas, même avec l’embed actif.

Step 3: Choose where the menu appears (embed, CSS selector or app block)

Concept illustration: inserting an app menu below the header versus replacing the theme menu with a CSS selector.

Une fois votre embed actif et votre menu publié, choisissez la méthode de raccordement à la mise en page de votre thème.

Floating menus (tab bar, floating button, drawer)

Les app embeds flottent ou s’affichent en superposition dans votre thème. Pour les barres d’onglets mobiles, boutons flottants ou tiroirs déroulants, vous devez seulement activer l’embed et publier dans l’app. Ces éléments flottant sur les pages, aucun point d’ancrage d’en-tête n’est requis.

Insert before, insert after or replace

Pour les en-têtes d’ordinateur ou les méga-menus, l’application se fixe à l’aide d’un sélecteur CSS identifiant un élément du thème.

Certaines applications, comme Navi+, proposent trois modes :

• Insert Before: Place le menu directement au-dessus de l’élément sélectionné.
• Insert After: Affiche le menu directement en dessous de l’élément sélectionné.
• Replace: Remplace intégralement l’élément sélectionné par le menu de l’application.

Navi+ permet d’ajouter un suffixe afin que le sélecteur cible spécifiquement le mobile, l’ordinateur ou les deux.

App block inside a theme section

La troisième méthode consiste à ajouter un bloc d’application dans une section du thème. Les blocs d’application nécessitent des thèmes compatibles, et Shopify décrit la prise en charge pour les sections faisant partie d’un modèle JSON. Dans Navi+, le bloc “Menu in Section” s’applique uniquement aux méga-menus et menus en grille, et non aux barres d’onglets ou boutons flottants.

Step 4: Hide the theme’s default menu so you don’t see two

L’ajout d’un menu d’application peut entraîner une double navigation si les liens natifs d’en-tête restent visibles. L’installation d’une application ne masquant pas le code du thème, vous devez masquer ou remplacer le menu natif.

Éliminez les menus en double de deux manières :

1. Use Replace mode: Lorsqu’il est pris en charge, le mode Replace permute automatiquement l’élément du thème sélectionné.
2. Change theme settings: Dans l’éditeur de thème, ouvrez Header. Shopify indique que vous pouvez modifier le menu principal par défaut sur la plupart des thèmes en ajustant les paramètres de la section Header ; supprimez-y l’attribution du menu.

Ne supprimez jamais vos listes de liens dans Content > Menus ; les conserver préserve les liens de pied de page et offre une solution de secours.

En mode Replace, un bref clignotement du menu original peut survenir pendant l’initialisation du script. Sur mobile, masquez le bouton hamburger du thème si votre application fournit son propre tiroir de navigation.

Step 5: Preview on desktop and mobile, then check the live store

L’aperçu dans l’outil de personnalisation de Shopify ne suffit pas. La documentation d’Helium rappelle que les menus ne s’affichent pas toujours fidèlement dans l’outil de personnalisation, nécessitant un test direct en ligne.

Pour valider votre navigation :

1. Ouvrez l’URL de votre boutique en ligne dans une fenêtre de navigation privée pour observer la page comme un visiteur.
2. Testez sur les écrans d’ordinateur en examinant les menus déroulants, les panneaux de méga-menu et les survols.
3. Testez sur un smartphone en vérifiant les zones tactiles, les tiroirs mobiles et l’espacement de la barre d’onglets inférieure.
4. Cliquez sur les liens de navigation pour vous assurer que les catégories et les produits s’ouvrent convenablement.

Si vous avez configuré des menus distincts pour ordinateur et mobile, vérifiez que chaque écran déclenche uniquement le menu prévu. Si vous avez effectué vos tests sur un thème dupliqué, publiez-le après vérification.

App menu not showing? A diagnostic checklist

Concept illustration: a menu that is not showing (app embed off, wrong theme, two menus) versus one correct app menu live on the store.

Si un menu d’application n’apparaît pas, consultez cette liste de diagnostic :

Si votre menu ne s’affiche toujours pas, contactez le support de votre application de menu pour examiner les éventuelles difficultés d’affichage propres à l’application.

When you change or update your theme

Lorsque vous changez de thème ou appliquez une mise à jour, les menus de l’application ne sont pas transférés automatiquement. Comme l’indique le guide du Centre d’aide Shopify sur les applications de thème, les applications ne sont pas actives par défaut sur un nouveau thème et doivent être réactivées.

Suivez cette séquence lors du changement ou de la mise à niveau d’un thème :

1. Re-enable app embed: Dans l’éditeur de votre nouveau thème, ouvrez App embeds, activez votre application et cliquez sur Save.
2. Re-add app blocks: Réinsérez les blocs de section, car les nouveaux thèmes n’intègrent pas automatiquement les blocs d’application.
3. Audit CSS selectors: Les classes d’en-tête diffèrent d’un thème à l’autre ; mettez à jour votre sélecteur ou consultez les menus Navi+ sur les thèmes Shopify populaires.
4. Hide default menu: Dans les paramètres Header, retirez l’attribution du menu par défaut pour éviter un double affichage.
5. Test on duplicate theme: Effectuez les ajustements sur un thème dupliqué avant de le publier en ligne.

Trade-offs: when the theme’s own menu is enough

Les applications de menu tierces offrent une grande souplesse visuelle, mais ne sont pas indispensables à toutes les boutiques. Si votre catalogue est simple, l’éditeur intégré de Shopify dans Content > Menus constitue souvent le choix le plus pratique. Les menus natifs prennent en charge jusqu’à deux niveaux de menus déroulants imbriqués, ce qui peut suffire pour un catalogue ciblé. Ils ne dépendent d’aucun app embed, évitant toute réactivation lors des mises à jour de thème.

L’utilisation d’une application tierce impose certaines considérations :

• Maintenance: Les changements de thème nécessitent de réactiver les embeds et de vérifier les sélecteurs CSS.
• Initial page load: Le remplacement par sélecteur CSS peut parfois provoquer un court clignotement du menu d’origine lors du chargement du script.
• Platform limits: Les environnements comme Shopify Canvas ne prennent pas encore en charge les extensions d’application de thème.

Consultez notre guide pour choisir le bon type de menu afin de déterminer si votre boutique nécessite une application ou si la navigation native suffit.

Example: putting a Navi+ menu live

Pour illustrer concrètement ces étapes, examinons la publication de menus avec Navi+. Navi+ prend en charge les Tab Bars mobiles, menus déroulants mobiles, Floating Buttons et méga-menus pour ordinateur grâce aux extensions d’application de thème standard de Shopify.

Pour une Tab Bar, un Mobile Menu ou un Floating Button sur mobile :

1. Dans l’administration Shopify, ouvrez Online Store > Themes > Customize.
2. Dans la barre latérale, ouvrez App embeds, activez Store Connector et cliquez sur Save.
3. Dans Navi+, ouvrez votre menu et cliquez sur Publish to website.
4. Configurez les règles d’affichage par appareil, groupe de pages ou mots-clés d’URL.

Pour un Desktop Mega Menu :

1. Dans Navi+, sélectionnez Insert Before, Insert After ou Replace.
2. Saisissez le sélecteur CSS de l’en-tête, en ajoutant un suffixe mobile ou bureau si nécessaire.
3. Sur les thèmes Online Store 2.0 avec modèles JSON, vous pouvez également utiliser le bloc d’application Menu in Section (pour méga-menus et menus en grille).

Si votre boutique reçoit du trafic, effectuez vos tests sur un thème dupliqué afin de valider vos agencements en toute sécurité.

Le guide de publication de Navi+ pour chaque type de menu détaille l’ensemble de ces étapes avec des captures d’écran. Consultez la documentation de publication de la Tab Bar Navi+ ou le guide de publication du méga-menu Navi+ pour mettre votre agencement en ligne en toute sérénité.

Action checklist

Utilisez cette liste de contrôle pour garantir un lancement sans accroc de votre menu d’application :

• Duplicate your active theme for safe testing.
• In Theme settings > App embeds, toggle your app on and click Save.
• Return to your menu app dashboard and click publish.
• Verify device targeting and page group rules.
• Select placement: floating overlay, CSS selector (insert/replace), or app block.
• Hide or unassign the default menu in Header settings.
• Preview navigation across desktop and mobile screens.
• Test your live storefront in an incognito window.
• Click category and product links to verify destinations.
• Document CSS selectors to re-apply after theme updates.

FAQ

Do I need to enable an app embed?

Oui, dans la plupart des cas. Shopify stipule que les blocs d’application intégrés sont désactivés par défaut après l’installation, vous devez donc les activer dans l’éditeur de thème via Theme Settings > App embeds et cliquer sur Save.

Why is my app menu not showing after I created it?

La raison la plus fréquente est que l’app embed n’a pas été activé et enregistré sur votre thème en ligne actuel, ou que le menu n’a pas encore été publié dans le tableau de bord de l’application ; vérifiez notre tableau de diagnostic pour contrôler les règles d’affichage et les sélecteurs.

Does a menu app delete my Shopify navigation menu?

Non. Vos liens de navigation natifs restent intacts dans Content > Menus au sein de votre panneau d’administration Shopify, et la section Header de votre thème sélectionne simplement la liste de menu à afficher.

Will my app menu still work if I change themes?

Vous devrez réactiver l’app embed dans votre nouveau thème, car les applications ne sont pas actives par défaut sur les thèmes nouvellement publiés, et éventuellement mettre à jour les sélecteurs CSS si la structure de l’en-tête diffère.

Can I use a menu app on a vintage theme?

Oui, les app embeds sont pris en charge à la fois sur les thèmes vintage et Online Store 2.0, bien que les blocs d’application ne puissent être utilisés que sur des thèmes compatibles dotés de modèles JSON.

Why can’t I find the app embed in my theme?

Si votre thème a été créé ou dupliqué dans Shopify Canvas, les extensions d’application de thème — y compris les app embeds et les app blocks — ne sont pas encore prises en charge.

Sources

• Shopify Help Center: Apps and theme architecture
• Shopify Developer Documentation: Theme app extension configuration
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Duplicating themes
• Shopify Developer Documentation: App blocks
• Shopify Developer Community: Meet Canvas and theme app extensions
• Shopify Community: Qikify Mega Menu for Prestige theme thread
• Helium Dev Help Center: Installing Meteor on your storefront
• Navi+ Help Center: Tab Bar publishing on Shopify
• Navi+ Help Center: Mega Menu desktop publishing on Shopify
• Navi+ Help Center: Why does Navi+ not display FAQ