Publication sur Shopify
Étape 2 : (Shopify) Publiez le menu sur votre site web.
I) MÉTHODE 1 : INSÉRER (AVANT OU APRÈS) CE MENU À UN ENDROIT SPÉCIFIQUE DE VOTRE SITE WEB, OU REMPLACER UN MENU EXISTANT, EN UTILISANT UN SÉLECTEUR CSS. (RECOMMENDÉ)
I.1. Activez Navi+ sur les intégrations d’applications
Étape 1 : Cliquez sur Boutique en ligne, puis cliquez sur Thèmes. Conseils : Faites un clic droit sur Boutique en ligne et sélectionnez “Ouvrir le lien dans un nouvel onglet” pour gagner du temps.
Étape 2 : Sélectionnez le thème où vous souhaitez publier le menu. Cliquez : Personnaliser
- Si votre site web est nouveau et n’a pas encore d’utilisateurs, n’hésitez pas à publier le menu sans souci — vous pouvez facilement l’activer ou le désactiver à tout moment sans affecter les visiteurs.
- Si votre site web a déjà un trafic régulier, soyez plus prudent. La meilleure pratique consiste à créer un Thème dupliqué et à tester Navi+ sur cette version d’abord.
Étape 3 : Allez dans les intégrations d’applications, trouvez “Navi+ sur toutes les pages”, et activez-le.
Étape 4 : N’oubliez pas de cliquer sur “Enregistrer” pour appliquer les modifications.
Après ces 4 étapes, Navi+ a été installé sur votre site web et est prêt à s’afficher. Cependant, le processus n’est pas encore complet. Retournez à l’onglet de l’application Navi+ pour réellement activer Publier le menu.
I.2. Comprendre le sélecteur CSS
Un sélecteur CSS est un moyen de cibler un élément HTML spécifique sur votre page web. Navi+ l’utilise pour savoir exactement où placer votre menu — que ce soit pour l’insérer avant ou après un élément, ou pour remplacer complètement un existant.
Pour trouver le sélecteur CSS correct pour votre site web, vous pouvez utiliser :
- Mode Débogage — l’outil intégré de Navi+ : survolez n’importe quel élément et copiez instantanément son sélecteur
- Outils de développement du navigateur — méthode manuelle utilisant l’inspecteur de votre navigateur
Comment trouver le sélecteur CSS en utilisant les Outils de développement du navigateur
Vous pouvez discuter avec un supporter de Navi+ pour obtenir une aide instantanée au lieu de le faire vous-même. Cependant, si vous souhaitez le faire par vous-même, suivez les captures d'écran ci-dessous.
I.3. Trois options de publication
Étape 1 : Cliquez sur le bouton Publier sur le site web.
Étape 2 : Activez le commutateur “Publier le menu par méthode d’insertion/remplacement”.
Étape 3 : Entrez votre sélecteur CSS et choisissez l’une des trois options de publication ci-dessous.
Option 1 : Insérer Avant (le plus courant pour le Menu Grille)
Insère le menu Navi+ immédiatement avant l'élément sélectionné.
Exemple : Sélecteur CSS main → le Menu Grille apparaît au-dessus de la zone de contenu principal de la page.
Sélecteurs CSS courants pour les thèmes Shopify (Dawn, Sense, Savor, Horizon) :
main— la plupart des thèmes Shopify#MainContent— thème Shopify Dawn
Pas dans cette liste ? Discutez avec un supporter de Navi+, ou utilisez Mode Débogage ou Outils de développement du navigateur.
Option 2 : Insérer Après
Insère le menu Navi+ immédiatement après l'élément sélectionné.
Exemple : Sélecteur CSS header → le Menu Grille apparaît juste en dessous de l'en-tête.
Sélecteurs CSS courants pour les thèmes Shopify (Dawn, Sense, Savor, Horizon) :
header— la plupart des thèmes Shopify.header-wrapper— certains thèmes
Pas dans cette liste ? Discutez avec un supporter de Navi+, ou utilisez Mode Débogage ou Outils de développement du navigateur.
Option 3 : Remplacer
Sur la plupart des boutiques Shopify, il n'y a pas d'élément Menu Grille intégré à remplacer. Insérer Avant main est l'approche recommandée.
Si votre thème a un élément de style grille que vous souhaitez remplacer, utilisez Mode Débogage ou Outils de développement du navigateur pour trouver son sélecteur.
I.4. Ciblage spécifique aux appareils
Vous pouvez contrôler si le sélecteur CSS s’applique sur mobile, bureau, ou les deux en ajoutant un suffixe :
| Suffixe | S’applique à |
|---|---|
(M) |
Mobile uniquement |
(D) |
Bureau uniquement |
| (aucun) | Mobile et bureau |
Exemples : main(D) — bureau uniquement · main(M) — mobile uniquement · main — les deux plateformes.
II) MÉTHODE 2 : AJOUTEZ CE MENU EN TANT QUE SECTION/BLOC DANS LE THÈME SHOPIFY
Cette méthode insère le menu en ajoutant un Bloc/Section dans votre thème Shopify. C’est une approche traditionnelle, donc je ne vais pas la décrire en détail. Avec cette méthode, vous n’avez même pas besoin de “Activer Navi+ dans les intégrations d’applications” comme requis à l’étape 1 de la méthode 1.
Copiez l’ID d’intégration de ce menu, puis insérez-le dans le bloc nommé “Navi+ sur Section” dans les Sections de Thème. Vous pouvez ajouter un titre, configurer la largeur complète, et ajuster la marge pour cette section après l’avoir ajoutée.
Guide pour ajouter ce menu en tant que section/bloc dans le thème Shopify
Ci-dessous se trouve un guide détaillé sur l'insertion d'un menu Navi+ en tant que section/bloc dans votre thème Shopify. Cette méthode vous permet d'ajouter le menu de manière standard, prise en charge par Shopify, bien qu'elle ne soit pas aussi flexible que les autres méthodes fournies par Navi+.
Cette méthode s'applique aux Mega Menus et Grid Menus. Elle NE S'APPLIQUE PAS aux Tabbar, FAB, ou Slide Menus.
