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 SUR 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 bascule “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
Insère le menu Navi+ immédiatement avant l'élément sélectionné.
Exemple : Sélecteur CSS main → le menu 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 (le plus courant pour le Mega Menu de bureau)
Insère le menu Navi+ immédiatement après l'élément sélectionné.
Exemple : Sélecteur CSS header → le menu 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.announcement-bar— place le menu juste en dessous d'une barre d'annonce
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
Remplace complètement l'élément sélectionné par le menu Navi+. L'élément original est masqué et Navi+ prend sa place.
Exemple : Sélecteur CSS .header-menu → la navigation par défaut du thème est remplacée par votre Mega Menu Navi+.
Sélecteurs CSS courants pour les thèmes Shopify (Dawn, Sense, Savor, Horizon) :
.header-menu— thème Shopify Dawn.header__menu— certains thèmes
Remarque : Un bref flash du menu original peut apparaître pendant que Navi+ se charge. Voir I.5 ci-dessous pour éviter cela.
Pas dans cette liste ? Discutez avec un supporter de Navi+, ou utilisez Mode Débogage ou Outils de développement du navigateur.
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 : header(D) — bureau uniquement · header(M) — mobile uniquement · header — les deux plateformes.
I.5. Important ! Optimisez la vitesse du Mega Menu et l’expérience utilisateur (mode Remplacer)
Lorsque vous remplacez un menu par un autre, Navi+ attend que l’ancien menu soit affiché puis l’échange instantanément avec le nouveau. Bien que cela se produise presque immédiatement, il y a toujours un bref moment où l’ancien menu apparaît, ce qui peut confondre les utilisateurs.
Avec cette étape, vous pouvez complètement cacher l’ancien menu et montrer un effet de chargement à la place. Cela rend le site web plus rapide et améliore l’expérience utilisateur.
Navi+ fournit une solution simple pour optimiser l'expérience utilisateur et la vitesse comme suit
Pourquoi devez-vous faire cela ? Navi+ n'est-il pas déjà rapide ?
Navi+ est très rapide. Il est entièrement déployé sur un CDN de premier plan avec une latence très faible (environ 100 ms) et peut servir des millions de clients sans ralentir.
Cependant, Navi+ fonctionne toujours au sein de l'écosystème Shopify. Shopify a ses propres règles de chargement :
- Shopify priorise le chargement de ses propres ressources en premier.
- Ensuite, Shopify charge le contenu du thème.
- Enfin, Shopify charge le contenu des applications, mais pas dans un ordre spécifique.
Cela signifie que si vous utilisez plusieurs applications, Navi+ peut parfois être chargé plus tard que prévu. C'est pourquoi il peut sembler plus lent dans certains cas.
Quelle est ma solution ?
Actuellement, Navi+ a une haute priorité lors du chargement sur les sites Shopify. Cependant, il y a encore un certain délai. Nous aborderons ces problèmes un par un ici :
Remarque :
- Ajoutez le suffixe (M) si vous souhaitez qu'il s'applique uniquement sur mobile.
- Ajoutez le suffixe (D) si vous souhaitez qu'il s'applique uniquement sur bureau.
- Ne laissez aucun suffixe si vous souhaitez qu'il s'applique sur 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.
