Add a mega menu to Shopify's Sunrise theme — Navi+ setup
En la tienda de demostración en vivo: el Slide Menu se vincula con la hamburguesa existente (.menu-button) y oculta el cajón nativo (#shopify-section-sections--19194578305076__sidebar) — 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 | .menu-button |
Móvil | Navi+ se vincula aquí para activar Slide Menu |
| Encabezado | [id$='__header'] |
Móvil + Escritorio | Insertar Mega Menu debajo del encabezado de Sunrise |
| Menú principal | header nav ul |
Escritorio | Navi+ Mega Menu reemplaza el contenido de navegación de escritorio |
| Logotipo | .logo |
Móvil + Escritorio | Fallback — insertar icono de disparador antes del logotipo cuando no hay hamburguesa |
| Disparadores de panel | |||
| Disparador de hamburguesa | .menu-button |
Móvil | Tocar para abrir el cajón móvil nativo |
| Icono de búsqueda | button[aria-label*='search' i] |
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 Sunrise 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 Sunrise 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 Sunrise — 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 Sunrise. Navi+ mantiene el cajón, búsqueda y carrito del tema — la pestaña simplemente los abre.
.menu-buttonbutton[aria-label*='search' i]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 Sunrise, 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 Sunrise con un Menú Deslizable Navi+
Un Menú Deslizable reemplaza el cajón móvil predeterminado de Sunrise 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 .menu-button fue confirmado único en la demostración en vivo de Sunrise, 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
.menu-button— el selector de hamburguesa de Sunrise. - 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 Sunrise
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 Sunrise 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 Sunrise (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 Sunrise
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 Sunrise
- 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 Sunrise. 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 Sunrise
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 Sunrise, 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 Sunrise
Inserta un Mega Menú debajo del encabezado — una barra desplegable de múltiples columnas que aparece justo debajo del encabezado de Sunrise 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
Sunrise 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
[id$='__header'](D)y elige Insertar después — la barra mega aparece directamente debajo del encabezado de Sunrise. - El sufijo de dispositivo
(D)lo mantiene solo en escritorio.
Reemplaza el menú de escritorio de Sunrise 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 Sunrise.
- 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 header nav ul fue confirmado — Navi+ renderiza el Mega Menú exactamente donde el menú nativo se ubica en el encabezado de Sunrise.
- 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
header nav ul(D)y elige Reemplazar — Navi+ renderiza en lugar del menú nativo de Sunrise. - 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 Sunrise
Agrega un icono de disparador antes del logotipo — una hamburguesa personalizada justo al lado del logotipo de Sunrise 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 fue confirmado en Sunrise, 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(M)y elige Insert Before — el icono aparece antes del logo de Sunrise. - Un poco de CSS personalizado lo alinea; comunícate con soporte si necesitas una mano.
11 Cómo agregar un menú Navi+ a Sunrise
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 Sunrise 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 Sunrise y captura el resultado.
Preguntas frecuentes — Navi+ en el tema Sunrise de Shopify
¿Cómo agrego un menú Navi+ al tema Sunrise de Shopify?
¿Cómo agrego una barra de pestañas al tema Sunrise de Shopify?
a[class*='cart']).¿Cómo agrego un mega menú al tema Sunrise de Shopify?
[id$='__header'](D) con Insert After — sin edición de código de tema.¿Cómo reemplazo el menú móvil de Sunrise con un menú deslizable?
.menu-button. 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 Sunrise para agregar un menú?
¿Funciona Navi+ con el tema Sunrise 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 | #shopify-section-sections--19194578305076__sidebar |
Móvil | Cajón nativo — oculto cuando Navi+ Slide Menu está activo |
| Modal de búsqueda | — | Móvil + Escritorio | Contenedor de panel de búsqueda — detectar estado abierto/cerrado |
| Cajón del carrito | — | 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 |