Publication sur Shopify

Étape 2 : (Shopify) Publiez le menu sur votre site web.

2.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.

2.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 (visible uniquement lorsqu’il est ouvert par l’utilisateur)”.

Étape 3 : Sélectionnez la méthode d’affichage

Méthode 1 : Ouvrez ce menu à partir d’un autre élément de menu Navi+ en utilisant la syntaxe open:NaviMenu

Cette méthode vous permet d’ouvrir un menu déroulant lorsque l’utilisateur clique ou touche un élément de menu d’un autre menu Navi+ (par exemple : sur une tabbar, un FAB dans le coin inférieur de l’écran, ou un mega menu). Les principaux objectifs de cette méthode :

Objectif 1 : Amélioration de la visibilité et de l'expérience utilisateur en montrant la carte du site complète dans le menu déroulant tout en restant facile d'accès.

Le menu déroulant est idéal pour afficher votre carte du site complète grâce à son grand espace et sa mise en page flexible, ce qui le rend parfait pour montrer l'ensemble du catalogue de produits, des liens vers des pages clés, des blogs, des outils de support, etc. Cependant, le menu déroulant est souvent moins visible par défaut. Pour améliorer la découvrabilité, vous pouvez utiliser un autre menu Navi+ (comme une tabbar) pour présenter vos liens les plus importants et reconnaissables, et placer un élément de menu mis en avant qui déclenche le menu déroulant. Cela garantit une meilleure visibilité et un engagement utilisateur pour le menu déroulant.

Objectif 2 : Profondeur de menu illimitée avec une structure de menu large et flexible (Uniquement Navi+)

Au lieu d'afficher une fenêtre contextuelle avec un espace limité lorsqu'un élément de menu est cliqué, vous pouvez ouvrir un autre menu déroulant avec trois niveaux et plusieurs façons de présenter l'information. Cela peut être répété pour d'autres éléments de menu—ou même pour le même menu déroulant—vous permettant de créer une profondeur pratiquement illimitée pour vos menus Navi+.

Méthode 2 : Lorsqu’un élément UI (défini par un sélecteur CSS tel que #id _of _element ou .class _name) est cliqué ou touché, ce menu sera affiché.

C’est sans doute la meilleure et la plus couramment utilisée méthode avec le Slide Menu.
Dans ce guide, nous nous concentrerons sur le remplacement du menu hamburger par défaut du site web sur mobile.
Vous pouvez également appliquer cette méthode de manière créative en trouvant et en utilisant d’autres sélecteurs CSS pour déclencher le menu.

Comment remplacer le menu hamburger par défaut de votre site web par le Navi+ Slide Menu (Guide populaire) ?

Sur la plupart des sites Shopify, le menu hamburger par défaut est généré à partir de la version de bureau via un design réactif. En conséquence, il est généralement très simple, a une profondeur faible, et manque de support pour les icônes, les images, ou les mises en page avancées. Le remplacer par un Navi+ Slide Menu est un choix courant et pratique pour tirer parti des fonctionnalités avancées de Navi+.

Pour ce faire, identifiez simplement le sélecteur CSS de l'icône du menu hamburger 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 gratuits populaires.. de Shopify comme Dawn, Sense, Savor, Horizon..
#Details-menu-drawer-container
  1. Pas dans cette liste, ne vous inquiétez pas
- Vous pouvez discuter avec un supporter 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 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.

2.3. Important ! Optimisez la vitesse du menu déroulant, ajoutez un effet de chargement et empêchez les menus en double

Ce n’est pas quelque chose que vous devez corriger tout de suite, mais à long terme, c’est important pour l’expérience du menu déroulant créée par Navi+. Avant que Navi+ ne remplace complètement l’ancien menu déroulant, le menu original du thème est toujours actif. Pendant un bref moment—environ une demi-seconde—si un utilisateur charge le menu et appuie rapidement sur le bouton hamburger (un cas rare, mais toujours possible), l’ancien menu du thème peut apparaître et provoquer un glitch visuel.

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 de l'application, 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 allons aborder ces problèmes un par un ici :

Menu déroulant : Ajoutez un effet de chargement et verrouillez le sélecteur de déclenchement

Très simple : il suffit d'entrer le sélecteur CSS que vous utilisez pour le menu déroulant dans la section d'intégration de l'application Navi+ (voir l'image ci-dessous).

Note :

  • 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.