Comment modifier le z-index d'une barre d'onglets sur Shopify (sans masquer votre panier ou vos popups)

Quick answer: how to change the z-index of a tab bar

Pour modifier le z-index d’une barre d’onglets, inspectez la barre et l’élément en conflit, comparez leurs valeurs z-index, puis définissez une valeur inférieure ou supérieure dans le CSS personnalisé de votre thème ou les réglages de votre application. La valeur la plus élevée s’affiche au premier plan.

Positionnez la barre d’onglets sous les tiroirs de panier et les popups pour permettre le paiement, mais au-dessus des contenus défilants ordinaires. Testez toujours le rendu sur un smartphone physique après modification.

Why your tab bar covers (or hides behind) other elements

Une barre d’onglets mobile inférieure utilise un positionnement fixe pour rester accessible sous le pouce pendant que les pages défilent. Comme elle reste visible en permanence au-dessus des fiches produits et des textes, elle doit occuper une couche d’affichage surélevée par rapport au flux normal du document.

Des conflits apparaissent car les boutiques en ligne modernes intègrent plusieurs couches flottantes simultanées: tiroirs de panier, modales de recherche, popups promotionnels, widgets de chat et barres d’annonces. Chaque thème et chaque éditeur d’application attribue ses propres valeurs à ses composants, il n’existe donc pas de chiffre unique valable pour toutes les boutiques.

Ce manque d’harmonisation entraîne deux anomalies visuelles fréquentes sur smartphone:

• La barre d’onglets masque le tiroir panier: La barre s’affiche par-dessus le bas du panier, masquant le bouton de paiement ou le sous-total car son calque est plus élevé que celui du panier.
• La barre d’onglets disparaît sous une section: La barre glisse sous une bannière publicitaire, une vidéo ou un slider car cette section possède un calque supérieur ou son propre contexte d’empilement.

Comprendre la mobile tab bar architecture permet de concevoir une navigation inférieure en harmonie avec les autres calques flottants au lieu de laisser les styles se chevaucher au hasard.

How z-index and stacking contexts work, in plain terms

En CSS, la propriété z-index contrôle la superposition des éléments le long de l’axe z virtuel dirigé vers l’utilisateur. Selon MDN Understanding z-index, cette propriété s’exprime par un nombre entier et contrôle l’ordre d’affichage, ce qui permet de placer des éléments devant ou derrière d’autres éléments appartenant au même contexte d’empilement.

La condition indispensable est: dans le même contexte d’empilement.

Comme l’explique Google web.dev, “Un contexte d’empilement est un groupe d’éléments partageant un parent commun qui se déplacent ensemble le long de l’axe z.” Imaginez les contextes d’empilement comme des boîtes en carton. Si deux cartes se trouvent dans la même boîte, celle avec le plus grand chiffre s’affiche devant. Mais si la Carte A se trouve dans la Boîte 1, et que la Boîte 1 est placée sous la Boîte 2, la Carte A ne passera jamais devant la Boîte 2, quel que soit le chiffre inscrit dessus.

Illustration conceptuelle: Un élément enfant ne peut pas s’échapper du contexte d’empilement de son parent; si le conteneur parent est situé plus bas, l’enfant restera masqué derrière les autres overlays.

Lorsque deux éléments ne sont pas frères directs dans l’arbre DOM, le comportement devient plus complexe car chaque élément peut appartenir à un contexte indépendant. Un navigateur crée un nouveau contexte d’empilement dès qu’un élément utilise:

• position: fixed ou position: sticky
• opacity strictement inférieure à 1
• transform, filter ou perspective défini sur une valeur autre que none

Comme les menus de pied de page et les en-têtes partagent ces propriétés, des interactions identiques se produisent entre les sticky header and footer menus. Si le conteneur d’un thème ou d’une application forme un contexte isolé, augmenter la valeur de la barre d’onglets enfant ne produira aucun effet sur les éléments extérieurs.

Find what’s overlapping with browser DevTools

Avant de modifier du code, inspectez les éléments en conflit pour relever leurs styles calculés et leurs conteneurs parents.

Illustration conceptuelle: Inspection du conteneur parent de la barre d’onglets dans Chrome DevTools pour identifier les règles position et z-index dans l’onglet Styles.

Desktop Chrome

1. Faites un clic droit sur la barre d’onglets de votre boutique et sélectionnez Inspecter (Inspect).
2. Dans l’arborescence DOM du panneau Elements, repérez le conteneur englobant de la barre d’onglets (comme .mobile-tab-bar ou un conteneur propre à l’application).
3. Consultez l’onglet Styles sur la droite. D’après la documentation Google Chrome DevTools docs, l’onglet Styles liste les règles CSS appliquées à l’élément sélectionné. Repérez position et z-index.
4. Ouvrez l’élément en conflit (le panier coulissant ou la recherche), faites un clic droit dessus, sélectionnez Inspecter, puis relevez son z-index et sa position.
5. Remontez l’arbre DOM des deux éléments pour vérifier si un parent possède transform, filter ou opacity < 1 créant un contexte isolé.

Checking the mobile view

Cliquez sur l’icône Activer la barre d’outils de l’appareil pour simuler un écran de smartphone. Bien que l’émulateur reproduise fidèlement les requêtes média et la structure DOM, le rendu tactile physique peut différer. Utilisez DevTools pour repérer les chiffres, puis validez sur un appareil mobile réel.

Pick the right layer order for tab bar, cart drawer, popups and chat

Résoudre les conflits de calques ne nécessite pas d’inventer des valeurs disproportionnées comme 999999. Les éléments ayant des valeurs entières supérieures recouvrent ceux aux valeurs inférieures dans le même contexte, et cette valeur peut être n’importe quel entier, positif, négatif ou nul.

Organisez votre boutique selon une hiérarchie visuelle méthodique:

Il n’existe aucun numéro universel standard parmi les thèmes Shopify. Lors de l’analyse de how drawer menus are layered, la règle clé est relative: la valeur de votre barre d’onglets doit être inférieure à celle de votre panier. Chiffres donnés à titre d’exemple : si la valeur de votre panier est 100, toute valeur inférieure à 100 pour la barre garde le panier au premier plan. Si cette valeur est introuvable, les documentations d’applications suggèrent souvent de débuter avec une valeur d’essai de 50 et d’ajuster à la baisse en cas de conflit.

Where to change the value: theme custom CSS vs. app settings

Une fois la valeur adéquate identifiée, appliquez-la soit via le CSS personnalisé de votre thème, soit dans les réglages de votre application de navigation.

Theme settings Custom CSS

Dans l’administration Shopify, rendez-vous dans Boutique en ligne > Edit theme > Paramètres du thème > CSS personnalisé.

D’après le centre d’aide Shopify Help Center, les règles renseignées ici s’appliquent à l’ensemble du thème, sous réserve de certaines limites:

• Limite de caractères: Le CSS global pour l’ensemble du thème est limité à 1500 caractères.
• Portée de section: Le CSS ajouté à une section individuelle est circonscrit à cette section et limité à 500 caractères. Pour une barre globale, utilisez les Paramètres du thème.
• Mises à jour du thème: Lors de la mise à jour d’un thème, les sélecteurs CSS personnalisés peuvent cesser de fonctionner si les noms de classes changent.

/* Example: Adjusting mobile tab bar z-index in Shopify Theme settings > Custom CSS */
/* Replace .custom-tab-bar-wrapper with your actual tab bar container selector */
@media (max-width: 749px) {
  .custom-tab-bar-wrapper {
    /* Example value: ensure this integer sits below your cart drawer */
    z-index: 40;
  }
}

Inside your tab bar app

Si votre barre d’onglets provient d’une application, vérifiez d’abord le champ z-index intégré à ses réglages ; les pages d’aide des éditeurs y renvoient généralement, et la valeur est enregistrée avec votre menu plutôt que dans le CSS de votre thème. Pour comprendre pourquoi plusieurs applications peuvent entrer en conflit sur une boutique, lisez how app embeds can conflict with your theme.

Why your z-index change does nothing

Lorsqu’une modification de calque ne produit aucun effet visible, cela découle généralement de l’une de ces cinq causes architecturales:

Mobile-only fixes with a media query

Puisque les barres d’onglets inférieures s’adressent principalement aux smartphones, isolez vos règles CSS aux écrans mobiles pour ne pas impacter la version ordinateur.

Encadrez vos déclarations dans une media query correspondant au point de rupture de votre thème:

/* Example: Scope tab bar layer order to mobile viewports */
/* 749px is only an example breakpoint; use your own theme's breakpoint */
@media screen and (max-width: 749px) {
  .theme-mobile-tab-bar-container {
    /* Example value: positioned above page content, below cart drawer */
    z-index: 45;
  }
}

Rédigez des règles concises pour respecter la limite de 1500 caractères imposée par Shopify. Testez toujours en mode portrait et paysage pour vous assurer que la rotation du smartphone ne perturbe pas l’agencement visuel.

Trade-offs: when a high z-index is the wrong fix

Définir arbitrairement des valeurs extrêmes constitue un raccourci risqué qui entraîne des contreparties techniques réelles:

• Masquage du paiement: Placer la barre au-dessus du panier peut recouvrir le sous-total et le bouton de commande, ce qui complique la finalisation de l’achat.
• Blocage des mentions légales: Une barre superposée aux bannières de cookies RGPD ou aux modales d’âge empêche les visiteurs de valider leur consentement pour accéder à la boutique.
• Surenchère entre applications: Saisir des valeurs arbitraires comme 2147483647 entraîne une course sans fin entre applications tierces, et peut quand même échouer si un contexte d’empilement parent enferme l’élément. Lorsque le conflit vient d’une autre application, réduire le niveau de cet élément ou contacter son support s’avère souvent la solution adéquate.
• Fragilité lors des mises à jour: Les règles du CSS personnalisé peuvent cesser de fonctionner lors d’une mise à jour du thème si les noms de classes changent. Un réglage enregistré dans votre application de barre d’onglets ne fait pas partie du CSS de votre thème.

Where Navi+ fits

Si votre barre d’onglets est gérée avec Navi+, vous n’avez pas besoin de modifier le code de votre thème ni de rédiger du CSS pour régler l’ordre des calques.

Dans l’éditeur de menu de Navi+:

1. Ouvrez le menu souhaité depuis le tableau de bord Navi+.
2. Rendez-vous dans l’onglet Advanced des paramètres du menu.
3. Repérez la section Z-index (“Z-INDEX: Set the menu layer order”).
4. Consultez la valeur actuelle dans le champ Z-index, puis saisissez le nombre entier souhaité (valeurs acceptées de 0 à 2147483647).
5. Cliquez sur Save.

Votre réglage de couche est enregistré dans la configuration du menu, et non dans le code de votre thème.

Lorsqu’on explore les pistes d’une mobile navigation beyond the hamburger menu, harmoniser la barre inférieure avec les tiroirs garantit une expérience d’achat fluide.

If your tab bar comes from Navi+, you don’t need to touch theme code: open the menu, go to Advanced, set the Z-index below your cart drawer, and save. If you’re unsure which value fits your theme, our support team can look at it with you.

Test checklist before you call it fixed

Vérifiez ces 10 points de contrôle avant de valider vos modifications auprès de vos acheteurs:

• Ouvrir le panier coulissant: Ajoutez un produit, ouvrez le tiroir et vérifiez que les articles et le bouton Passer la commande sont bien cliquables.
• Déclencher la recherche: Ouvrez la recherche modale et assurez-vous que le champ et les suggestions s’affichent au-dessus de la barre.
• Tester popups et formulaires: Déclenchez formulaires d’inscription, bannières cookies et avertissements d’âge pour vérifier leur superposition.
• Examiner le widget de chat: Ouvrez le chat support; confirmez que sa bulle ne masque pas les boutons de la barre d’onglets.
• Ouvrir le menu latéral du thème: Cliquez sur le menu hamburger du thème pour vérifier qu’il glisse sans coupure visuelle derrière la barre.
• Faire défiler les médias riches: Parcourez les sliders et bannières vidéo pour confirmer que la barre reste visible en permanence.
• Tester sur iOS Safari: Ouvrez la boutique sur un iPhone réel dans Safari en vérifiant la zone inférieure de navigation par gestes.
• Tester sur Android Chrome: Ouvrez la boutique sur un smartphone Android réel pour contrôler la réactivité des cibles tactiles.
• Faire pivoter l’écran: Basculez l’appareil entre mode portrait et paysage afin de vérifier la bonne adaptation des requêtes média.
• Vider le cache et tester en navigation privée: Testez en fenêtre privée pour vous assurer que le navigateur charge bien la feuille de style à jour.

FAQ

How do I change the z-index of a tab bar?

Inspectez les deux éléments avec DevTools pour comparer leurs valeurs, puis attribuez un entier inférieur ou supérieur dans le CSS du thème ou les réglages de l’application.

Why is my tab bar showing over the cart drawer?

La barre d’onglets possède un z-index plus élevé que le panier dans le même contexte d’empilement; abaissez sa valeur pour laisser le panier s’afficher devant.

Why does my z-index change have no effect?

L’élément ciblé est peut-être en position statique, ou se trouve dans un conteneur parent créant un contexte d’empilement isolé qui limite la portée du calque.

Which z-index value should I use?

Il n’existe pas de valeur universelle; choisissez un entier qui place la barre au-dessus des contenus de page mais sous le panier, ou testez une valeur de départ de 50.

Where do I put the CSS in Shopify?

Insérez le CSS global dans l’administration Shopify sous Boutique en ligne > Edit theme > Paramètres du thème > CSS personnalisé (limite de 1500 caractères).

Sources

• MDN Web Docs: Understanding CSS z-index
• MDN Web Docs: The Stacking Context
• MDN Web Docs: z-index Property Reference
• Google web.dev: CSS z-index and Stacking Contexts
• Google Chrome DevTools: View and Change CSS
• Shopify Help Center: Adding Custom CSS to Your Theme
• Hextom Help Center: My Bar Is Covering Another Element – How to Fix It
• Conversion Bear Support: Sticky Bar Is Covering the Side Cart
• Ninja Commerce Support: Resolving Sticky Bar Overlap and Push Down Issues
• MakeProSimp Support: How Does Z-index Affect the Popup and Cart Drawer?