Z-index

C’est un problème courant mais très facile à gérer lorsque vous utilisez Navi+. Votre site Web peut avoir de nombreux éléments flottants—voir les exemples ci-dessous pour les reconnaître.

Note : Ce sont les configurations de z-index actuelles sur le thème Dawn (le thème par défaut gratuit le plus populaire de Shopify) à ce moment.

Ces éléments flottants sont contrôlés par leurs propres valeurs de z-index. Plus le z-index est élevé, plus cet élément a de priorité pour être affiché au-dessus des autres. La partie délicate est qu’il n’y a pas de règles fixes pour les valeurs de z-index. Vous pouvez attribuer n’importe quel nombre jusqu’à 2 147 483 647. Chaque thème que vous utilisez et chaque application fonctionnant sur votre boutique Shopify peuvent attribuer leur propre z-index aux composants flottants—généralement basé sur la préférence du développeur. Lorsque ces éléments interagissent sur votre site Web, ils peuvent se chevaucher de manière inattendue.

Amusons-nous un peu :joy:: Regardez de plus près la capture d’écran ci-dessus et vous verrez—oui, c’est un désordre, et il n’y a absolument aucune règle. Il y a trois développeurs derrière le site Web que vous regardez.

Le développeur qui a construit le thème Dawn a choisi un z-index de 3 pour le Panneau de Menu et 1000 pour le Panneau de Panier—complètement sans rapport, sans logique claire.

Puis il y a le développeur de l’application Rivo Loyalty Rewards—un outil de fidélité populaire—qui a choisi un z-index de 99999999999, probablement sans même compter combien de neufs ils ont tapés. Leur seul objectif : s’assurer que le bouton flottant « Récompenses » reste toujours au-dessus, peu importe quoi, même au-dessus de votre Panneau de Panier.

Pendant ce temps, le développeur de Navi+ a humblement choisi un nombre plus petit—juste 5—parce que nous ne voulions pas être trop agressifs ou intrusifs. Alors, que devriez-vous faire ?

Étape 1 : Trouvez le z-index correct de votre menu Navi+

Méthode 1 : Demandez au support de Navi+ (la plus simple)

C'est le meilleur et le plus efficace. Nous pouvons vous fournir des informations sur les valeurs de z-index des éléments clés de l'interface tels que le Panneau de Menu, le Panneau de Panier, et toutes les applications tierces que vous utilisez, puis recommander le meilleur réglage de z-index pour votre cas.

N'hésitez pas à utiliser la boîte de chat dans le coin inférieur droit de l'écran pour parler à un supporter de Navi+. Navi+ est en pleine croissance, et nous apprécions vraiment vos retours—vos problèmes nous aident à construire un meilleur produit.

Nous ne sommes pas en ligne 24/7—seulement 14 heures par jour, selon le fuseau horaire du Vietnam. Cependant, dès que nous voyons votre message, nous répondrons immédiatement.

Méthode 2 : Utilisez le mode Inspect de votre navigateur (détaillé, mais nécessite quelques connaissances techniques)

Jusqu'à présent, il n'y a pas de meilleure méthode pour vérifier cela vous-même à moins que vous n'utilisiez le mode Inspect. Cet outil de développement est disponible dans tous les navigateurs modernes comme Chrome, Firefox, Safari ou Edge. Cliquez avec le bouton droit sur n'importe où sur votre site Web et sélectionnez Inspecter pour ouvrir le mode Inspect.

Méthode 3 : Essayez et testez en fonction de nos suggestions (Expérience personnelle)

Dans la plupart des cas, les problèmes de z-index sont rares si vous n'utilisez pas trop d'applications. Le principal problème provient généralement des chevauchements entre votre menu et d'autres éléments d'interface comme le Panneau de Menu ou le Panneau de Panier.

  • Pour les menus collants Navi+ comme Tabbar ou FAB : Nous recommandons de garder le z-index bas, autour de 2 ou 3. Ces menus prennent de l'espace à l'écran, et cela semblerait cassé ou ennuyeux s'ils couvraient des panneaux fonctionnels comme le panier.
  • Pour les menus de section Navi+ comme les Mega menus : S'ils sont placés en haut (dans l'en-tête), vous pouvez définir en toute sécurité un z-index très élevé (par exemple 2000000000) pour vous assurer que le sous-menu déroulant n'est pas caché derrière d'autres composants.
  • Pour les menus Grid Navi+ : le z-index n'a aucun effet, car le menu est plat et n'a pas de profondeur en couches.
  • Pour les menus Slide Navi+ : le z-index doit être défini très haut (par exemple 2000000000) pour éviter d'être caché derrière d'autres éléments.

Étape 2 : Mettez à jour le z-index de votre menu Navi+

Comment mettre à jour le z-index du menu Navi+ ?

Sélectionnez le menu Avancé et faites défiler vers le bas pour trouver la carte Z-index puis mettez à jour le z-index et n'oubliez pas de cliquer sur ENREGISTRER pour appliquer les modifications.