Z-index
Este es un problema común pero muy fácil de manejar cuando se utiliza Navi+. Su sitio web puede tener muchos elementos flotantes; vea los ejemplos a continuación para reconocerlos.
Nota: Estos son los ajustes actuales de z-index en el tema Dawn (el tema predeterminado gratuito más popular de Shopify) en este momento.
Estos elementos flotantes son controlados por sus propios valores de z-index. Cuanto mayor sea el z-index, más prioridad tiene ese elemento para mostrarse por encima de otros. La parte complicada es que no hay reglas fijas para los valores de z-index. Puede asignar cualquier número hasta 2,147,483,647. Cada tema que utilice y cada aplicación que funcione en su tienda Shopify puede asignar su propio z-index a los componentes flotantes, generalmente basado en la preferencia del desarrollador. Cuando estos elementos interactúan en su sitio web, pueden superponerse de maneras no intencionadas.
Divirtámonos un poco :joy:: Eche un vistazo más de cerca a la captura de pantalla anterior y verá: sí, es un desastre, y no hay reglas en absoluto. Hay tres desarrolladores detrás del sitio web que está viendo.
El desarrollador que construyó el tema Dawn eligió un z-index de 3 para el Panel de Menú y 1000 para el Panel de Carrito, completamente no relacionados, sin una lógica clara.
Luego está el desarrollador de la aplicación Rivo Loyalty Rewards, una herramienta de lealtad popular, que eligió un z-index de 99999999999, probablemente sin siquiera contar cuántos nueves escribió. Su único objetivo: asegurarse de que el botón flotante “Rewards” siempre esté en la parte superior, sin importar qué, incluso por encima de su Panel de Carrito.
Mientras tanto, el desarrollador de Navi+ eligió humildemente un número más pequeño, solo 5, porque no queríamos ser demasiado agresivos o intrusivos. Entonces, ¿qué debería hacer?
Paso 1: Encuentra el z-index correcto de tu menú de Navi+
Método 1: Pregunta al soporte de Navi+ (El más simple)
Esta es la mejor y más efectiva manera. Podemos proporcionarle información sobre los valores de z-index de elementos clave de la interfaz, como el Panel de Menú, el Panel de Carrito y cualquier aplicación de terceros que esté utilizando, y luego recomendar el mejor ajuste de z-index para su caso.
No dude en utilizar el cuadro de chat en la esquina inferior derecha de la pantalla para hablar con un soporte de Navi+. Navi+ está creciendo y realmente valoramos sus comentarios; sus problemas nos ayudan a guiarnos para construir un mejor producto.
No estamos en línea 24/7, solo 14 horas al día, según la zona horaria de Vietnam. Sin embargo, tan pronto como veamos su mensaje, responderemos de inmediato.
Método 2: Usa el modo Inspeccionar de tu navegador (detallado, pero requiere algo de conocimiento técnico)
Hasta ahora, no hay mejor método para verificar esto usted mismo a menos que use el modo Inspeccionar. Esta herramienta de desarrollador está disponible en todos los navegadores modernos como Chrome, Firefox, Safari o Edge. Haga clic derecho en cualquier parte de su sitio web y seleccione Inspeccionar para abrir el modo Inspeccionar.
Método 3: Prueba y experimenta según nuestras sugerencias (Experiencia personal)
En la mayoría de los casos, los problemas de z-index son raros si no está utilizando demasiadas aplicaciones. El problema principal generalmente proviene de superposiciones entre su menú y otros elementos de la interfaz, como el Panel de Menú o el Panel de Carrito.
- Para menús adhesivos de Navi+ como Tabbar o FAB: Recomendamos mantener el z-index bajo, alrededor de 2 o 3. Estos menús ocupan espacio en la pantalla, y se sentiría roto o molesto si cubrieran paneles funcionales como el carrito.
- Para menús de sección de Navi+ como Mega menus: Si se colocan en la parte superior (en el encabezado), puede establecer de manera segura un z-index muy alto (por ejemplo, 2000000000) para asegurarse de que el submenú desplegable no esté oculto detrás de otros componentes.
- Para menús de cuadrícula de Navi+: el z-index no tiene efecto, ya que el menú es plano y no tiene profundidad en capas.
- Para menús deslizantes de Navi+: el z-index debe establecerse muy alto (por ejemplo, 2000000000) para evitar ser oculto detrás de otros elementos.
Paso 2: Actualiza el z-index de tu menú de Navi+
¿Cómo actualizar el z-index del menú de Navi+?
Seleccione el menú Avanzado y desplácese hacia abajo para encontrar la tarjeta de Z-index, luego actualice el z-index y no olvide hacer clic en GUARDAR para aplicar los cambios.
