Add a mega menu to Shopify's Palo Alto theme — Navi+ setup
En la tienda de demostración en vivo: el Slide Menu se vincula con la hamburguesa existente (.mobile-menu__button--burger) y oculta el cajón nativo (#nav-drawer-section) — 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 | .mobile-menu__button--burger |
Móvil | Navi+ se vincula aquí para activar Slide Menu |
| Encabezado | .header-group |
Móvil + Escritorio | Insertar Mega Menu debajo del encabezado de Palo Alto |
| Menú principal | #NavStandard |
Escritorio | Navi+ Mega Menu reemplaza el contenido de navegación de escritorio |
| Logotipo | #SiteHeader |
Móvil + Escritorio | Fallback — insertar icono de disparador antes del logotipo cuando no hay hamburguesa |
| Disparadores de panel | |||
| Disparador de hamburguesa | .mobile-menu__button--burger |
Móvil | Tocar para abrir el cajón móvil nativo |
| Icono de búsqueda | .search-popdown__body |
Móvil + Escritorio | Tocar para abrir el panel de búsqueda / superposición |
| Icono de carrito | a.mobile-menu__button |
Móvil + Escritorio | Tocar para abrir el cajón de carrito / panel |
Agregar una Tab Bar Navi+ al tema Palo Alto 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 Palo Alto 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 Palo Alto — 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 Palo Alto. Navi+ mantiene el cajón, búsqueda y carrito del tema — la pestaña simplemente los abre.
.mobile-menu__button--burger.search-popdown__bodya.mobile-menu__button- 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 Palo Alto, 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 Palo Alto con un Menú Deslizable Navi+
Un Menú Deslizable reemplaza el cajón móvil predeterminado de Palo Alto 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 .mobile-menu__button--burger fue confirmado único en la demostración en vivo de Palo Alto, 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
.mobile-menu__button--burger— el selector de hamburguesa de Palo Alto. - 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 Palo Alto
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 Palo Alto 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 Palo Alto (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 Palo Alto
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 Palo Alto
- 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 Palo Alto. 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 Palo Alto
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 Palo Alto, 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 Palo Alto
Inserta un Mega Menú debajo del encabezado — una barra desplegable de múltiples columnas que aparece justo debajo del encabezado de Palo Alto 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
Palo Alto 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
.header-group(D)y elige Insertar después — la barra mega aparece directamente debajo del encabezado de Palo Alto. - El sufijo de dispositivo
(D)lo mantiene solo en escritorio.
Reemplaza el menú de escritorio de Palo Alto 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 Palo Alto.
- 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 #NavStandard fue confirmado — Navi+ renderiza el Mega Menú exactamente donde el menú nativo se ubica en el encabezado de Palo Alto.
- 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
#NavStandard(D)y elige Reemplazar — Navi+ renderiza en lugar del menú nativo de Palo Alto. - 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 Palo Alto
Agrega un icono de disparador antes del logotipo — una hamburguesa personalizada justo al lado del logotipo de Palo Alto 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 #SiteHeader fue confirmado en Palo Alto, 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
#SiteHeader(M)y elige Insert Before — el icono aparece antes del logo de Palo Alto. - Un poco de CSS personalizado lo alinea; comunícate con soporte si necesitas una mano.
11 Cómo agregar un menú Navi+ a Palo Alto
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 Palo Alto 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 Palo Alto y captura el resultado.
Preguntas frecuentes — Navi+ en el tema Palo Alto de Shopify
¿Cómo agrego un menú Navi+ al tema Palo Alto de Shopify?
¿Cómo agrego una barra de pestañas al tema Palo Alto de Shopify?
a.mobile-menu__button).¿Cómo agrego un mega menú al tema Palo Alto de Shopify?
.header-group(D) con Insert After — sin edición de código de tema.¿Cómo reemplazo el menú móvil de Palo Alto con un menú deslizable?
.mobile-menu__button--burger. 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 Palo Alto para agregar un menú?
¿Funciona Navi+ con el tema Palo Alto 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 | #nav-drawer-section |
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*='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 |