Cómo cambiar el z-index de una barra de pestañas en Shopify (sin tapar el carrito ni los popups)

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

Para cambiar el z-index de una barra de pestañas, inspecciona la barra y el elemento con el que choca, compara sus valores de z-index y asigna a la barra un valor menor o mayor en el CSS personalizado de tu tema o en la app. El valor más alto se muestra delante.

Coloca la barra de pestañas por debajo de carritos desplegables y popups para que los clientes puedan pagar con comodidad, pero por encima del contenido que se desplaza. Tras modificar el número, verifica siempre el resultado en un teléfono real.

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

Una barra de pestañas inferior para móviles utiliza una posición fija (fixed) para que los enlaces primarios queden siempre al alcance del pulgar mientras la tienda se desplaza. Dado que permanece anclada mientras los productos y textos pasan por debajo, debe situarse en una capa visual elevada respecto al flujo normal de la página.

Los conflictos surgen porque las tiendas modernas usan múltiples capas flotantes a la vez: carritos desplegables (cart drawers), modales de búsqueda, popups promocionales, widgets de chat y barras de anuncios. Cada tema y cada desarrollador de apps asigna sus propios números enteros a sus componentes, por lo que no existe un único número que funcione en todas las tiendas.

Esta falta de coordinación provoca dos problemas visuales frecuentes en teléfonos:

• La barra de pestañas tapa el carrito desplegable: La barra se dibuja encima del pie del carrito, ocultando el botón de finalizar compra o el total porque su capa es mayor que la del carrito.
• La barra de pestañas desaparece tras una sección: La barra queda oculta detrás de un banner, video o carrusel porque esa sección tiene un valor de capa más alto o su propio contexto de apilamiento.

Comprender la mobile tab bar architecture permite diseñar una navegación inferior en armonía con las demás capas flotantes en lugar de competir a ciegas con valores aleatorios.

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

En CSS, la propiedad z-index controla cómo se apilan los elementos a lo largo del eje z virtual que apunta hacia el usuario. Según MDN Understanding z-index, se expresa como un número entero y controla el orden de renderizado, permitiendo ubicar elementos delante o detrás de otros elementos dentro del mismo contexto de apilamiento.

La condición esencial es: dentro del mismo contexto de apilamiento.

Tal como explica Google web.dev, “Un contexto de apilamiento es un grupo de elementos con un padre común que se mueven juntos a lo largo del eje z.” Imagina los contextos de apilamiento como cajas de cartón. Si dos tarjetas están en la misma caja, la que tiene el número más alto se muestra delante. Pero si la Tarjeta A está en la Caja 1, y la Caja 1 está colocada debajo de la Caja 2, la Tarjeta A jamás aparecerá delante de la Caja 2, sin importar cuán grande sea su número.

Ilustración conceptual: Un elemento secundario no puede escapar del contexto de apilamiento de su contenedor principal; si el padre está más bajo, el hijo quedará oculto tras otros overlays.

Cuando dos elementos no son hermanos directos en el DOM, el comportamiento es más complejo porque cada uno puede pertenecer a un contexto independiente. El navegador crea un nuevo contexto de apilamiento cuando un elemento tiene:

• position: fixed o position: sticky
• opacity menor que 1
• transform, filter o perspective con un valor distinto de none

Dado que las barras inferiores y los encabezados fijos comparten estas propiedades, se producen dinámicas similares entre sticky header and footer menus. Si el contenedor de un tema o app forma un contexto aislado, subir el z-index de la barra hija no tendrá ningún efecto sobre los elementos externos.

Find what’s overlapping with browser DevTools

Antes de modificar código, inspecciona los elementos en conflicto para leer sus estilos calculados y sus contenedores padres.

Ilustración conceptual: Inspección del contenedor exterior de la barra de pestañas en DevTools para consultar las propiedades de position y z-index en la pestaña Styles.

Desktop Chrome

1. Haz clic derecho sobre la barra de pestañas en tu tienda y selecciona Inspeccionar (Inspect).
2. En el árbol DOM del panel Elements, localiza el contenedor exterior de la barra (como .mobile-tab-bar o el contenedor de tu app).
3. Consulta la pestaña Styles a la derecha. Como indica la documentación Google Chrome DevTools docs, la pestaña Styles lista las reglas CSS aplicadas al elemento seleccionado. Busca position y z-index.
4. Abre el elemento en conflicto (como el carrito desplegable o la búsqueda), haz clic derecho sobre él, elige Inspeccionar y anota su z-index y position.
5. Examina los nodos padres de ambos elementos para comprobar si alguno tiene transform, filter u opacity < 1 que cree un contexto aislado.

Checking the mobile view

Haz clic en el icono Alternar barra de dispositivos para simular una pantalla móvil. Aunque la emulación reproduce con exactitud las media queries y el DOM, la respuesta táctil física puede variar. Usa DevTools para identificar los valores y realiza la prueba definitiva en un teléfono real.

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

Solucionar solapamientos no requiere adivinar cifras extremas como 999999. Los elementos con números de capa más altos cubren a los de números menores en el mismo contexto, y este valor puede ser cualquier número entero: positivo, negativo o cero.

Organiza tu tienda siguiendo una jerarquía visual metódica:

No existe un número estándar universal en los temas de Shopify. Al evaluar how drawer menus are layered, la regla de oro es relativa: el z-index de tu barra de pestañas debe ser inferior al de tu carrito. Solo números de ejemplo: si el valor de tu carrito es 100, cualquier valor inferior a 100 en la barra mantiene el carrito al frente. Si desconoces el valor del carrito, las guías de varias apps sugieren probar con 50 e ir reduciendo si persiste el conflicto.

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

Una vez identificado el valor requerido, aplícalo mediante el CSS personalizado del tema o en el panel de configuración de tu aplicación de navegación.

Theme settings Custom CSS

En el panel de Shopify, ve a Tienda online > Edit theme > Configuración del tema > CSS personalizado.

Según el centro de ayuda Shopify Help Center, las reglas introducidas aquí afectan a todo el tema, sujetas a ciertas limitaciones:

• Límite de caracteres: El CSS personalizado para todo el tema está limitado a 1500 caracteres.
• Alcance de sección: El CSS añadido a una sección individual solo aplica a esa sección y tiene un límite de 500 caracteres. Para una barra global, utiliza Configuración del tema.
• Actualizaciones de tema: Al actualizar el tema, las clases pueden cambiar y hacer que los selectores CSS personalizados dejen de funcionar.

/* 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 tu barra de pestañas proviene de una app, revisa primero el campo z-index integrado en sus opciones; las páginas de ayuda de los desarrolladores de apps suelen indicarlo, y el valor se guarda con tu menú en lugar de estar en el CSS de tu tema. Para entender por qué varias apps pueden chocar en una tienda, consulta how app embeds can conflict with your theme.

Why your z-index change does nothing

Si cambias el valor de una capa pero la interfaz no se altera, el problema suele originarse en una de estas cinco causas técnicas:

Mobile-only fixes with a media query

Puesto que las barras de pestañas inferiores están pensadas para pantallas de teléfono, acota tus reglas CSS al entorno móvil para no alterar la navegación en computadoras de escritorio.

Envuelve el código dentro de una media query que coincida con el punto de quiebre de tu tema:

/* 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;
  }
}

Mantén las reglas compactas para no exceder el límite de 1500 caracteres de Shopify en Configuración del tema. Comprueba además la orientación vertical y horizontal para cerciorarte de que la rotación de pantalla no desajuste la barra.

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

Incrementar los valores a cifras desmesuradas es un atajo tentador que conlleva desventajas técnicas reales:

• Tapar el proceso de compra: Si la barra se ubica sobre el carrito desplegable, puede cubrir el subtotal y el botón de pago, dificultando que el cliente complete la compra.
• Bloquear avisos legales: Una barra superpuesta a banners de cookies GDPR o modales de edad impide que los visitantes otorguen su consentimiento para ver la tienda.
• Escalada de capas entre apps: Introducir valores arbitrarios como 2147483647 provoca una carrera sin fin entre apps de terceros, y aun así puede fallar si un contexto de apilamiento padre encierra el elemento. Si otra app genera el conflicto, reducir esa capa o contactar a su soporte suele ser la vía correcta.
• Fragilidad en actualizaciones de tema: El CSS personalizado puede dejar de funcionar cuando actualizas tu tema si cambian los nombres de las clases. Un ajuste guardado en tu app de barra de pestañas no forma parte del CSS de tu tema.

Where Navi+ fits

Si tu barra de pestañas está creada con Navi+, no necesitas tocar el código de tu tema ni redactar CSS manual para ordenar las capas.

Dentro del editor de menús de Navi+:

1. Abre el menú que deseas editar en el panel de control de Navi+.
2. Ve a la pestaña Advanced en las opciones del menú.
3. Ubica la tarjeta Z-index (“Z-INDEX: Set the menu layer order”).
4. Revisa el valor actual en el campo Z-index e introduce el número entero deseado (admite valores de 0 a 2147483647).
5. Pulsa Save.

Tu ajuste de capa se guarda en la configuración del menú, no en el código de tu tema.

Al explorar alternativas de mobile navigation beyond the hamburger menu, armonizar la barra inferior con los carritos laterales asegura una experiencia de compra sin fricciones.

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

Repasa esta lista de comprobación de 10 puntos antes de dar por concluidos tus cambios ante tus clientes:

• Abrir el carrito desplegable: Añade un producto, abre el carrito y confirma que los artículos y el botón de pago sean totalmente clicables.
• Probar la búsqueda: Abre el modal de búsqueda y verifica que el campo de texto y las sugerencias se sitúen por encima de la barra.
• Comprobar popups y avisos: Dispara modales de descuento, suscripción a boletines y avisos de cookies para comprobar que queden en primer plano.
• Revisar el chat de soporte: Abre el widget de chat; comprueba que su icono flotante no tape los destinos de navegación de la barra.
• Abrir el menú lateral del tema: Pulsa el menú hamburguesa del tema y verifica que el cajón se desplace sin cortes detrás de la barra.
• Desplazarse por secciones con multimedia: Navega sobre banners de video y carruseles para confirmar la visibilidad constante de la barra.
• Probar en iOS Safari: Carga la tienda en un iPhone físico usando Safari, prestando atención a la barra inferior de gestos.
• Probar en Android Chrome: Abre la tienda en un teléfono Android en Chrome para evaluar la sensibilidad del área de pulsación.
• Girar la pantalla: Rota el dispositivo entre modo vertical y horizontal para asegurar la correcta adaptación de las media queries.
• Borrar caché y probar en incógnito: Haz una comprobación en ventana privada para asegurarte de que el navegador lea los estilos actualizados.

FAQ

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

Inspecciona ambos componentes en DevTools para comparar sus valores y asigna un número menor o mayor en el CSS personalizado o en las opciones de tu app.

Why is my tab bar showing over the cart drawer?

La barra tiene un z-index superior al del carrito dentro del mismo contexto de apilamiento; reduce el valor de la barra para que el carrito quede al frente.

Why does my z-index change have no effect?

El elemento puede tener posición estática por defecto o encontrarse dentro de un contenedor padre que crea un contexto de apilamiento aislado.

Which z-index value should I use?

No existe un número estándar general; elige un entero que sitúe la barra sobre el contenido de la página pero bajo el carrito, o prueba empezando en 50.

Where do I put the CSS in Shopify?

Introduce el CSS global en el panel de Shopify en Tienda online > Edit theme > Configuración del tema > CSS personalizado (hasta 1500 caracteres).

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?