Add a mega menu to Shopify's Origin theme — Navi+ setup
Origin es el tema de referencia gratuito de Shopify para Online Store 2.0 (familia dawn). Esta página documenta los selectores de navegación encontrados en la tienda de demostración en vivo y la configuración recomendada para cada tipo de menú de Navi+.
1 Análisis del tema
dawn 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+ | |||
| Encabezado | .section-header |
Móvil + Escritorio | Insertar Mega Menu debajo del encabezado de Origin |
| Logotipo | .header__heading-link |
Móvil + Escritorio | Fallback — insertar icono de disparador antes del logotipo cuando no hay hamburguesa |
| Disparadores de panel | |||
| Icono de búsqueda | .header__icon--search |
Móvil + Escritorio | Tocar para abrir el panel de búsqueda / superposición |
| Icono de carrito | #cart-icon-bubble |
Móvil + Escritorio | Tocar para abrir el cajón de carrito / panel |
Agregar una Tab Bar Navi+ al tema Origin 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 Origin 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 Origin — 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 Origin. Navi+ mantiene el cajón, búsqueda y carrito del tema — la pestaña simplemente los abre.
.header__icon--search#cart-icon-bubble- 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 Origin, 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 Origin con un Menú Deslizable Navi+
Un Menú Deslizable reemplaza el cajón móvil predeterminado de Origin 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
No se detectó un disparador de hamburguesa estándar en la demostración de Origin — el tema puede usar un selector no estándar. Obtén el correcto con Navi+ Debug Mode en tu propia tienda.
- En Navi+, crea un nuevo menú y elige Menú Deslizable.
- Agrega tus categorías con iconos, imágenes y múltiples niveles.
- Abre Publish, habilita el menú, luego ingresa el selector CSS de hamburguesa de tu tema como disparador.
- Guarda — el Menú Deslizable se abre desde ese botón.
Agregar un Menú Grid Navi+ al tema Origin
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 Origin 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 Origin (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 Origin
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 Origin
- 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 Origin. 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 Origin
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 Origin, 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 Origin
Inserta un Mega Menú debajo del encabezado — una barra desplegable de múltiples columnas que aparece justo debajo del encabezado de Origin 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
Origin no es headerInsertSafe — insertar debajo del encabezado puede causar desbordamiento horizontal. Usa modo de reemplazo en su lugar (ver más abajo).
- 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
.section-header(D)y elige Insertar después — la barra mega aparece directamente debajo del encabezado de Origin. - El sufijo de dispositivo
(D)lo mantiene solo en escritorio.
Reemplaza el menú de escritorio de Origin 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 Origin.
- 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
No se detectó un selector de menú principal en la demostración en vivo de Origin — ingrésalo manualmente (encuentra lo con Navi+ Debug Mode).
- 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
nav.header__inline-menu ul.list-menu(D)y elige Reemplazar — Navi+ renderiza en lugar del menú nativo de Origin. - 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 Origin
Agrega un icono de disparador antes del logotipo — una hamburguesa personalizada justo al lado del logotipo de Origin 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 .header__heading-link fue confirmado en Origin, 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
.header__heading-link(M)y elige Insert Before — el icono aparece antes del logo de Origin. - Un poco de CSS personalizado lo alinea; comunícate con soporte si necesitas una mano.
11 Cómo agregar un menú Navi+ a Origin
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 Origin 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 Origin y captura el resultado.
Preguntas frecuentes — Navi+ en el tema Origin de Shopify
¿Cómo agrego un menú Navi+ al tema Origin de Shopify?
¿Cómo agrego una barra de pestañas al tema Origin de Shopify?
#cart-icon-bubble).¿Cómo agrego un mega menú al tema Origin de Shopify?
nav.header__inline-menu ul.list-menu(D) con Replace — sin edición de código de tema.¿Necesito editar el código del tema de Origin para agregar un menú?
¿Funciona Navi+ con el tema Origin de Shopify?
Otros temas de la familia dawn
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 | — | Móvil | Cajón nativo — oculto cuando Navi+ Slide Menu está activo |
| Modal de búsqueda | .search-modal |
Móvil + Escritorio | Contenedor de panel de búsqueda — detectar estado abierto/cerrado |
| Cajón del carrito | cart-drawer |
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 |