Add a mega menu to Shopify's Yuva theme — Navi+ setup
En la tienda de demostración en vivo: el Slide Menu se vincula con la hamburguesa existente (.navbar-toggler) y oculta el cajón nativo ([class*='mobile-nav']) — sin cambios visibles para los compradores; Mega Menu se inserta limpiamente debajo del encabezado — este tema no tiene problemas de desbordamiento horizontal (headerInsertSafe = true). La tabla de selectores y las guías de configuración a continuación son específicas de este tema.
1 Análisis del tema
generic coincide con lo esperado2 Anatomía de navegación — mapa de selectores
Selectores confirmados únicos (matchCount = 1) en la tienda de demostración en vivo. Rol presente solo si se encontró.
| Rol | Selector CSS | Plataforma | Utilizado para |
|---|---|---|---|
| Objetivos de montaje de Navi+ | |||
| Disparador de hamburguesa | .navbar-toggler |
Móvil | Navi+ se vincula aquí para activar Slide Menu |
| Encabezado | .shopify-section-main-header |
Móvil + Escritorio | Insertar Mega Menu debajo del encabezado de Yuva |
| Menú principal | ul[class*='list-menu'] |
Escritorio | Navi+ Mega Menu reemplaza el contenido de navegación de escritorio |
| Logotipo | .logo-center |
Móvil + Escritorio | Fallback — insertar icono de disparador antes del logotipo cuando no hay hamburguesa |
| Disparadores de panel | |||
| Disparador de hamburguesa | .navbar-toggler |
Móvil | Tocar para abrir el cajón móvil nativo |
| Icono de búsqueda | a[class*='search'] |
Móvil + Escritorio | Tocar para abrir el panel de búsqueda / superposición |
| Icono de carrito | a[class*='cart'] |
Móvil + Escritorio | Tocar para abrir el cajón de carrito / panel |
Agregar una Tab Bar Navi+ al tema Yuva de Shopify
Una Tab Bar fija una tira de navegación en la parte inferior de la pantalla en móvil — justo donde descansa el pulgar. Los compradores de Yuva acceden a tu menú, búsqueda y carrito desde cualquier página sin desplazarse hacia el encabezado.
- Navegación estilo aplicación — una sensación nativa para la web móvil
- Acceso al carrito de un toque para mejorar la tasa de compra móvil
- Se ubica debajo del encabezado de Yuva — nunca compite con la navegación propia del tema
El campo Enlace de cada pestaña acepta una URL normal, open:NaviMenu(EMBED_ID) para abrir otro menú Navi+, o una acción abierta integrada que dispara los propios paneles de Yuva. Navi+ mantiene el cajón, búsqueda y carrito del tema — la pestaña simplemente los abre.
.navbar-togglera[class*='search']a[class*='cart']- En Navi+, crea un nuevo menú y elige Tab Bar.
- Agrega tus pestañas — nombre, icono, insignia de contador de carrito y enlaza cada una (p. ej. Inicio, Tienda, Búsqueda, Carrito, Menú).
- Para abrir el cajón nativo de Yuva, búsqueda o carrito, establece el enlace de pestaña a la acción abierta correspondiente. Para abrir un menú Navi+ Slide o Mega, usa
open:NaviMenu(EMBED_ID). - Abre Publish, habilita el modo fijo y establece el filtro de dispositivo en Mobile.
Reemplaza el cajón móvil de Yuva con un Menú Deslizable Navi+
Un Menú Deslizable reemplaza el cajón móvil predeterminado de Yuva con un panel de múltiples niveles más rico — iconos, imágenes y agrupación personalizada — abierto por el mismo hamburguesa que tus compradores ya usan.
- Navegación multinivel ilimitada con iconos e imágenes
- Mismo botón, misma posición — los compradores nunca notan el cambio
- Ideal para catálogos con muchas colecciones para organizar en móvil
El disparador de hamburguesa .navbar-toggler fue confirmado único en la demostración en vivo de Yuva, así que Navi+ abre el Menú Deslizable desde el botón exacto que los compradores ya tocan.
- En Navi+, crea un nuevo menú y elige Menú Deslizable.
- Agrega tus categorías con iconos, colores, imágenes y tantos niveles como necesites.
- Abre Publish, habilita el menú, luego establece el disparador en
.navbar-toggler— el selector de hamburguesa de Yuva. - Guarda. El Menú Deslizable ahora se abre desde ese botón. Agrega
(M)para mantenerlo solo en móvil.
Agregar un Menú Grid Navi+ al tema Yuva
Un Menú Grid muestra tus colecciones como una cuadrícula de imágenes — un lanzador estilo aplicación que permite a los compradores saltar a cualquier colección en un toque.
- Visual, centrado en imágenes — los compradores ven la colección antes de leer su nombre
- No se requiere selector de Yuva para montar
- Excelente para tiendas con muchas colecciones para navegar rápidamente
Un Menú Grid puede insertarse en un lugar fijo en cualquier página de Yuva (apúntalo a un selector CSS), o abrirse bajo demanda desde un FAB o una pestaña de Tab Bar — tu elección.
- En Navi+, crea un nuevo menú y elige Menú Grid.
- Agrega colecciones: imagen en miniatura, nombre para mostrar y enlace, ordenadas de la manera que desees que aparezcan en la cuadrícula.
- En Publish, habilita el método Insert/Replace, ingresa el selector CSS de destino y elige Insert After o Replace.
- ¿Prefieres una ventana emergente? Omite el selector y abrelo desde un FAB o pestaña con
open:NaviMenu(EMBED_ID).
Agregar un botón flotante Navi+ (FAB) al tema Yuva
Un FAB (Botón de Acción Flotante) es un botón flotante que permanece visible mientras se desplaza — un atajo rápido a cualquier página o acción. Sin selector de tema, implementado en minutos.
- Nunca entra en conflicto con ninguna parte de Yuva
- Flexible: enlazar al carrito, página de contacto, promoción, cualquier URL
- Funciona en escritorio y móvil
Un FAB se monta completamente por sí solo — sin necesidad del selector CSS del tema Yuva. Configúralo y publica sin probar ningún selector.
- En Navi+, crea un nuevo menú y elige FAB.
- Elige el icono, color de fondo y tamaño — usa un icono integrado o sube el tuyo.
- Elige una posición: abajo a la derecha (más común), abajo a la izquierda, o cualquier esquina fija.
- Establece la acción: enlaza a una colección, carrito, contacto o página de promoción, o abre otro menú (Grid, Slide…) con
open:NaviMenu(EMBED_ID). - Abre Publish y habilita el modo fijo. El FAB funciona en todos los dispositivos.
Agregar un Mega Menú móvil Navi+ al tema Yuva
En móvil, un Mega Menú se muestra como un panel de múltiples niveles — permitiendo a los compradores navegar tu catálogo completo en un teléfono con jerarquía clara, imágenes y banners.
- Menú multinivel con iconos e imágenes en pantallas pequeñas
- Abrelo debajo del encabezado o desde una pestaña de Tab Bar
- Excelente cuando una tienda tiene muchas categorías para mostrar en móvil
Un Mega Menú móvil es un menú de Sección. Insértalo directamente debajo del encabezado de Yuva, o abrelo desde una pestaña de Tab Bar — ambos funcionan sin vincularse al menú propio del tema.
- En Navi+, crea un nuevo menú, elige Mega Menú, y diseña las columnas multinivel (categorías, imágenes destacadas, banners).
- En Publish, habilita el método Insert/Replace, ingresa
header(M)y elige Insert After — se coloca debajo del encabezado móvil. - ¿Prefieres abrirlo desde una pestaña? Déjalo sin publicar aquí y apunta una pestaña "Menú" de Tab Bar a él con
open:NaviMenu(EMBED_ID). - Mantén el filtro de dispositivo en Móvil.
Insertar un Mega Menú Navi+ debajo del encabezado de Yuva
Inserta un Mega Menú debajo del encabezado — una barra desplegable de múltiples columnas que aparece justo debajo del encabezado de Yuva al pasar el ratón, sin cambios en el Liquid del tema.
- Desplegable de múltiples columnas con imágenes y enlaces destacados
- Deja el menú propio del tema intacto — ambos menús coexisten
- La forma más limpia de montar cuando el tema soporta inserción
Yuva es headerInsertSafe = true — un Mega Menú se inserta debajo del encabezado sin desbordamiento horizontal, y el menú nativo permanece en su lugar.
- En Navi+, crea un nuevo menú, elige Mega Menú, y diseña las columnas desplegables (categorías, imágenes destacadas, productos, banners).
- En Publish, habilita el método Insert/Replace.
- Ingresa el selector
.shopify-section-main-header(D)y elige Insertar después — la barra mega aparece directamente debajo del encabezado de Yuva. - El sufijo de dispositivo
(D)lo mantiene solo en escritorio.
Reemplaza el menú de escritorio de Yuva con un Mega Menú Navi+
El modo de reemplazo intercambia el menú nativo dentro del encabezado completamente — Navi+ renderiza directamente en ese contenedor, manteniendo intacto el diseño del encabezado de Yuva.
- Mantiene el lugar del menú en el encabezado — no se añade una barra extra
- Mejor cuando no quieres dos filas de navegación
- Funciona en cualquier tema, incluso sin
headerInsertSafe
El selector de menú principal ul[class*='list-menu'] fue confirmado — Navi+ renderiza el Mega Menú exactamente donde el menú nativo se ubica en el encabezado de Yuva.
- En Navi+, crea un nuevo menú, elige Mega Menú, y diseña las columnas desplegables.
- En Publish, habilita el método Insert/Replace.
- Ingresa el selector de navegación de escritorio
ul[class*='list-menu'](D)y elige Reemplazar — Navi+ renderiza en lugar del menú nativo de Yuva. - Después de elegir Reemplazar, optimiza para carga sin parpadeos — ver la guía de publicación.
Insertar un icono de disparador antes del logotipo de Yuva
Agrega un icono de disparador antes del logotipo — una hamburguesa personalizada justo al lado del logotipo de Yuva para temas sin hamburguesa móvil predeterminada, o como un segundo punto de entrada en tu menú Slide / Mega.
- Crea un nuevo punto de disparador sin editar Liquid
- Colocación natural — justo al lado del logotipo, familiar para los compradores
- Excelente para temas centrados en escritorio sin hamburguesa móvil
El selector de logotipo .logo-center fue confirmado en Yuva, así que Navi+ puede insertar un icono de disparador justo antes de él.
- Un patrón avanzado — para temas sin hamburguesa móvil, o para agregar un segundo punto de entrada.
- Construye un menú pequeño de un elemento (un Mega/Slide de un elemento) cuyo elemento abre tu Menú Deslizable principal con
open:NaviMenu(EMBED_ID). - En Publish, habilita el método Insert/Replace, ingresa
.logo-center(M)y elige Insert Before — el icono aparece antes del logo de Yuva. - Un poco de CSS personalizado lo alinea; comunícate con soporte si necesitas una mano.
11 Cómo agregar un menú Navi+ a Yuva
Cada tipo de menú en esta página sigue los mismos tres pasos. Habilita la aplicación una vez — luego cada menú nuevo es solo diseño y publicación. No se requiere edición de Liquid.
- Habilita Navi+ una vez. En el administrador de Shopify ve a Online Store → Themes → Customize → App embeds y activa Navi+. Esto carga la aplicación en tu tienda Yuva y cubre cada menú que construyas. Guía de instalación →
- Diseña el menú en el editor Navi+ — elementos, iconos, imágenes, columnas y colores.
- Publícalo. Abre el panel Publicar del menú. Los menús flotantes (Tab Bar, FAB) solo necesitan el botón de publicación; los menús de diapositivas y secciones apuntan a un selector CSS de la tabla anterior.
Agrega (M) o (D) a cualquier selector para dirigirse solo a móvil o solo a escritorio — por ejemplo header(D). ¿No estás seguro de un selector? Abre tutienda.com/#navidebug-on, pasa el ratón sobre un elemento y presiona Ctrl/Cmd + C para copiarlo.
Pruebas de interacción en vivo
Playwright hace clic automáticamente en la tienda de demostración en vivo de Yuva y captura el resultado.
Preguntas frecuentes — Navi+ en el tema Yuva de Shopify
¿Cómo agrego un menú Navi+ al tema Yuva de Shopify?
¿Cómo agrego una barra de pestañas al tema Yuva de Shopify?
a[class*='cart']).¿Cómo agrego un mega menú al tema Yuva de Shopify?
.shopify-section-main-header(D) con Insert After — sin edición de código de tema.¿Cómo reemplazo el menú móvil de Yuva con un menú deslizable?
.navbar-toggler. El menú deslizable se abre desde el mismo botón que los compradores ya tocan, reemplazando el cajón nativo.¿Necesito editar el código del tema de Yuva para agregar un menú?
¿Funciona Navi+ con el tema Yuva de Shopify?
Otros temas de la familia generic
Agregar menús Navi+ a otros temas de Shopify
Referencia de selectores
Contenedores de panel y selectores complementarios — utilizados para detección de estado u ocultamiento de elementos nativos.
| Rol | Selector CSS | Plataforma | Utilizado para |
|---|---|---|---|
| Cajón deslizable | [class*='mobile-nav'] |
Móvil | Cajón nativo — oculto cuando Navi+ Slide Menu está activo |
| Modal de búsqueda | [class*='search'][class*='drawer'] |
Móvil + Escritorio | Contenedor de panel de búsqueda — detectar estado abierto/cerrado |
| Cajón del carrito | [class*='drawer'][class*='cart'] |
Móvil + Escritorio | Contenedor de cajón de carrito — detectar estado abierto/cerrado |
| Mega menú | — | Escritorio | Sin mega menú nativo — Navi+ inserta uno en su lugar |