Add a mega menu to Shopify's Origin theme — Navi+ setup
Origin est le thème de référence gratuit de Shopify pour Online Store 2.0 (famille dawn). Cette page documente les sélecteurs de navigation trouvés sur la boutique de démonstration en direct et la configuration recommandée pour chaque type de menu Navi+.
1 Analyse du thème
dawn 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+ | |||
| En-tête | .section-header |
Mobile + Bureau | Insérer le Mega Menu sous l'en-tête de Origin |
| Logo | .header__heading-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 | |||
| Icône de recherche | .header__icon--search |
Mobile + Bureau | Appuyez pour ouvrir le panneau/superposition de recherche |
| Icône du panier | #cart-icon-bubble |
Mobile + Bureau | Appuyez pour ouvrir le tiroir/panneau de panier |
Ajouter une Navi+ Tab Bar au thème Shopify Origin
Une Tab Bar épingle une bande de navigation fixe en bas de l'écran sur mobile — exactement où repose le pouce. Les clients Origin 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 Origin — 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 Origin. Navi+ garde le tiroir, la recherche et le panier du thème — l'onglet les ouvre simplement.
.header__icon--search#cart-icon-bubble- 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 Origin, 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 Origin par un Menu Slide Navi+
Un Menu Slide remplace le tiroir mobile par défaut de Origin 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
Aucun déclencheur hamburger standard n'a été détecté sur la démo Origin — le thème peut utiliser un sélecteur non-standard. Récupérez le bon avec le Mode Débogage de Navi+ sur votre propre magasin.
- Dans Navi+, créez un nouveau menu et choisissez Slide Menu.
- Ajoutez vos catégories avec icônes, images et plusieurs niveaux.
- Ouvrez Publish, activez le menu, puis entrez le sélecteur CSS hamburger de votre thème comme déclencheur.
- Enregistrez — le Menu Slide s'ouvre depuis ce bouton.
Ajouter un Menu Grille Navi+ au thème Origin
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 Origin 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 Origin (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 Origin
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 Origin
- 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 Origin 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 Origin
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 Origin, 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 Origin
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 Origin 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
Origin 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
.section-header(D)et choisissez Insert After — la barre mégaphone apparaît directement sous l'en-tête Origin. - Le suffixe d'appareil
(D)le garde bureau uniquement.
Remplacer le menu bureau Origin 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 Origin.
- 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
Aucun sélecteur menu-principal n'a été détecté sur la démo en direct Origin — entrez-le manuellement (trouvez-le avec le Mode Débogage de Navi+).
- 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
nav.header__inline-menu ul.list-menu(D)et choisissez Replace — Navi+ rend à la place du menu Origin 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 Origin
Ajoutez une icône de déclencheur avant le logo — un hamburger personnalisé juste à côté du logo Origin 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 .header__heading-link a été confirmé sur Origin, 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
.header__heading-link(M)et choisissez Insert Before — l'icône s'affiche avant le logo Origin. - Un petit CSS personnalisé l'aligne ; contactez le support si vous avez besoin d'un coup de main.
11 Comment ajouter un menu Navi+ à Origin
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 Origin 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 Origin en direct et capture le résultat.
Questions fréquemment posées — Navi+ sur le thème Shopify Origin
Comment ajouter un menu Navi+ au thème Shopify Origin ?
Comment ajouter une tab bar au thème Shopify Origin ?
#cart-icon-bubble).Comment ajouter un menu mégaphone au thème Shopify Origin ?
nav.header__inline-menu ul.list-menu(D) avec Replace — aucune édition de code de thème requise.Dois-je éditer le code du thème Origin pour ajouter un menu ?
Navi+ fonctionne-t-il avec le thème Shopify Origin ?
Autres thèmes de la famille dawn
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 | — | Mobile | Tiroir natif — masqué lorsque le Slide Menu de Navi+ est actif |
| Modal de recherche | .search-modal |
Mobile + Bureau | Conteneur du panneau de recherche — détecter l'état ouvert/fermé |
| Tiroir du panier | cart-drawer |
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 |