Cuando los comerciantes buscan una aplicación de menús, con frecuencia encuentran tutoriales para cartas de restaurantes en lugar de navegación de comercio electrónico—esta guía se enfoca estrictamente en diseñar y lanzar menús de navegación para tiendas online en Shopify. Configurar una app de navegación por primera vez en una tienda con ventas activas puede generar dudas, pero aprender a usarla no requiere saber código.
Diseña tus categorías en papel, practica en un tema duplicado, concéntrate en un solo tipo de menú a la vez y comprueba la respuesta táctil en un teléfono real antes de publicar.
- Practica en un tema duplicado: Una copia de seguridad mantiene tus ventas estables mientras experimentas.
- Domina un formato primero: Aprende un solo tipo—como una barra inferior o un panel lateral—antes de añadir más menús.
- Activa el app embed: Es imprescindible encender el interruptor de app embed en el editor de temas para que el menú se muestre.
Quick answer: how to get started with a Shopify menu builder app
Para empezar con una app de menú para Shopify, diseña tu menú en papel primero, elige un tipo de menú para aprender, activa el app embed en el editor de temas, crea unos pocos elementos, previsualiza en móvil y luego publica comprobando cada enlace:
- Step 1: Sketch your menu structure: Dibuja tus colecciones en papel y limpia tus enlaces nativos en Content > Menus.
- Step 2: Pick one menu type to learn first: Escoge una Tab Bar, un Mobile Drawer o un Mega Menu según tus visitantes.
- Step 3: Install the app and turn on the app embed: Instala la app, enciende el interruptor app embed en el editor y guarda.
- Step 4: Build your first menu: Crea 4 o 5 elementos clave con nombres directos, iconos e hipervínculos válidos.
- Step 5: Match your brand: Ajusta colores de fondo, tipografías y alineación con tu tema.
- Step 6: Preview on a phone and a desktop: Comprueba los toques en un tema duplicado usando un smartphone físico.
- Step 7: Publish, check every link, and fix common problems: Publica en la app y prueba los enlaces en tu tienda en vivo.
Si solo dispones de una hora, realiza los pasos 1 a 3 y el paso 6 en un tema duplicado.
Four terms to learn before you start
Antes de abrir paneles de configuración, familiarízate con estos cinco conceptos:
| Término | Qué significa | Dónde se observa |
|---|---|---|
| Menú | Una lista estructurada de enlaces para organizar accesos a productos, colecciones, páginas y artículos de blog (Shopify Help Center). | En el panel de Shopify en Content > Menus, y en el encabezado, pie de página o cajón. |
| Elemento de menú / enlace | Un componente interactivo que dirige a los visitantes a una página, colección, URL externa o ancla (#). |
Botones, textos enlazados o pestañas con iconos. |
| Nivel (Level) | La profundidad jerárquica de la navegación. En los menús nativos de Shopify, un elemento principal puede tener hasta dos niveles de submenús desplegables anidados debajo (Shopify Help Center). | Menús desplegables, columnas de mega menú y acordeones móviles. |
| App embed | Un elemento provisto por la app que flota o se superpone en el tema sin alterar el código Liquid base (Shopify Help Center). | En la barra lateral del editor de temas de Shopify, en la pestaña App embeds. |
| Publicar (Publish) | La acción que hace visible el nuevo menú a los clientes. Activar el app embed carga el script, pero algunas apps, incluida Navi+, también requieren pulsar publicar dentro de su panel de control. | Dentro del panel de la app de menú o al guardar ajustes del tema. |
Step 1: Sketch your menu structure before you open the app
No comiences abriendo la app de menú sin un esquema claro. Definir jerarquías directamente dentro del software genera confusión y menús sobrecargados. Prepara tu contenido en papel primero.
Enumera las páginas clave para tus compradores: colecciones destacadas, líneas principales de producto, páginas institucionales (Sobre nosotros, Envíos, Contacto) y tu blog (Shopify Help Center). Dibuja tu árbol de navegación (sketch your menu structure) en 2 o 3 niveles. Selecciona entre 4 y 5 categorías principales y ubica las subcolecciones debajo.
A continuación, dirígete en tu panel de administración a Content > Menus (Shopify Help Center). Revisa tus menús predeterminados, elimina enlaces caducados y verifica las URLs. Si un elemento principal sirve solo de agrupador y no debe conducir a ninguna página, ingresa # en el campo de enlace (Shopify Help Center).
Mantén un esquema ordenado: en la navegación estándar de Shopify, un elemento superior admite hasta dos niveles de menús desplegables anidados por debajo (Shopify Help Center). Dejar tus enlaces limpios en el panel de Shopify simplificará mucho conectarlos luego en la app.
Shopify’s own video shows how to nest menu items:
Step 2: Pick one menu type to learn first
Las aplicaciones actuales brindan numerosas opciones: barras inferiores, mega menús, cajones deslizantes y botones flotantes. Configurar todo a la vez en tu primera sesión resultará abrumador. Elige un tipo de menú para aprender primero (pick one menu type) tomando en cuenta el dispositivo que usan tus clientes.
Figura 1: Ilustración conceptual (Concept illustration) — Step 2: Pick one menu type to learn first
Mobile shoppers first
Si la mayoría de tus visitantes navega desde el móvil, lo importante es un menú fácil de encontrar y de tocar en el teléfono (mira la cita del Nielsen Norman Group más abajo). Para tiendas centradas en móviles, conviene aprender primero dos formatos:
- Tab Bar: Una barra de navegación fija anclada en la parte inferior de la pantalla del teléfono. Mantiene los accesos principales (Inicio, Catálogo, Buscar, Carrito) visibles en una única barra permanente.
- Mobile Drawer: Un panel lateral limpio que se desliza al tocarlo, organizando árboles extensos de categorías y accesos a la cuenta del usuario.
Desktop shoppers first
Si ofreces un catálogo amplio con múltiples departamentos y la mayoría de compras se efectúa desde ordenadores, opta por:
- Mega Menu: Un panel desplegable ancho que muestra varias columnas de categorías e imágenes promocionales de manera simultánea.
| Tipo de menú | Ideal para | Aprender primero si |
|---|---|---|
| Tab Bar | Alto tráfico móvil y un conjunto claro de 4 o 5 acciones diarias (Inicio, Tienda, Buscar, Carrito). | Mobile shoppers first: la mayor parte de tus pedidos se realiza desde smartphones. |
| Mobile Drawer | Catálogo extenso con varios subniveles que requiere navegación cómoda fuera de la pantalla. | Mobile shoppers first: buscas sustituir el menú lateral nativo de tu tema. |
| Mega Menu | Gran catálogo en pantallas de ordenador donde los usuarios necesitan una vista global inmediata. | Desktop shoppers first: los ordenadores representan tu principal volumen de ventas. |
El descubrimiento de productos se apoya en señales visuales evidentes. Como resumió Nielsen Norman Group en su investigación de navegación móvil: “visual salience, information scent, context, tappability signifiers, and user expectations also affect navigation discoverability on mobile devices” (Nielsen Norman Group).
Revisa nuestra guía sobre how to choose the right menu type para las dimensiones de tu tienda, y descubre cómo los negocios aplican tab bars and hybrid mobile navigation para ganar ergonomía táctil. Concéntrate en un solo formato por hoy.
Step 3: Install the app and turn on the app embed
Instala la app de menú que prefieras desde la Shopify App Store. Tras la instalación, la app aparecerá en Shopify Admin bajo Apps, aunque aún no mostrará nada en tu tienda pública.
Las apps modernas de Shopify operan mediante app embeds. Según explica Shopify, los app embeds son elementos proporcionados por la app que flotan o se muestran como superposiciones en tu tema (Shopify Help Center), sin tocar tu código Liquid permanente.
Para activar el app embed (turn on the app embed):
- En Shopify Admin, ve a Online Store > Themes.
- Ubica el tema de pruebas—idealmente un duplicado (ver Paso 6)—y pulsa en Customize.
- En la barra lateral izquierda, pulsa el icono de App embeds (Shopify Help Center).
- Busca tu app de menú y coloca el interruptor en Activado (On).
- Pulsa en Guardar (Save) arriba a la derecha.
- Abre la vista previa de tu tienda para ver la app en acción (Shopify Help Center).
La documentación técnica de Shopify señala que los app embeds pueden utilizarse con cualquier versión de tema (Shopify Help Center). Esto no implica que todas las apps de terceros encajen a la perfección con cualquier diseño personalizado sin ajustes. Ten presente esta regla de mantenimiento: si cambias de tema más adelante, deberás reactivar los app embeds en tu nuevo tema (Shopify Help Center).
Para conocer en detalle la arquitectura de temas, lee nuestra guía sobre how app embeds work with your theme.
Step 4: Build your first menu: items, links, and icons
Abre el panel de la app desde Shopify Admin. Es momento de estructurar tu primer menú. Mantén un alcance modesto: crea de 4 a 5 elementos principales basándote en tu boceto del Paso 1.
Consejos prácticos para construirlo:
- Etiquetas claras: Emplea términos reconocibles como “Novedades”, “Colecciones”, “Más vendidos” o “Ayuda”.
- Enlaces a destinos activos: Conecta cada botón con una colección o página publicada. Evita enlazar categorías vacías.
- Iconos intuitivos: Al montar una Tab Bar móvil, asocia cada opción con un icono evidente (casa para Inicio, lupa para Buscar, bolsa para Carrito) manteniendo el texto visible.
- Añade subelementos con moderación: Cuando el primer nivel esté claro, incorpora enlaces secundarios. Recuerda el límite de Shopify de hasta dos niveles de submenús anidados (Shopify Help Center).
- Conecta menús de Shopify existentes: Muchas aplicaciones ofrecen importar la estructura de Content > Menus. Si tu app lo permite, úsalo en lugar de escribirlo todo a mano.
Nota: Este artículo se centra en dominar la primera configuración funcional. Las técnicas complejas para mega menús de múltiples columnas con pancartas se abordan en análisis avanzados específicos.
Step 5: Match your brand: colors, fonts, and position
Un menú sin personalizar desentona y perjudica la confianza de tus clientes. Modifica los estilos para que se integre con la identidad visual de tu tienda.
Presta atención a tres áreas:
- Colores: Abre la configuración de tu tema activo y anota los códigos hexadecimales del fondo, encabezados y textos. Aplica estos códigos al fondo del menú, bordes, estados activos e iconos. Procura un buen contraste para visibilidad móvil bajo la luz del sol.
- Fuentes y tamaños: Emplea la misma tipografía que el cuerpo de texto de tu tema. Mantén tamaños de texto legibles y fáciles de tocar en el móvil.
- Ubicación: Ajusta la Tab Bar en la parte inferior, fija el Mobile Drawer al borde izquierdo y alinea el Mega Menu bajo el encabezado.
Asegúrate de que tu nuevo menú no bloquee botones clave nativos, como el botón flotante de “Añadir al carrito” o el chat de soporte.
Consulta nuestra guía sobre make navigation feel like your store para profundizar en coherencia estética.
Step 6: Preview on a phone and a desktop before you publish
Nunca publiques un menú nuevo directamente para tus clientes sin haberlo revisado. Aplica estas tres reglas de verificación:
Figura 2: Ilustración conceptual (Concept illustration) — Step 6: Preview on a phone and a desktop before you publish
- Duplicate theme first: Shopify aconseja que antes de editar tu tienda, “make a backup copy so that you can discard your changes and start again if you need to” (Shopify Help Center). En Online Store > Themes, pulsa en Actions > Duplicate. Activa la app y configura tu menú en esta copia para no exponer pruebas a clientes reales.
- Tap every item: No te fíes únicamente del simulador de escritorio. Preview on a phone: abre el enlace de vista previa en un teléfono real. Sostén el móvil con una mano y toca cada enlace y desplegable para comprobar la agilidad táctil.
- Check the theme menu: Comprueba si el menú original del tema continúa apareciendo. Dado que los menús se ubican en distintas posiciones según el tema (Shopify Help Center), tal vez necesites ocultar el menú de cabecera predeterminado para evitar duplicidades.
Examina también la vista en monitores de escritorio para corroborar el comportamiento en pantallas anchas.
Step 7: Publish, check every link, and fix common problems
Completadas las pruebas, estás listo para publicar. En algunas aplicaciones, incluida Navi+, encender el app embed solo carga los scripts; debes hacer clic en el botón de publicación dentro de la app para que el menú se aplique a tu tienda (Navi+ Help Center).
Check every link: Tras publicar, abre una pestaña en modo incógnito y pulsa cada enlace en tu tienda online activa. Si algo no se ve bien, revisa esta tabla de solución de problemas:
| Síntoma | Causa común | Solución |
|---|---|---|
| El menú no se muestra | El interruptor de app embed está apagado, no se guardaron los cambios (Shopify Help Center), o no se pulsó publicar dentro de la app (Navi+ Help Center). | Entra en Theme Editor > App embeds, enciende el interruptor, pulsa Save y luego publica en el panel de la app. |
| El menú desapareció al cambiar de tema | El app embed no está activado en el nuevo tema publicado (Shopify Help Center). | Abre Online Store > Themes > Customize en tu tema activo, ve a App embeds, activa la app y guarda. |
| Aparecen dos menús duplicados | El bloque de menú nativo del encabezado sigue mostrándose junto a la app (Shopify Help Center). | En el editor de temas, oculta el menú original del encabezado o sitúa la app en otra ubicación (como una Tab Bar inferior). |
Si experimentas problemas técnicos más complejos, acude a la documentación del desarrollador de la app.
Trade-offs: when you don’t need a menu builder app yet
Un análisis honesto reconoce que no toda tienda Shopify necesita instalar una app de menús. Comprender cuándo las herramientas básicas bastan te ahorrará tiempo y complicaciones.
Si administras una tienda con un catálogo pequeño—como un único producto o pocas referencias—el sistema nativo de Shopify en Content > Menus suele ser suficiente (Shopify Help Center). Sus menús admiten hasta dos niveles de submenús anidados (Shopify Help Center), proporcionando una solución ágil sin instalar herramientas extras.
Incorporar una app implica compromisos: gestionar un panel adicional, invertir tiempo en aprender su uso y acordarse de reactivar el app embed cada vez que cambies de tema (Shopify Help Center).
Ahora bien, cuando tu inventario crece y requieres una barra inferior fija para móviles, un cajón lateral personalizable o un mega menú con imágenes que tu tema no permite crear, dar el paso a una aplicación especializada es una decisión acertada.
Lee nuestro análisis sobre Shopify theme menu limitations para evaluar si tu tienda ha superado los márgenes de tu tema.
What to learn next: Icon Menu, Floating Button, and seasonal menus
Una vez que tu menú principal funcione sin fisuras, puedes explorar fórmulas de navegación más avanzadas:
- Icon Menu: Añade una hilera de iconos o imágenes circulares de categorías en la página de inicio para orientar visualmente a los compradores.
- Floating Button (FAB): Coloca un botón flotante en la esquina inferior para facilitar acceso rápido a seguimiento de envíos o chat.
- Menús por temporadas: Reestructura las categorías en periodos comerciales fuertes como rebajas o Black Friday, colocando las selecciones promocionales en primer lugar.
Aprende when an icon menu beats a text list para compras visuales, y evalúa el comportamiento de tus usuarios con las 5 metrics worth tracking tras el lanzamiento.
Where Navi+ fits
Si buscas una aplicación donde poner en práctica todos los pasos de este artículo en un entorno visual intuitivo, prueba Navi+ Tab Bar & Mega Menu.
Navi+ está diseñada para comerciantes de Shopify que desean crear barras inferiores fijas, mega menús de escritorio, cajones móviles, menús de iconos y botones flotantes mediante un editor de arrastrar y soltar (Shopify App Store). Puedes enlazar tus menús de Shopify ya creados, utilizar plantillas preconfiguradas y acelerar la creación con sugerencias de IA (Shopify App Store).
Dispone de un plan gratuito para aprender y configurar sin coste inicial (Shopify App Store). El flujo de publicación es muy directo: activa el app embed “Store Connector” en el editor de temas de Shopify, ajusta tu menú y pulsa “Publish to website” en el panel de Navi+ (Navi+ Help Center).
La documentación de Navi+ coincide plenamente con los consejos de seguridad de este artículo: “The best practice is to create a duplicate Theme and test Navi+ on that version first” (Navi+ Help Center). De este modo, afinas los toques en tu teléfono antes de que los clientes lo vean.
Action checklist: your first-session plan
Ten a mano esta lista de verificación durante tu primera sesión de trabajo:
- Sketch your menu structure: Dibuja tus 4–5 categorías y subcolecciones en papel.
- Tidy Content > Menus: Elimina enlaces obsoletos en el panel de Shopify (Shopify Help Center).
- Duplicate theme first: Genera un tema de respaldo en Themes para trabajar seguro (Shopify Help Center).
- Pick one menu type: Escoge un único formato: Tab Bar, Mobile Drawer o Mega Menu.
- Turn on the app embed: Activa el app embed en el editor de temas y guarda (Shopify Help Center).
- Build 4–5 core items: Asigna títulos comprensibles, iconos representativos y enlaces válidos.
- Match colors/fonts: Iguala las fuentes y códigos de color de tu tema.
- Tap every item on a phone: Abre la vista previa en un teléfono real y toca todos los botones.
- Publish and check every link: Pulsa publicar en la app y comprueba los enlaces en vivo (Navi+ Help Center).
- Re-check after theme changes: Recuerda reactivar el app embed si renuevas tu tema (Shopify Help Center).
Si quieres practicar estos pasos en una sola app, Navi+ Tab Bar & Mega Menu tiene un plan gratuito, plantillas listas para usar y puede conectar tus menús de Shopify existentes: empieza en un tema duplicado y publica cuando estés conforme.
FAQ
¿Qué tipo de menú debo construir primero?
Comienza por el formato que responda a dónde compran tus clientes: opta por Tab Bar o Mobile Drawer si navegan desde el móvil, o por Mega Menu si gestionas muchas categorías en ordenador.
¿Necesito modificar los menús de Shopify antes?
Es aconsejable organizar previamente Content > Menus para depurar los enlaces maestros (Shopify Help Center); además, apps como Navi+ pueden importar tus menús existentes de forma directa (Shopify App Store).
¿Cómo activo un app embed en Shopify?
En el editor de temas de Shopify, pulsa el icono de App embeds en la barra izquierda, enciende el interruptor de tu app de menú y pulsa Guardar (Shopify Help Center).
¿Por qué no aparece el menú de la app en la tienda?
Suele deberse a que el app embed no está activado o guardado en el editor (Shopify Help Center), no se reactivó tras cambiar de tema (Shopify Help Center), o no se pulsó el botón de publicar en la app (Navi+ Help Center).
¿Puedo probar los cambios sin que los clientes los vean?
Sí. Duplica tu tema activo en Shopify, enciende el app embed y monta el menú en esa copia para revisarlo en tu teléfono antes de publicarlo en tu tema principal (Shopify Help Center; Navi+ Help Center).
¿Cuántos niveles puede tener un menú desplegable de Shopify?
En los menús estándar de Shopify, un elemento principal puede tener hasta dos niveles de submenús anidados por debajo (Shopify Help Center).
Sources
- Shopify Help Center: Set up drop-down menus in your online store
- Shopify Help Center: Menus and links
- Shopify Help Center: App embeds and theme extensions
- Shopify Help Center: Duplicating themes
- Nielsen Norman Group: Mobile Navigation Discoverability
- Navi+ Help Center: Publishing on Shopify
- Shopify App Store: Navi+ Tab Bar & Mega Menu
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.