How to Add a Menu Built in a Menu App to Your Shopify Store (Theme Embed, Placement & Troubleshooting)

Creaste la navegación en una aplicación de menú, pero no aparece en tu tienda online. Agregar un menú de app a Shopify requiere una regla fundamental: el menú reside en la aplicación, no en tu tema. Solo se muestra después de activar el app embed del tema, publicar en la aplicación y configurar su ubicación.

Quick answer: how to add a menu from a menu app to your Shopify store

Un menú de app reside en la app, no en Shopify Content > Menus, y solo aparece una vez conectado a tu tema. Activa el app embed, guarda, publica en la app, elige la ubicación, oculta el menú del tema y comprueba la tienda en vivo.

Sigue estos cinco pasos:

1. En el panel de Shopify, ve a Online Store > Themes > Customize, abre Theme settings > App embeds, activa tu aplicación y haz clic en Save.
2. En el panel de tu aplicación de menú, haz clic en publicar para lanzar tu menú.
3. Elige la ubicación: floating overlay, selector CSS (insert/replace) o un bloque de app.
4. Oculta o desasigna el menú de cabecera predeterminado del tema para evitar duplicados.
5. Previsualiza los diseños en escritorio y móvil, luego verifica la tienda en vivo en una ventana de incógnito.

Si aún no has creado tu estructura de navegación, comienza con nuestra guía paso a paso de aplicaciones de menú.

Why a menu built in an app doesn’t appear on its own

En Shopify, gestionas los enlaces nativos desde Content > Menus, y los temas los muestran automáticamente a través de la configuración de la sección Header.

Las aplicaciones de menú guardan tus menús dentro de la propia aplicación. Según la documentación para desarrolladores de Shopify, los bloques de app embed están desactivados por defecto tras la instalación, y los temas no incluyen automáticamente los bloques de app. Instalar una aplicación no inserta por sí solo su menú en la tienda. Tus menús en Content > Menus siguen donde estaban.

El editor integrado de Shopify permite que un elemento de primer nivel tenga hasta dos niveles de menús desplegables anidados. Para diseños que superan las funciones nativas, los comerciantes crean el menú en una aplicación de menús de navegación.

Este video oficial de Shopify muestra el editor de menús integrado, que funciona de forma independiente a tu aplicación de menús.

Step 1: Turn on the app embed in the theme editor

El primer paso consiste en activar el app embed de tu tema. Según Shopify, los app embeds son elementos proporcionados por aplicaciones que flotan o se muestran como una superposición en tu tema.

Para activar el app embed:

1. En el panel de Shopify, ve a Online Store > Themes.
2. Haz clic en Customize en el tema que deseas editar.
3. En la barra lateral, abre Theme settings > App embeds.
4. Localiza tu aplicación de menú en la lista.
5. Junto al app embed, activa el interruptor.
6. Haz clic en Save.

Antes de editar, duplica tu tema. El Centro de Ayuda de Shopify señala que duplicar tu tema permite descartar cambios si es necesario, y Helium también aconseja duplicar primero el tema activo.

Los app embeds funcionan en temas vintage y Online Store 2.0. Activar un embed afecta únicamente al tema editado; los temas en borrador no actualizan la tienda en vivo hasta que se publiquen.

Step 2: Publish the menu inside the app

Guardar el app embed del tema solo carga el script; aún debes publicar el menú dentro del panel de control de la app.

Las aplicaciones de menú separan la activación del embed de la publicación. Por ejemplo, la documentación de Navi+ indica que tras activar el embed Store Connector, “el proceso aún no ha finalizado”. Debes abrir la aplicación y hacer clic en Publish to website (o el botón de publicación de tu aplicación).

Antes de publicar, comprueba las reglas de segmentación que ofrece tu aplicación (por ejemplo, en Navi+):

• Device targeting: Mostrar en móvil, escritorio o en ambos formatos de pantalla.
• Page group rules: Mostrar el menú en todas las páginas o solo en grupos de páginas concretos.
• URL keyword filtering: Incluir o excluir términos concretos en la barra de direcciones.

Si una regla excluye una página, tu menú no se mostrará allí incluso con el embed activo.

Step 3: Choose where the menu appears (embed, CSS selector or app block)

Concept illustration: inserting an app menu below the header versus replacing the theme menu with a CSS selector.

Una vez que tu embed está activo y tu menú publicado, elige cómo vincularlo al diseño de tu tema.

Floating menus (tab bar, floating button, drawer)

Los app embeds flotan o se muestran como una superposición en tu tema. Para barras de pestañas móviles, botones flotantes o menús desplegables laterales, solo necesitas activar el embed y publicar en la app. Al flotar sobre la página, no requieren un elemento de anclaje en la cabecera.

Insert before, insert after or replace

Para cabeceras de escritorio o mega menús, la aplicación se acopla mediante un selector CSS que identifica un elemento del tema.

Algunas aplicaciones, como Navi+, ofrecen tres modos:

• Insert Before: Coloca el menú directamente encima del elemento seleccionado.
• Insert After: Renderiza el menú justo debajo del elemento seleccionado.
• Replace: Sustituye por completo el elemento seleccionado por el menú de la aplicación.

Navi+ permite añadir un sufijo para que el selector se dirija específicamente a móvil, escritorio o ambos.

App block inside a theme section

El tercer método consiste en agregar un bloque de app en una sección del tema. Los bloques de app requieren temas compatibles, y Shopify describe la compatibilidad para secciones que forman parte de una plantilla JSON. En Navi+, el bloque “Menu in Section” se aplica solo a Mega Menus y Grid Menus, no a barras de pestañas ni botones flotantes.

Step 4: Hide the theme’s default menu so you don’t see two

Agregar un menú de app puede generar dos barras de navegación si los enlaces nativos de cabecera siguen visibles. Dado que instalar una aplicación no oculta el código del tema, debes ocultar o sustituir el menú nativo.

Elimina los menús duplicados de dos maneras:

1. Use Replace mode: Si es compatible, Replace intercambia automáticamente el elemento del tema seleccionado.
2. Change theme settings: En el editor de temas, abre Header. Shopify señala que puedes cambiar el menú principal predeterminado en la mayoría de temas editando los ajustes en la sección Header, desasignando el menú allí.

Nunca elimines las listas de enlaces en Content > Menus; mantenerlas conserva los enlaces de pie de página y sirve como respaldo.

Al usar el modo Replace, puede producirse un breve parpadeo del menú original mientras se inicializa el script. En móviles, oculta el botón de hamburguesa del tema si tu aplicación cuenta con su propio panel lateral.

Step 5: Preview on desktop and mobile, then check the live store

La vista previa dentro del personalizador de temas de Shopify no es suficiente. La documentación de Helium advierte que los menús no siempre cargan correctamente en el personalizador, lo que exige pruebas directas en la tienda en vivo.

Para verificar tu navegación:

1. Abre la URL de tu tienda en una ventana de incógnito para ver las páginas tal como las observa un comprador.
2. Realiza pruebas en pantallas de escritorio, revisando menús desplegables, paneles de mega menú y estados hover.
3. Realiza pruebas en un smartphone, verificando áreas de pulsación, paneles móviles y el margen inferior de la barra de pestañas.
4. Haz clic en los enlaces de navegación para cerciorarte de que las categorías y productos abren correctamente.

Si has configurado menús independientes para escritorio y móvil, asegúrate de que cada pantalla active únicamente el menú asignado. Si probaste en un tema duplicado, publícalo tras verificarlo.

App menu not showing? A diagnostic checklist

Concept illustration: a menu that is not showing (app embed off, wrong theme, two menus) versus one correct app menu live on the store.

Si un menú de app no se visualiza, revisa esta lista de diagnóstico:

Si tu menú sigue sin cargar, ponte en contacto con el equipo de soporte de tu aplicación de menú para investigar incidencias específicas de la herramienta.

When you change or update your theme

Al cambiar de tema o actualizar a una nueva versión, los menús de la aplicación no se trasladan automáticamente. Como se indica en la guía del Centro de Ayuda de Shopify sobre apps de temas, las apps no vienen activas por defecto en temas nuevos y deben reactivarse.

Sigue este orden al cambiar o actualizar temas:

1. Re-enable app embed: En el editor de tu nuevo tema, abre App embeds, activa tu aplicación y haz clic en Save.
2. Re-add app blocks: Vuelve a insertar los bloques de sección, ya que los nuevos temas no incluyen bloques de app automáticamente.
3. Audit CSS selectors: Las clases de cabecera varían según el tema; actualiza tu selector o consulta menús Navi+ en temas populares de Shopify.
4. Hide default menu: En los ajustes de Header, desasigna el menú predeterminado para impedir una doble navegación.
5. Test on duplicate theme: Realiza los ajustes en un tema duplicado antes de publicar en la tienda en vivo.

Trade-offs: when the theme’s own menu is enough

Las aplicaciones de menú de terceros aportan flexibilidad visual, pero no son indispensables para todas las tiendas. Si tu catálogo es sencillo, el editor integrado de Shopify en Content > Menus suele ser la opción más práctica. Los menús nativos admiten hasta dos niveles de menús desplegables anidados, lo que puede bastar para un catálogo enfocado. Tampoco dependen de un app embed, por lo que no hay que reactivar nada al actualizar temas.

Utilizar una app de menú de terceros introduce consideraciones específicas:

• Maintenance: Los cambios de tema exigen reactivar embeds y verificar selectores CSS.
• Initial page load: El reemplazo mediante selector CSS puede ocasionar a veces un leve parpadeo del menú original mientras carga el script.
• Platform limits: Entornos como Shopify Canvas no admiten aún extensiones de aplicaciones de temas.

Consulta nuestra guía para elegir el tipo de menú adecuado para decidir si tu tienda requiere una aplicación o si basta con la navegación nativa.

Example: putting a Navi+ menu live

Para observar estos pasos en la práctica, veamos cómo publicar menús con Navi+. Navi+ admite Tab Bars móviles, menús desplegables móviles, Floating Buttons y Desktop Mega Menus utilizando extensiones de app de temas estándar de Shopify.

Para una Tab Bar, un Mobile Menu o un Floating Button en móvil:

1. En el panel de Shopify, ve a Online Store > Themes > Customize.
2. En la barra lateral, abre App embeds, activa Store Connector y haz clic en Save.
3. En Navi+, abre tu menú y haz clic en Publish to website.
4. Configura las reglas de visualización por dispositivo, grupo de páginas o palabras clave de URL.

Para un Desktop Mega Menu:

1. En Navi+, selecciona Insert Before, Insert After o Replace.
2. Introduce el selector CSS de cabecera, añadiendo un sufijo móvil o de escritorio si es necesario.
3. En temas Online Store 2.0 con plantillas JSON, también puedes usar el bloque de app Menu in Section (para Mega Menus y Grid Menus).

Si tu tienda recibe visitas, haz pruebas primero en un tema duplicado para comprobar los diseños con tranquilidad.

La guía de publicación de Navi+ para cada tipo de menú detalla estos pasos con capturas de pantalla. Explora la documentación de publicación de Tab Bar en Navi+ o la guía de publicación de Mega Menu en Navi+ para poner en marcha tu diseño con total confianza.

Action checklist

Utiliza esta lista de verificación rápida para asegurar un lanzamiento impecable de tu menú de app:

• Duplicate your active theme for safe testing.
• In Theme settings > App embeds, toggle your app on and click Save.
• Return to your menu app dashboard and click publish.
• Verify device targeting and page group rules.
• Select placement: floating overlay, CSS selector (insert/replace), or app block.
• Hide or unassign the default menu in Header settings.
• Preview navigation across desktop and mobile screens.
• Test your live storefront in an incognito window.
• Click category and product links to verify destinations.
• Document CSS selectors to re-apply after theme updates.

FAQ

Do I need to enable an app embed?

Sí, en la mayoría de los casos. Shopify especifica que los bloques de app embed están desactivados por defecto tras la instalación, por lo que debes activarlos en el editor de temas desde Theme Settings > App embeds y hacer clic en Save.

Why is my app menu not showing after I created it?

La razón más habitual es que el app embed no se ha activado ni guardado en el tema activo, o el menú no se ha publicado aún dentro de la app; consulta nuestra tabla de diagnóstico para verificar reglas de visualización y selectores.

Does a menu app delete my Shopify navigation menu?

No. Tus enlaces nativos permanecen intactos en Content > Menus dentro de tu panel de Shopify, y la sección Header de tu tema solo determina qué lista de enlaces mostrar.

Will my app menu still work if I change themes?

Deberás reactivar el app embed en tu nuevo tema, ya que las apps no están activas por defecto en temas recién publicados, y tal vez debas actualizar los selectores CSS si el nuevo tema presenta una estructura de cabecera distinta.

Can I use a menu app on a vintage theme?

Sí, los app embeds son compatibles tanto con temas vintage como con Online Store 2.0, aunque los bloques de app solo pueden utilizarse en temas compatibles con plantillas JSON.

Why can’t I find the app embed in my theme?

Si tu tema se creó o duplicó en Shopify Canvas, las extensiones de app para temas —incluidos los app embeds y bloques de app— todavía no son compatibles.

Sources

• Shopify Help Center: Apps and theme architecture
• Shopify Developer Documentation: Theme app extension configuration
• Shopify Help Center: Menus and links
• Shopify Help Center: Drop-down menus
• Shopify Help Center: Duplicating themes
• Shopify Developer Documentation: App blocks
• Shopify Developer Community: Meet Canvas and theme app extensions
• Shopify Community: Qikify Mega Menu for Prestige theme thread
• Helium Dev Help Center: Installing Meteor on your storefront
• Navi+ Help Center: Tab Bar publishing on Shopify
• Navi+ Help Center: Mega Menu desktop publishing on Shopify
• Navi+ Help Center: Why does Navi+ not display FAQ