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. Sélectionnez les paramètres d’affichage et publiez le menu.

É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 : Sélectionnez le bon sélecteur CSS et méthode de remplacement/insertion

Dans ce guide, nous nous concentrerons sur 2 façons : insérer ce menu sous l’en-tête ou remplacer le Mega Menu par défaut. Vous pouvez également utiliser cette méthode de manière créative en trouvant et en appliquant d’autres sélecteurs CSS pour déclencher le menu.

Comment insérer ce menu sous l'en-tête du site web?

Pour ce faire, identifiez simplement le sélecteur CSS de l'en-tête de votre site web et entrez-le dans la zone de texte. Nous avons déjà trouvé les sélecteurs CSS pour certains des thèmes les plus populaires pour vous, listés ci-dessous.

  1. Sélecteurs CSS pour certains thèmes populaires et gratuits.. de Shopify comme Dawn, Sense, Savor, Horizon..
header
  1. Pas dans cette liste, ne vous inquiétez pas
- Vous pouvez discuter avec un supporter de Navi+ pour obtenir de l'aide instantanée—cela ne prend que quelques minutes pour trouver le sélecteur CSS.

- Ou, vous pouvez suivre le guide d'auto-assistance dans les sujets suivants (juste après ce sujet).
Comment remplacer le Mega Menu par défaut?

Pour ce faire, identifiez simplement le sélecteur CSS de l'en-tête de votre site web et entrez-le dans la zone de texte. Nous avons déjà trouvé les sélecteurs CSS pour certains des thèmes les plus populaires pour vous, listés ci-dessous.

  1. Sélecteurs CSS pour certains thèmes populaires et gratuits.. de Shopify comme Dawn, Sense, Savor, Horizon..
.header-menu
  1. Pas dans cette liste, ne vous inquiétez pas
- Vous pouvez discuter avec un supporter de Navi+ pour obtenir de l'aide instantanée—cela ne prend que quelques minutes pour trouver le sélecteur CSS.

- Ou, vous pouvez suivre le guide d'auto-assistance dans les sujets suivants (juste après ce sujet).
Comment trouver le sélecteur CSS sur votre site web?

Vous pouvez discuter avec un supporter de Navi+ pour obtenir de l'aide instantanée au lieu de le faire vous-même. Cependant, (1) cela vous aidera à comprendre l'idée principale, et (2) si vous souhaitez le faire vous-même, suivez les instructions ci-dessous.

I.3. Important ! Optimisez la vitesse du Mega Menu et l’expérience utilisateur (mode de remplacement)

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 encore 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 :

  1. Shopify priorise le chargement de ses propres ressources en premier.
  2. Ensuite, Shopify charge le contenu du thème.
  3. 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 web Shopify. Cependant, il y a encore un certain délai. Nous allons aborder 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 d’« 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.