Quick answer: how to create a menu with the Navi+ app on Shopify
Para crear un menú con la aplicación Navi+ en Shopify, instale Navi+ desde la Shopify App Store, haga clic en Add menu, elija un tipo de menú, comience con una plantilla, un menú en blanco o IA, luego active Store Connector en las incrustaciones de la app y publique.
- Instale Navi+ desde la Shopify App Store y abra el panel de la aplicación.
- Haga clic en Add menu y elija el formato de navegación que prefiera.
- Comience desde una plantilla prediseñada, un lienzo en blanco o una estructura IA.
- Añada, ordene y personalice enlaces a colecciones, productos o páginas.
- Active Store Connector en las incrustaciones de la app del tema, guarde y haga clic en Publish to website.
- Compruebe la navegación en vivo en dispositivos móviles y navegadores de escritorio.
No se necesita código del tema. Navi+ funciona mediante un app embed de tema de Shopify, así que crea y previsualiza el menú en la app en lugar de editar archivos del tema.
Before you start: which Navi+ menu type do you need?
Elegir el formato de navegación adecuado antes de construir le ayuda a evitar rehacer el trabajo. Cada tienda tiene un catálogo de distinto tamaño, así que elija el tipo que encaje con la forma en que sus clientes navegan.
Figura 1: Ilustración conceptual (Concept illustration) — Before you start: which Navi+ menu type do you need?
| Menu type | What it does | Good first choice when… |
|---|---|---|
| Tab Bar | Añade una barra de navegación fija en la parte inferior de la pantalla móvil | El tráfico de su tienda es sobre todo móvil y busca acceso rápido a páginas clave |
| Mobile Menu | Crea un menú desplegable lateral o hamburguesa para todo su catálogo | Necesita un directorio móvil ordenado que estructure grandes grupos de productos |
| Desktop Mega Menu | Crea desplegables de varias columnas con productos, colecciones y promociones | Los compradores en escritorio necesitan ver varios departamentos a la vez |
| Mobile Mega Menu | Crea un diseño de megamenú pensado para pantallas móviles | Un catálogo de varios niveles necesita rutas de exploración más profundas sin saturar una pantalla pequeña |
| Icon Menu y Floating Button | Añade mosaicos de iconos o un botón flotante que enlazan a productos, colecciones o páginas | Quiere acceso rápido a soporte, el carrito o promociones destacadas sin ocupar el encabezado |
Las tiendas con mayoría de visitas móviles pueden empezar con una Tab Bar o un Mobile Menu. Como señala Nielsen Norman Group, la navegación oculta es menos fácil de descubrir que la visible. Una Tab Bar fija mantiene los destinos clave a la vista en lugar de esconderlos tras un menú cerrado.
Aunque puede habilitar varios tipos de menú a la vez, la mejor práctica es completar y probar un solo menú antes de sumar otro. Para un marco de decisión detallado, consulte nuestra guía sobre cómo elegir el tipo de menú adecuado.
Step 1: Install Navi+ from the Shopify App Store
Diríjase a la página de Navi+ Tab Bar & Mega Menu en la Shopify App Store. Instalar desde la tienda oficial le lleva por el flujo de instalación estándar de Shopify.
Haga clic en Install para empezar la configuración. Shopify muestra su pantalla de permisos estándar. Navi+ muestra sus menús mediante un app embed de tema, que activará en el Paso 5.
Apruebe los permisos para completar la instalación. Una vez finalizado el proceso, la aplicación se abrirá automáticamente en su panel de administración de Shopify. En el futuro, acceda al editor en cualquier momento pulsando en Apps en la barra lateral izquierda.
Step 2: Click Add menu and choose a starting point (template, blank, or AI)
En el panel de Navi+, pulse el botón destacado Add menu. Se abrirá la pantalla Choose kind of menu con seis tarjetas: Tab Bar, Mobile Menu, Desktop Mega Menu, Mobile Mega Menu, Icon Menu y Floating Button. Seleccione la tarjeta que coincida con su objetivo.
Start from a template
Elija Create from a template para explorar diseños prediseñados. Cuando encuentre una estructura afín a su catálogo, pulse Use this template. El editor cargará enlaces de ejemplo, iconos y estilos que podrá modificar directamente.
Start blank
Elija Blank si ya tiene planificada su estructura en papel. Esta opción brinda total libertad sin tener que borrar enlaces de prueba. Si aún no ha definido su jerarquía, revise nuestra guía para dibujar la estructura de su menú antes de empezar.
Build the structure with AI
Si prefiere un borrador rápido sin teclear todo a mano, use el asistente de IA integrado. Describa el concepto de su tienda y su catálogo en palabras sencillas. La IA generará un esquema de menú directamente en el editor. Usted mantiene el control para ajustar enlaces, conectar colecciones y cambiar colores.
Use your existing Shopify menu
Navi+ también puede conectarse a un menú de navegación de Shopify existente como punto de partida. Una vez en el editor, revise las posiciones anidadas antes de publicar y vuelva a revisarlas cada vez que cambie el menú original en Shopify.
Step 3: Add and arrange menu items
Añadir y reordenar elementos se hace con edición de arrastrar y soltar. Puede añadir elementos nuevos, arrastrarlos para cambiar el orden y anidarlos bajo un elemento padre.
Link to products, collections, and pages
Cada elemento del menú requiere un destino activo. En Navi+, los elementos pueden enlazar a productos, colecciones y páginas. Organice las categorías con lógica, mantenga títulos breves en el primer nivel, ponga primero las colecciones más vendidas y consulte nuestra guía sobre cómo configurar enlaces de menú en Shopify.
Nest items up to three levels
En catálogos amplios, anidar elementos evita la sobrecarga visual. Con el paquete Business de Navi+, puede estructurar su menú hasta en tres niveles de profundidad. En comparación, el menú nativo de Shopify permite hasta dos niveles de menús desplegables anidados según la documentación oficial.
Step 4: Customize icons, images, colors, and layout
Cuando el árbol esté listo, ajuste el estilo a su marca. Para una Tab Bar, elija iconos claros y compruebe que las etiquetas se lean bien en el móvil. Para los Mega Menus, añada imágenes de colecciones y elija un diseño que encaje con su catálogo.
Ajuste los colores de texto y de fondo al tema de Shopify activo. Compruebe siempre el contraste del texto y de los iconos en una pantalla de móvil real para confirmar que se leen bien.
Antes de publicar en vivo, abra la pestaña Publish y use Test this menu para previsualizar el menú. Para profundizar en el estilo, consulte nuestra guía sobre cómo cambiar el estilo de su menú.
Step 5: Turn on Store Connector in App embeds, then publish
Mostrar Navi+ en su tienda no requiere escribir ni editar código del tema. Funciona mediante un app embed de tema de Shopify.
Figura 2: Ilustración conceptual (Concept illustration) — Step 5: Turn on Store Connector in App embeds, then publish
Test on a duplicate theme first
Si su tienda recibe visitas habitualmente, lo más aconsejable es probar en un tema duplicado. Siguiendo las directrices de gestión de temas de Shopify, duplicar su tema activo crea una copia de seguridad segura para verificar los cambios sin alterar la experiencia de sus clientes.
Turn on Store Connector
En el panel de Shopify, vaya a Online Store > Themes y pulse Customize en su tema. En la barra lateral, pulse en el icono de App embeds, busque Store Connector, active el interruptor siguiendo las instrucciones de Shopify y pulse Save. Solo necesita hacer esta activación una vez por sitio web.
Click Publish to website
Vuelva al panel de Navi+, abra su menú y haga clic en Publish to website. La app le mostrará opciones de ubicación adaptadas a su menú—como Replace your main menu, Add below your header o Use your existing menu icon. Navi+ organiza las publicaciones en tres grupos y le guiará hacia la opción compatible. Confirme su elección y active la publicación.
Step 6: Preview on mobile and desktop and fix common problems
Tras publicar, revise su tienda en pantallas de escritorio y en teléfonos móviles reales. Las pantallas táctiles revelan detalles de ergonomía y separación de botones que los simuladores de escritorio no logran reproducir fielmente.
| Symptom | Likely cause | Fix |
|---|---|---|
| Menu does not appear | Store Connector está activo en otro tema o no se guardaron los cambios | En el editor del tema activo active Store Connector en App embeds y pulse Save |
| Two menus show at once | El menú original del tema sigue visible junto al menú de la app | En la configuración de Navi+ elija Replace your main menu u oculte el bloque del tema |
| Menu disappeared after changing theme | Las incrustaciones de apps no se transfieren solas a un nuevo tema | Abra el editor del nuevo tema, active Store Connector en App embeds y pulse Save |
Menu does not appear
Si el menú no aparece tras publicar, confirme que activó el interruptor Store Connector en el tema activo y no en un borrador, y asegúrese de haber pulsado Save en el editor de temas.
Two menus show at once
Si aparecen ambos menús a la vez, el bloque de navegación nativo sigue ocupando la cabecera. Seleccione Replace your main menu en la configuración de Navi+ o desactive el menú predeterminado en la sección de cabecera de su tema.
Menu disappeared after changing theme
Al cambiar o actualizar su tema en Shopify, las incrustaciones de aplicaciones no se activan solas. Abra el editor del nuevo tema, active Store Connector en App embeds y guarde. Para más detalles, revise nuestra lista de comprobación completa si su menú no aparece.
How to turn off a Navi+ menu or go back to your theme menu
Volver a la navegación por defecto no requiere editar el código del tema, porque Navi+ funciona mediante un app embed.
Para desactivar un menú concreto manteniendo la app activa, abra el panel de Navi+. Cada menú creado muestra un estado On / Off. Al pasar un menú a Off deja de mostrarse en su tienda en vivo, de modo que el menú por defecto del tema puede volver a verse.
Si desea apagar todos los menús de Navi+ en un tema, vaya a Online Store > Themes > Customize, abra la pestaña de App embeds, desactive Store Connector y pulse Save. Si utilizó un tema duplicado, descarte la copia de prueba.
Trade-offs: when you don’t need Navi+ yet
Aunque los creadores de menús ofrecen excelentes funciones, instalar una app especializada no siempre es necesario para cualquier tienda de Shopify:
Primero, si su catálogo es muy reducido, la navegación integrada de Shopify—que admite hasta dos niveles de menús desplegables—junto con el menú móvil estándar de su tema suele ser suficiente. Instalar una app externa para cinco enlaces añade una gestión innecesaria.
Segundo, cualquier incrustación de aplicación requiere atención al cambiar de plantilla. Cuando estrene un nuevo tema, deberá recordar activar nuevamente el Store Connector en dicho tema.
Tercero, aunque la IA proporciona una estructura inicial muy útil, no entrega un menú totalmente terminado. Deberá dedicar tiempo a verificar enlaces, enlazar colecciones y coordinar colores.
Por último, activar demasiados formatos de menú a la vez—como Tab Bar, menú lateral y botones flotantes juntos—puede saturar las pantallas móviles y confundir a los compradores si no hay un orden claro.
Where Navi+ fits
Una vez que su primer menú esté funcionando correctamente en su tienda, el siguiente paso suele ser incorporar un formato complementario para otro uso. Por ejemplo, muchos comercios combinan una Tab Bar inferior para accesos rápidos (búsqueda, carrito y productos estrella) con un Mobile Menu lateral para todo el catálogo. Un botón Floating Button discreto también ayuda a contactar con soporte.
Todos los menús adicionales se gestionan desde el mismo botón Add menu en su panel. Además, los componentes de Navi+ también pueden utilizarse en webs fuera de Shopify sin programar. Para planificar su navegación multidispositivo, lea nuestra guía para crear un menú de escritorio y un menú móvil.
Si su primer menú ya está activo, el siguiente paso suele ser añadir un segundo menú para otra función — como un Mobile Menu para todo el catálogo junto a la Tab Bar. Puede crearlo desde ese mismo botón Add menu. Si todavía no ha instalado la herramienta, comience instalando Navi+ Tab Bar & Mega Menu en la Shopify App Store.
Action checklist
Siga esta lista práctica para planificar, publicar y revisar su menú de navegación en Shopify:
- Elija el tipo de menú que mejor se adapte al objetivo inmediato de su tienda
- Haga clic en Add menu dentro del panel de control de Navi+
- Seleccione una vía de inicio: plantilla prediseñada, lienzo en blanco o esquema IA
- Añada enlaces de destino para productos, colecciones y páginas informativas
- Limite la profundidad de las categorías a un máximo de tres niveles
- Use Test this menu en la pestaña Publish para validar el diseño visual
- Duplique su tema activo para realizar pruebas seguras si tiene visitas en vivo
- Active Store Connector en App embeds y pulse en Save
- Haga clic en Publish to website y escoja la ubicación de visualización
- Verifique la respuesta del menú en teléfonos inteligentes reales y escritorio
Instale Navi+ Tab Bar & Mega Menu en la Shopify App Store para diseñar menús profesionales sin editar código.
FAQ
Do I need to edit theme code to show a Navi+ menu?
No. No necesita modificar ningún archivo Liquid ni código de su tema. Solo tiene que activar la incrustación de la app Store Connector en el editor del tema y publicar el menú en la aplicación. Según la documentación, esta activación solo se realiza una vez por sitio web.
Can I use my existing Shopify menu with Navi+?
Sí. Navi+ puede conectarse a sus menús de Shopify existentes. Tras conectarlos, revise cada nivel anidado para comprobar que las categorías y los enlaces se ven como desea.
Should I start from a template or with AI?
Comenzar con una plantilla es más rápido si le convence un diseño previo. La herramienta de IA genera un esquema estructurado a partir de su descripción, pero requerirá que usted enlace los productos, imágenes y colores manualmente.
How many levels can a Navi+ menu have?
Con el plan Business, puede organizar menús de hasta tres niveles de profundidad. En comparación, el menú nativo de Shopify permite un elemento superior con hasta dos niveles de menús desplegables.
How do I turn a Navi+ menu off?
Puede desactivar cualquier menú en cualquier momento cambiando su estado a Off en el panel de Navi+. Para desactivar todos los menús en un tema, desactive Store Connector en las incrustaciones de la app del editor de temas y guarde.
Why is my Navi+ menu not showing?
El motivo más frecuente es que Store Connector se activó en un tema en borrador y no en el activo, o que no se guardaron los cambios. Si cambió de tema recientemente, debe activar la incrustación en el nuevo tema.
Sources
- Shopify App Store: Navi+ Tab Bar & Mega Menu
- Navi+ Help: How to install Navi+
- Navi+ Help: Publishing on Shopify
- Navi+ Help: Menu Depth
- Navi+ Help: Create Menu Structure with AI
- Navi+ Help: Publish Overview
- Shopify Help Center: App embeds
- Shopify Help Center: Duplicating themes
- Shopify Help Center: Drop-down menus
- Shopify Help Center: Menus and links
- Nielsen Norman Group: Hamburger Menus and Hidden Navigation
- Product Hunt: Navi+ Menu Builder
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.