Cómo hacer que tu menú de Shopify se vea como la demo del tema (Ajustes, apps o código)
Previsualizas una cuidada demo de un tema de Shopify, admiras su amplia navegación en múltiples columnas con imágenes destacadas e instalas el tema en tu tienda. Sin embargo, al abrir tu escaparate, la navegación luce completamente distinta: una lista desplegable de texto estrecha, básica y llena de espacios vacíos.
El menú de la demo de un tema no es magia. Es el resultado de combinar los ajustes de cabecera del tema con una estructura de menú de tres niveles repleta de contenido de muestra. Puedes igualar esa presentación identificando primero el tipo de menú, configurando las opciones nativas del tema, utilizando una aplicación dedicada o escribiendo código personalizado, mientras planificas la experiencia móvil de forma independiente.
Quick answer: how to make your Shopify menu look like the demo
El menú de la demo de un tema suele proceder de los ajustes de cabecera del tema y de un menú anidado lleno de contenido de muestra, no solo del menú predeterminado. Para igualarlo, identifica el tipo de menú, crea tres niveles en Content > Menus, activa la opción de cabecera y añade imágenes o usa una app si tu tema carece de ese estilo.
Para recrear esta estructura en tu tienda, sigue estos cuatro pasos clave:
- Identificar el tipo de menú de la demo: Inspecciona si la demo utiliza un desplegable simple, un mega menú de varias columnas, un panel lateral o una barra de pestañas inferior.
- Crear niveles de menú anidados: Estructura hasta tres niveles de enlaces dentro de Content > Menus en tu panel de administración de Shopify.
- Activar los ajustes de cabecera (Header settings): Abre el editor de temas y activa los bloques de diseño de navegación correspondientes.
- Añadir imágenes o usar una app de mega menú: Sube imágenes destacadas en los bloques del tema o instala una app de navegación si tu tema no soporta columnas.
Ten en cuenta que los menús móviles se comportan de manera muy diferente a las pantallas de escritorio, por lo que deberás planificar tu panel lateral o barra de pestañas de manera independiente.
Why your Shopify menu doesn’t look like the theme demo
El marcado contraste inicial entre la tienda de demostración y tu propia tienda tras instalar el tema suele generar confusión. Entender las causas técnicas te ahorrará horas de intentos infructuosos.
Demo sample content
Una demo de tema se prepara para mostrar el tema en su mejor versión. Una tienda demo contiene sample products and content to help you get a feel of how the theme looks and works. Sus columnas de menú están llenas de categorías, fotografías y banners que tu propia tienda aún no tiene.
Cuando instalas o pruebas un tema en tu administración de Shopify, you can try it by previewing the theme in your Shopify admin. Sin embargo, you will need to preview the theme using whatever data is live on your site. Si tu tienda solo cuenta con un par de colecciones con escasos artículos o si tu menú solo contiene enlaces de primer nivel, el tema no tiene información que mostrar. El contenido de muestra de la demo (Demo sample content) no se transfiere automáticamente a tu tienda. Un catálogo escaso tiende a producir un panel de navegación escaso y descompensado.
The theme’s own menu style
Muchos temas ofrecen más de un formato visual de navegación dentro de su configuración. En un hilo de la comunidad de Shopify sobre el tema Prestige, por ejemplo, un comerciante pregunta por qué su menú no se parece al de la demo; el soporte de Shopify responde que the Prestige theme also has two different menu styles, and this is likely why your menu looks different. Si utilizas esta plantilla, consulta nuestra guía sobre cómo add a mega menu to Prestige.
Asimismo, la documentación oficial de Shopify recalca que the main menu and drop-down menus display in different locations in your online store depending on your theme. Por eso el mismo menú puede aparecer en otro lugar o con otra forma de un tema a otro.
Otro error habitual se relaciona con los estilos o ajustes preestablecidos (presets). Con frecuencia se piensa que cambiar el estilo del tema transformará el menú. No obstante, los presets tratan de ajustes globales: each theme style is a set of pre-selected theme settings that configure site-wide colors, fonts, product options, and more. Dado que un estilo predeterminado ajusta sobre todo colores y tipografías, es poco probable que cambiar de preset convierta un desplegable simple en un mega menú de varias columnas.
Step 1: Identify the menu type the demo uses
Antes de ajustar parámetros en tu panel de administración, abre la demo del tema en un ordenador y en un dispositivo móvil. Observa detenidamente cómo responde la navegación al pasar el cursor o al pulsar un enlace superior.
En los estudios de usabilidad del Nielsen Norman Group, un mega menú se define como a type of expandable menu in which many choices are displayed in a two-dimensional dropdown layout. Sus investigaciones confirman que mega menus show everything at a glance, so users can see rather than try to remember.
Utiliza la siguiente tabla comparativa para determinar con exactitud qué formato de navegación emplea la demo:
| Tipo de menú | Cómo reconocerlo en la demo | Dónde configurarlo |
|---|---|---|
| Dropdown | Se despliega como una lista estrecha de una sola columna (Single column list) suspendida directamente bajo el elemento principal. | Creado en Content > Menus. |
| Mega Menu | Se abre en un amplio panel de múltiples columnas (Multi-column panel) que abarca el ancho de la cabecera, con grupos de categorías y una imagen destacada opcional (Featured image). | A menudo se construye con 3 niveles anidados (Nested menu levels) en Content > Menus, más opciones de mega menú en los Header settings (o una aplicación). |
| Panel lateral off-canvas | Un panel lateral deslizante oculto tras un icono de tres barras: most often the mobile menu is by default collapsed and hidden behind a ‘3-bars’ ‘hamburger’ icon. | Se configura en los ajustes de navegación móvil del tema o en bloques de panel de cabecera. |
| Bottom tab bar | Una barra fija en la parte inferior de la pantalla móvil con unos pocos accesos directos al alcance natural del pulgar. | Se implementa mediante ajustes avanzados de tema para móvil, código Liquid o una app de navegación. |
Durante tu análisis, toma nota: cuenta cuántas columnas aparecen, comprueba si hay imágenes promocionales insertadas y verifica cuántos niveles de profundidad abarca el catálogo. Un Drawer menu organiza con soltura las categorías complementarias, mientras que una Bottom tab bar mantiene las acciones frecuentes a mano en smartphones. Para evaluar la estructura idónea según tu volumen de catálogo, consulta nuestro análisis sobre choosing the right menu type.
Ilustración conceptual: Comparativa entre un menú desplegable de una sola columna y un mega menú de múltiples columnas.
Figura 1: Ilustración conceptual — Desplegable Single column list frente a un mega menú Multi-column panel con Featured image.
Step 2: Check your theme’s header settings and menu structure
Si tu tema ofrece soporte nativo para el formato que viste en la demo, puedes construirlo sin costes adicionales. Este proceso requiere dos pasos coordinados: estructurar los enlaces en la administración y activar el diseño en el editor de temas.
Build three levels in Content > Menus
Todos los menús estándar de Shopify se administran en el panel de control. Según la documentación de ayuda de Shopify, you can add, remove, change, and view your links and menus from Content > Menus in your Shopify admin (en versiones anteriores de la interfaz se encuentra en Online Store > Navigation).
Para conseguir una visualización en columnas, debes organizar tus enlaces en niveles jerárquicos (Nested menu levels). Las reglas de la plataforma Shopify establecen que the top-level item can have up to two levels of nested drop-down menus, proporcionando un total de tres niveles:
- Nivel 1 (Elemento superior): El departamento visible en la barra de cabecera (p. ej., «Hombre»).
- Nivel 2 (Título de columna): El grupo de categorías que actúa como encabezado de columna (p. ej., «Ropa», «Calzado», «Accesorios»).
- Nivel 3 (Enlaces finales): Las colecciones o productos individuales situados bajo cada columna (p. ej., «Camisetas», «Chaquetas», «Pantalones»).
Algunos temas de Shopify necesitan este tercer nivel para mostrar un mega menú. El desarrollador Fluorescent indica en su documentación técnica: for the mega navigation, you first need to create a nested menu with 3 levels of links. Si solo anidas elementos hasta el nivel 2, un tema así puede mostrarlos como una simple Single column list en lugar de un Multi-column panel expandido.
Turn on the mega menu in Header settings
Tras guardar la jerarquía de enlaces, accede a Online Store > Themes > Customize para abrir el editor de temas. Haz clic en la sección Header en el panel izquierdo para ver los Header settings.
Shopify recuerda que the sections and blocks that are available in the theme editor depend on your theme and theme version. Dado que los nombres de las opciones varían según el tema, busca en la sección Header la opción de estilo de menú y consulta la documentación de tu tema. Si utilizas el tema Dawn, revisa nuestro tutorial para add a mega menu to Dawn.
En los temas que admiten recursos visuales en la navegación, encontrarás campos para añadir imágenes en los bloques del menú: select or upload a Mega nav featured image to display inside the mega navigation menu. La incorporación de una Featured image aporta ese acabado profesional característico de las demos. Si tu sección de cabecera no incluye estas opciones, revisa el manual del desarrollador del tema o contacta con su servicio técnico.
El siguiente vídeo oficial muestra de forma práctica cómo estructurar enlaces anidados en el panel de Shopify:
Step 3: Rebuild the demo menu with a mega menu app
Cuando tu tema no dispone de ajustes nativos para mega menú o deseas incorporar tarjetas de producto dinámicas que el esquema Liquid de tu tema no puede generar, instalar una Mega menu app especializada es el camino más práctico.
Una aplicación dedicada resulta especialmente ventajosa en tres situaciones:
- Limitaciones funcionales del tema: La plantilla solo admite menús desplegables verticales sencillos.
- Necesidades de merchandising visual: Quieres mostrar productos, colecciones, imágenes o iconos dentro de las columnas.
- Independencia en futuros cambios de tema: Deseas que tu compleja estructura de navegación se conserve intacta si decides actualizar o sustituir tu tema más adelante.
El proceso habitual para configurar un menú mediante una aplicación consta de cinco pasos:
- Elegir una plantilla inicial: Selecciona un diseño con una distribución de columnas semejante a la demo que tomas como referencia.
- Asignar las columnas: Establece tus categorías de nivel 2 como encabezados y ubica los enlaces de nivel 3 en sus columnas respectivas.
- Incorporar elementos visuales: Vincula imágenes de colecciones, miniaturas de producto o banners en los espacios reservados.
- Verificar dispositivos: Revisa la legibilidad y la respuesta táctil tanto en monitores de escritorio como en smartphones.
- Publicar mediante Theme App Extension: Activa la aplicación en el editor de temas. Con la arquitectura actual de Shopify, merchants won’t need to manually edit their theme code.
Al seleccionar una app, busca editores visuales intuitivos que no alteren el código fuente Liquid de tu tema. Si buscas pautas de espaciado y jerarquía en columnas, consulta nuestra guía sobre mega menu best practices.
Step 4: Make the mobile menu match the demo
Un error común al intentar replicar el menú de una demo es centrarse exclusivamente en la versión de escritorio. La navegación en pantallas táctiles portátiles obedece a parámetros ergonómicos totalmente diferentes.
Los análisis de usabilidad del Baymard Institute constatan que during usability testing we consistently observe that mobile navigation is particularly difficult for users. Debido a las limitaciones de espacio, most often the mobile menu is by default collapsed and hidden behind a ‘3-bars’ ‘hamburger’ icon.
Los recursos gráficos pensados para escritorio no se trasladan automáticamente al entorno móvil. En las plantillas creadas por Fluorescent, la documentación advierte expresamente: this image is not displayed on mobile. Un panel ancho de varias columnas rara vez cabe en la pantalla de un smartphone sin provocar desplazamiento lateral o zonas táctiles diminutas.
Para que la navegación móvil conserve la calidad de la demo:
- Drawer menu: Adapta tu jerarquía en un Drawer menu vertical. Asegúrate de que las categorías de nivel 1 se desplieguen con suavidad para mostrar los niveles 2 y 3, conservando la misma estructura lógica (Same structure) que en la versión de escritorio.
- Bottom tab bar: Si quieres tener unas pocas páginas clave siempre a mano, complementa el panel superior con una Bottom tab bar persistente. Situar unos pocos destinos estratégicos (Inicio, Buscar, Catálogo, Carrito, Cuenta) en la base de la pantalla mantiene las acciones esenciales al alcance inmediato del pulgar.
Para dominar los estándares móviles, revisa nuestras guías sobre el mobile drawer menu y la configuración de una bottom tab bar for mobile.
Ilustración conceptual: Estructura de mega menú de escritorio adaptada a móvil mediante menú lateral y barra de pestañas.
Figura 2: Ilustración conceptual — Categorías de mega menú de escritorio manteniendo la Same structure en el Drawer menu móvil y la Bottom tab bar.
Custom Liquid code vs. an app: trade-offs
Cuando las opciones del tema se quedan cortas, los comerciantes suelen sopesar entre escribir código Liquid a medida o instalar una aplicación de navegación. Cada alternativa conlleva ventajas e inconvenientes bien delimitados:
| Solución | Esfuerzo de desarrollo | Control del diseño | Riesgo en actualizaciones | Perfil idóneo |
|---|---|---|---|---|
| Ajustes nativos del tema | Bajo (Configuración de bloques en el editor) | Moderado (Limitado a los campos provistos por el tema) | Bajo (Any customizations made to your theme using the theme editor are copied over) | Tiendas cuyo tema ya integra el formato de la demo |
| Aplicación de Mega Menú | Moderado (Elección de plantilla y asignación visual) | Alto (Columnas flexibles, imágenes e iconos sin código: merchants won’t need to manually edit their theme code) | Bajo a moderado (Archivos de tema intactos, comprobar compatibilidad en cambios de versión) | Tiendas que carecen de mega menú nativo o valoran la portabilidad |
| Código Liquid personalizado | Alto (Requiere conocimientos sólidos de HTML, CSS y Liquid) | El más alto (limitado sobre todo por tu código y tus conocimientos) | Alto (El código modificado debe copiarse y reincorporarse manualmente tras actualizar) | Marcas con equipo de desarrollo propio para necesidades exclusivas |
Los ajustes nativos del tema representan la opción más limpia. La documentación de Shopify indica que any customizations made to your theme using the theme editor are copied over and applied to the updated theme.
El desarrollo a medida ofrece la mayor libertad visual. En los foros de la comunidad de Shopify se ratifica que can be done using custom code on the theme. Sin embargo, el código manual genera una importante carga de mantenimiento: cuando el tema recibe una actualización, las modificaciones personalizadas pueden perderse. Shopify advierte: you should always save a copy of any customized code before updating your theme, ya que quizá debas reintegrar cada bloque manualmente.
Una Mega menu app integrada mediante Theme App Extension proporciona un equilibrio muy conveniente. Al no tener que editar el código del tema (merchants won’t need to manually edit their theme code), los archivos base quedan limpios. Aun así, las apps pueden implicar costes recurrentes y Shopify señala que some apps might not be compatible with a new theme.
Para comprender dónde terminan las posibilidades nativas, lee nuestro análisis sobre los limits of theme menus.
Common mistakes when copying a demo menu
Al intentar replicar el menú de una demo, los propietarios de tiendas suelen caer en cinco fallos habituales:
- Colecciones sin productos y falta de imágenes: Los menús de las demos destacan porque cada enlace conduce a colecciones pobladas con fotografías cuidadas. Si tus colecciones apenas tienen un par de artículos o carecen de imágenes principales, el menú transmitirá una sensación de vacío.
- Estructura plana en el panel de control: Añadir todos los enlaces en el nivel 1 o 2 en Content > Menus impide que el tema cree columnas. Algunos temas necesitan los tres niveles para mostrar un mega menú.
- Olvidar la experiencia en smartphones: Diseñar un panel deslumbrante de varias columnas para ordenador sin revisar el móvil suele derivar en menús rotos; algunos temas ocultan las imágenes del mega menú en móvil.
- Copiar una estructura inmensa con un catálogo reducido: Las demos están pensadas para mostrar un catálogo completo. Si solo tienes unas pocas colecciones, obligar a tu tienda a usar un mega menú complejo puede abrumar innecesariamente a tus compradores.
- Creer que cambiar el preset modifica los menús: Cambiar el estilo predefinido del tema altera colores y tipografías, pero no reorganiza los enlaces ni añade bloques de navegación adicionales.
Where Navi+ fits
Si tu tema no incorpora el formato de menú que viste en la demo, puedes recrearlo en Navi+ a partir de una plantilla prediseñada y ajustar posteriormente las columnas y los elementos visuales a tu catálogo.
Navi+ está concebido para resolver las limitaciones de diseño de la navegación sin necesidad de intervenir en el código de tu tema:
- Desktop Mega Menu: Build mega menus with products, collections, images, icons, and flexible layouts con un editor visual intuitivo.
- Menú móvil y panel deslizante (Drawer): Create mobile menus, drawer menus, and hamburger menus for easier store browsing.
- Barra de pestañas fija inferior: Add sticky bottom tab bars with icons and labels for app-like mobile navigation.
- Creación de menús sin código: Generate menus with AI, templates, drag-and-drop editing, and no coding required.
En Navi+, puedes escoger un diseño de partida en la pantalla «Create from a template», ajustar las columnas y las imágenes, y vincular directamente tus colecciones de Shopify. Además, el menú móvil de Navi+ puede embeber la estructura de tu Desktop Mega Menu, permitiendo que ambos formatos compartan la misma información organizada en hasta tres niveles.
Es importante recordar que las plantillas son un punto de partida estructural. La aplicación no clona automáticamente el menú privado de una tienda externa; siempre deberás completar las categorías y subir las imágenes correspondientes a tu propio catálogo.
Para explorar cómo encaja Navi+ con los temas más populares de Shopify, echa un vistazo a nuestra selección en Navi+ menus on Shopify themes.
El siguiente vídeo desglosa la construcción del menú de un tema de Shopify, con mega menú, cabecera fija y barra de pestañas:
Pre-publish checklist
Antes de habilitar tu nuevo menú para el público, revisa estos ocho aspectos esenciales:
- Tipo de menú confirmado: Haber comprobado si la demo de referencia utiliza un desplegable simple, un mega menú, un panel lateral o una barra inferior.
- Tres niveles organizados: Verificar que los enlaces en Content > Menus cuenten con niveles 1, 2 y 3 en las zonas que se mostrarán en columnas.
- Contenido de colecciones auditado: Asegurar que cada colección enlazada contenga productos disponibles con imágenes de calidad.
- Accesibilidad en imágenes: Confirmar que todos los banners y fotos del menú incluyan texto alternativo (alt text) descriptivo.
- Ajustes de cabecera activos: Comprobar que el bloque de navegación o la extensión de app estén habilitados en el editor de temas.
- Prueba de uso en smartphone: Evaluar la apertura del menú lateral y la pulsación de la barra de pestañas en un teléfono real.
- Copia de seguridad del código: Guardar una copia íntegra del tema antes de aplicar cualquier personalización manual en Liquid.
- Control de actualizaciones: Mantener documentadas las apps activas para comprobar su compatibilidad tras actualizar el tema.
FAQ
Why doesn’t my theme’s menu look like the demo?
Las tiendas de demostración incluyen productos y contenidos de muestra, y muchos temas disponen de varios estilos de navegación. Dado que la previsualización utiliza tus propios datos, un catálogo vacío generará un menú desierto.
How many levels can a Shopify menu have?
Un elemento de primer nivel puede contener hasta dos niveles anidados de menús desplegables, lo que suma un total de tres niveles. Algunos temas necesitan este tercer nivel para mostrar un mega menú.
Do I need an app or custom code for a mega menu like the demo?
Examina primero las opciones de cabecera en el editor de temas, que dependen de cada tema y versión. Si no dispone del diseño, puedes recurrir a una aplicación de mega menú sin editar código o añadir código Liquid guardando previamente una copia de seguridad.
Will my menu break when I update my theme?
Las modificaciones realizadas a través del editor de temas se transfieren automáticamente al actualizar el tema. En cambio, las modificaciones en código Liquid suelen requerir una reintegración manual, y conviene comprobar la compatibilidad de las aplicaciones.
Can mobile look the same as desktop?
En teléfonos inteligentes la navegación suele condensarse tras un icono de tres barras, y ciertos temas descartan las imágenes de los mega menús en pantallas pequeñas. Es recomendable plantear el panel móvil o la barra inferior de forma específica.
Sources
- Shopify Help Center — Drop-down menus. help.shopify.com/en/manual/online-store/menus-and-links/drop-down-menus
- Shopify Help Center — Menus and links. help.shopify.com/en/manual/online-store/menus-and-links
- Shopify Help Center — Sections and blocks in the theme editor. help.shopify.com/en/manual/online-store/themes/theme-structure/sections-and-blocks
- Shopify Help Center — Updating themes. help.shopify.com/en/manual/online-store/themes/managing-themes/updating-themes
- Shopify Help Center — Adding, previewing, and buying themes. help.shopify.com/en/manual/online-store/themes/adding-themes
- Out of the Sandbox — What to look for when trying out Shopify theme demos. outofthesandbox.com/blogs/shopify-theme-blog/shopify-theme-buying-tips
- Shopify Community — Trying the Prestige theme but my menu doesn’t look like the one the demo. community.shopify.com/t/trying-the-prestige-theme-but-my-menu-doesn-t-look-like-the-one-the-demo/28768
- Fluorescent Help — Context Mega Navigation. help.fluorescent.co/context/pages/header/mega-navigation
- Fluorescent Help — Style Presets. help.fluorescent.co/ira/theme-styles/style-presets
- Nielsen Norman Group — Mega Menus Work Well for Site Navigation. nngroup.com/articles/mega-menus-work-well/
- Baymard Institute — Mobile Navigation Menu Usability Benchmark. baymard.com/mcommerce-usability/benchmark/mobile-page-types/navigation-menu
- Shopify Dev Docs — Theme App Extensions. shopify.dev/docs/apps/build/online-store/theme-app-extensions
- Shopify Community — How can I set my product collections to a stylish and useful navigation page like this Shopify store. community.shopify.com/t/how-can-i-set-my-product-collections-to-a-stylish-and-useful-navigation-page-like-this-shopify-store/333164
- Shopify App Store — Navi+ Tab Bar & Mega Menu. apps.shopify.com/pronavi-navigation-design
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.