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