Add a mega menu to Shopify's Grid theme — Navi+ setup
Sur la boutique de démonstration en direct : le Slide Menu se connecte au hamburger existant (button[aria-label*='menu' i]) et masque le tiroir natif (nav[class*='mobile']) — aucun changement visible pour les acheteurs; Le Mega Menu se monte en mode remplacement en ciblant .navigation-desktop. Le tableau des sélecteurs et les guides de configuration ci-dessous sont spécifiques à ce thème.
1 Analyse du thème
generic correspond à l'attendu2 Anatomie de la navigation — carte des sélecteurs
Sélecteurs confirmés uniques (matchCount = 1) sur le magasin de démo en direct. Rôle présent uniquement s'il a été trouvé.
| Rôle | Sélecteur CSS | Plateforme | Utilisé pour |
|---|---|---|---|
| Cibles de montage de Navi+ | |||
| Déclencheur de menu hamburger | button[aria-label*='menu' i] |
Mobile | Navi+ se lie ici pour activer le Slide Menu |
| En-tête | .header-branding-mobile |
Mobile + Bureau | Insérer le Mega Menu sous l'en-tête de Grid |
| Menu principal | .navigation-desktop |
Bureau | Le Mega Menu de Navi+ remplace le contenu de la navigation de bureau |
| Logo | .logo-link |
Mobile + Bureau | Secours — insérer l'icône de déclenchement avant le logo quand il n'y a pas de hamburger |
| Déclencheurs de panneau | |||
| Déclencheur de menu hamburger | button[aria-label*='menu' i] |
Mobile | Appuyez pour ouvrir le tiroir mobile natif |
| Icône de recherche | .search-toggle |
Mobile + Bureau | Appuyez pour ouvrir le panneau/superposition de recherche |
| Icône du panier | a[class*='cart'] |
Mobile + Bureau | Appuyez pour ouvrir le tiroir/panneau de panier |
Ajouter une Navi+ Tab Bar au thème Shopify Grid
Une Tab Bar épingle une bande de navigation fixe en bas de l'écran sur mobile — exactement où repose le pouce. Les clients Grid accèdent à votre menu, recherche et panier depuis n'importe quelle page sans faire défiler jusqu'à l'en-tête.
- Navigation de style application — une sensation native pour le web mobile
- Accès au panier en un seul coup pour augmenter le taux de paiement mobile
- Situé sous l'en-tête Grid — ne rivalise jamais avec la navigation propre du thème
Le champ Link de chaque onglet accepte une URL normale, open:NaviMenu(EMBED_ID) pour ouvrir un autre menu Navi+, ou une action d'ouverture intégrée qui déclenche les propres panneaux de Grid. Navi+ garde le tiroir, la recherche et le panier du thème — l'onglet les ouvre simplement.
button[aria-label*='menu' i].search-togglea[class*='cart']- Dans Navi+, créez un nouveau menu et choisissez Tab Bar.
- Ajoutez vos onglets — nom, icône, badge de comptage du panier et lien pour chacun (par ex. Accueil, Boutique, Recherche, Panier, Menu).
- Pour ouvrir le tiroir natif de Grid, la recherche ou le panier, définissez le lien d'onglet sur l'action d'ouverture correspondante. Pour ouvrir un menu Slide ou Mega de Navi+ à la place, utilisez
open:NaviMenu(EMBED_ID). - Ouvrez Publish, activez le mode sticky, et définissez le filtre d'appareil sur Mobile.
Remplacez le tiroir mobile Grid par un Menu Slide Navi+
Un Menu Slide remplace le tiroir mobile par défaut de Grid par un panneau multi-niveaux plus riche — icônes, images et regroupement personnalisé — ouvert par le même hamburger que vos clients utilisent déjà.
- Navigation multi-niveaux illimitée avec icônes et images
- Même bouton, même position — les clients ne remarquent pas l'échange
- Idéal pour les catalogues avec de nombreuses collections à organiser sur mobile
Le déclencheur hamburger button[aria-label*='menu' i] a été confirmé unique sur la démo en direct Grid, donc Navi+ ouvre le Menu Slide depuis le bouton exact que les clients appuient déjà.
- Dans Navi+, créez un nouveau menu et choisissez Slide Menu.
- Ajoutez vos catégories avec icônes, couleurs, images et autant de niveaux que vous le souhaitez.
- Ouvrez Publish, activez le menu, puis définissez le déclencheur sur
button[aria-label*='menu' i]— le sélecteur hamburger de Grid. - Enregistrez. Le Menu Slide s'ouvre désormais depuis ce bouton. Ajoutez
(M)pour le garder mobile uniquement.
Ajouter un Menu Grille Navi+ au thème Grid
Un Menu Grille affiche vos collections en grille d'images — un lanceur de style application qui permet aux clients de sauter directement vers n'importe quelle collection en un seul coup.
- Visuel, axé sur l'image — les clients voient la collection avant de lire son nom
- Aucun sélecteur Grid requis pour le montage
- Excellent pour les magasins avec de nombreuses collections à parcourir rapidement
Un Menu Grille peut être inséré à un endroit fixe dans n'importe quelle page Grid (pointez-le vers un sélecteur CSS), ou ouvert à la demande depuis un FAB ou un onglet Tab Bar — votre choix.
- Dans Navi+, créez un nouveau menu et choisissez Grid Menu.
- Ajoutez des collections : image miniature, nom d'affichage et lien, ordonnés comme vous voulez qu'ils apparaissent sur la grille.
- Dans Publish, activez la méthode Insert/Replace, entrez le sélecteur CSS cible, et choisissez Insert After ou Replace.
- Préférez une pop-up ? Ignorez le sélecteur et ouvrez-le depuis un FAB ou un onglet avec
open:NaviMenu(EMBED_ID).
Ajouter un bouton flottant Navi+ (FAB) au thème Grid
Un FAB (Bouton d'Action Flottant) est un bouton flottant qui reste visible pendant le défilement — un raccourci rapide vers n'importe quelle page ou action. Aucun sélecteur de thème, déployé en minutes.
- Ne fait jamais conflit avec aucune partie de Grid
- Flexible : lien vers le panier, une page de contact, une promo, n'importe quelle URL
- Fonctionne sur bureau et mobile
Un FAB se monte complètement seul — aucun sélecteur CSS du thème Grid requis. Configurez-le et publiez sans tester aucun sélecteur.
- Dans Navi+, créez un nouveau menu et choisissez FAB.
- Choisissez l'icône, la couleur de fond et la taille — utilisez une icône intégrée ou téléchargez la vôtre.
- Choisissez une position : bas-droit (le plus courant), bas-gauche, ou tout coin fixe.
- Définissez l'action : lien vers une collection, panier, page de contact ou promo, ou ouvrez un autre menu (Grille, Slide…) avec
open:NaviMenu(EMBED_ID). - Ouvrez Publish et activez le mode sticky. Le FAB fonctionne sur tous les appareils.
Ajouter un Menu Mégaphone Mobile Navi+ au thème Grid
Sur mobile, un Menu Mégaphone apparaît comme un panneau multi-niveaux — permettant aux clients de parcourir tout votre catalogue sur un téléphone avec une hiérarchie claire, des images et des bannières.
- Menu multi-niveaux avec icônes et images sur petits écrans
- Ouvrez-le sous l'en-tête ou depuis un onglet Tab Bar
- Excellent quand un magasin a de nombreuses catégories à afficher sur mobile
Un Menu Mégaphone Mobile est un menu Section. Insérez-le directement sous l'en-tête Grid, ou ouvrez-le depuis un onglet Tab Bar — les deux fonctionnent sans se lier au propre menu du thème.
- Dans Navi+, créez un nouveau menu, choisissez Mega Menu, et concevez les colonnes multi-niveaux (catégories, images en vedette, bannières).
- Dans Publish, activez la méthode Insert/Replace, entrez
header(M)et choisissez Insert After — le menu s'affiche sous l'en-tête mobile. - Préférez l'ouvrir depuis un onglet ? Laissez-le non publié ici et pointez un onglet Tab Bar "Menu" vers lui avec
open:NaviMenu(EMBED_ID). - Gardez le filtre d'appareil sur Mobile.
Insérer un Menu Mégaphone Navi+ sous l'en-tête Grid
Insérez un Menu Mégaphone sous l'en-tête — une barre déroulante multi-colonnes qui apparaît directement sous l'en-tête Grid au survol, sans aucun changement au Liquid du thème.
- Déroulante multi-colonnes avec images et liens en vedette
- Laisse le propre menu du thème intact — les deux menus coexistent
- La façon la plus propre de monter quand le thème supporte l'insertion
Grid n'est pas headerInsertSafe — insérer sous l'en-tête peut causer un débordement horizontal. Utilisez le mode de remplacement à la place (voir ci-dessous).
- Dans Navi+, créez un nouveau menu, choisissez Mega Menu, et concevez les colonnes déroulantes (catégories, images en vedette, produits, bannières).
- Dans Publish, activez la méthode Insert/Replace.
- Entrez le sélecteur
.header-branding-mobile(D)et choisissez Insert After — la barre mégaphone apparaît directement sous l'en-tête Grid. - Le suffixe d'appareil
(D)le garde bureau uniquement.
Remplacer le menu bureau Grid par un Menu Mégaphone Navi+
Le mode de remplacement échange le menu natif à l'intérieur de l'en-tête entièrement — Navi+ rend directement dans ce conteneur, gardant intacte la disposition de l'en-tête Grid.
- Garde la place du menu dans l'en-tête — aucune barre supplémentaire ajoutée
- Meilleur quand vous ne voulez pas deux rangées de navigation
- Fonctionne sur tout thème, même sans
headerInsertSafe
Le sélecteur menu-principal .navigation-desktop a été confirmé — Navi+ rend le Menu Mégaphone exactement où le menu natif siège dans l'en-tête Grid.
- Dans Navi+, créez un nouveau menu, choisissez Mega Menu, et concevez les colonnes déroulantes.
- Dans Publish, activez la méthode Insert/Replace.
- Entrez le sélecteur nav bureau
.navigation-desktop(D)et choisissez Replace — Navi+ rend à la place du menu Grid natif. - Après avoir choisi Replace, optimisez pour un chargement sans scintillement — voir le guide de publication.
Insérer une icône de déclencheur avant le logo Grid
Ajoutez une icône de déclencheur avant le logo — un hamburger personnalisé juste à côté du logo Grid pour les thèmes sans hamburger mobile par défaut, ou comme un deuxième point d'entrée vers votre menu Slide / Mégaphone.
- Crée un nouveau point de déclenchement sans éditer Liquid
- Placement naturel — juste à côté du logo, familier aux clients
- Excellent pour les thèmes desktop-first sans hamburger mobile
Le sélecteur logo .logo-link a été confirmé sur Grid, donc Navi+ peut insérer une icône de déclencheur juste avant.
- Un modèle avancé — pour les thèmes sans hamburger mobile, ou pour ajouter un deuxième point d'entrée.
- Construisez un petit menu à un seul élément (un Mégaphone/Slide à un élément) dont l'élément ouvre votre Menu Slide principal avec
open:NaviMenu(EMBED_ID). - Dans Publish, activez la méthode Insert/Replace, entrez
.logo-link(M)et choisissez Insert Before — l'icône s'affiche avant le logo Grid. - Un petit CSS personnalisé l'aligne ; contactez le support si vous avez besoin d'un coup de main.
11 Comment ajouter un menu Navi+ à Grid
Chaque type de menu sur cette page suit les mêmes trois étapes. Activez l'application une seule fois — ensuite, chaque nouveau menu est simplement une question de design et publication. Aucune édition de Liquid requise.
- Activez Navi+ une fois. Dans l'administrateur Shopify, accédez à Online Store → Themes → Customize → App embeds et activez Navi+. Cela charge l'application sur la vitrine Grid et couvre tous les menus que vous créez. Guide d'installation →
- Concevez le menu dans l'éditeur Navi+ — éléments, icônes, images, colonnes et couleurs.
- Publiez-le. Ouvrez le panneau Publish du menu. Les menus flottants (Tab Bar, FAB) n'ont besoin que du bouton de publication ; les menus de diapositives et de section pointent vers un sélecteur CSS du tableau ci-dessus.
Ajoutez (M) ou (D) à n'importe quel sélecteur pour cibler uniquement mobile ou bureau — par ex. header(D). Vous n'êtes pas sûr du sélecteur ? Ouvrez yourstore.com/#navidebug-on, survolez un élément et appuyez sur Ctrl/Cmd + C pour le copier.
Tests d'interaction en direct
Playwright clique automatiquement dans le magasin de démo Grid en direct et capture le résultat.
Questions fréquemment posées — Navi+ sur le thème Shopify Grid
Comment ajouter un menu Navi+ au thème Shopify Grid ?
Comment ajouter une tab bar au thème Shopify Grid ?
a[class*='cart']).Comment ajouter un menu mégaphone au thème Shopify Grid ?
.navigation-desktop(D) avec Replace — aucune édition de code de thème requise.Comment remplacer le menu mobile Grid par un menu coulissant ?
button[aria-label*='menu' i]. Le menu coulissant s'ouvre alors depuis le bouton que les clients appuient déjà, remplaçant le tiroir natif.Dois-je éditer le code du thème Grid pour ajouter un menu ?
Navi+ fonctionne-t-il avec le thème Shopify Grid ?
Autres thèmes de la famille generic
Ajouter des menus Navi+ à d'autres thèmes Shopify
Référence des sélecteurs
Conteneurs de panneaux et sélecteurs supplémentaires — utilisés pour la détection d'état ou le masquage d'éléments natifs.
| Rôle | Sélecteur CSS | Plateforme | Utilisé pour |
|---|---|---|---|
| Tiroir coulissant | nav[class*='mobile'] |
Mobile | Tiroir natif — masqué lorsque le Slide Menu de Navi+ est actif |
| Modal de recherche | — | Mobile + Bureau | Conteneur du panneau de recherche — détecter l'état ouvert/fermé |
| Tiroir du panier | [class*='mini-cart'] |
Mobile + Bureau | Conteneur de tiroir de panier — détecter l'état ouvert/fermé |
| Menu mégaphone | — | Bureau | Aucun mega menu natif — Navi+ en insère un à la place |