Cómo crear un menú de escritorio y un menú móvil en Shopify (Paso a paso)

Al diseñar una tienda en Shopify, el encabezado de escritorio suele planificarse para mostrar todo el catálogo: colecciones principales, páginas informativas y extensos menús desplegables. Sin embargo, al abrir esa misma tienda en un smartphone, esa amplia estructura se convierte en un cajón lateral abarrotado que obliga a los usuarios a desplazarse interminablemente.

Muchos comerciantes buscan un ajuste directo en el panel de control de Shopify para asignar un menú al ordenador y otro más conciso a los teléfonos móviles. No obstante, muchos temas no ofrecen esta opción de forma nativa. Aunque Shopify te permite crear más de un menú en Contenido > Menús, el tema decide dónde se muestran, y la mayoría alimenta el encabezado de escritorio y el cajón móvil con exactamente el mismo menú.

Para separarlos, puedes mantener un menú único optimizado, editar el código del cajón móvil de tu tema o usar una app de navegación. Esta guía te muestra cómo abordar cada una de las tres opciones paso a paso.

Respuesta rápida: ¿Puede Shopify mostrar un menú diferente en móvil?

No con la mayoría de los temas listos para usar. Creas los menús en Contenido > Menús, pero el tema decide dónde se muestran, y temas como Dawn usan el mismo menú para el encabezado de escritorio y el cajón móvil. Para separarlos, edita el código del cajón o usa una app de menús.

Dispones de tres alternativas principales:

• Opción 1: Mantener un solo menú y dejar que el tema lo adapte. Conserva una lista ágil en Contenido > Menus sin tocar código.
• Opción 2: Asignar un menú móvil independiente editando código. Duplica tu tema y modifica snippets/header-drawer.liquid (en Dawn) para que lea el identificador de tu menú móvil.
• Opción 3: Utilizar una app de navegación. Diseña un mega menú de escritorio y un cajón o barra inferior móvil independientes, controlando su visibilidad por dispositivo sin programar.

Revisa la tabla comparativa de la sección Concesiones para elegir la mejor opción según tu catálogo.

Cómo funcionan los menús de Shopify en escritorio y móvil

Concept illustration: un único menú principal de Shopify alimenta tanto el encabezado de escritorio como el cajón móvil.

En Shopify, los enlaces de navegación se administran en Contenido > Menús. Sin embargo, tal como explica la documentación del Centro de ayuda de Shopify sobre menús desplegables, la ubicación de visualización depende del tema seleccionado.

En el tema por defecto de Shopify, Dawn, la sección Header cuenta con un único ajuste de menú de tipo link_list (por defecto main-menu). En ordenadores, este menú se presenta en horizontal y despliega subcategorías en un Header dropdown.

En pantallas móviles, un botón de hamburguesa abre el Mobile drawer. En el código de Dawn, este cajón se genera mediante snippets/header-drawer.liquid. El bucle principal de Liquid dice:

{%- for link in section.settings.menu.links -%}

Dado que el cajón consulta directamente section.settings.menu.links —el mismo ajuste que alimenta el encabezado de escritorio—, modificar tu Main menu en el panel de control altera ambas vistas de forma simultánea.

Algunos temas pueden incorporar un selector específico para menú móvil en la sección Header del editor de temas. Comprueba primero tu editor de temas; si no existe dicha casilla, aplica una de las soluciones descritas a continuación.

Paso 1: Crear los menús de escritorio y móvil en Contenido > Menus

Tanto si decides modificar código como si prefieres usar una app, el primer paso consiste en construir ambas listas de enlaces en el panel de Shopify.

Utiliza siempre la ruta Contenido > Menús.

Construir el menú de escritorio (menú principal con desplegables)

1. En el panel de administración de Shopify, ve a Contenido > Menús.
2. Haz clic en Menú principal (Main menu) o pulsa en Agregar menú.
3. Haz clic en Agregar elemento de menú para añadir categorías principales y páginas.
4. Arrastra los elementos secundarios bajo un elemento superior para anidarlos. Según la documentación oficial de menús desplegables de Shopify, un elemento principal puede tener hasta dos niveles de menús desplegables anidados (tres niveles de profundidad en total).

Construir un menú móvil más corto

1. En Contenido > Menús, pulsa en Agregar menú.
2. Asígnale un nombre descriptivo, como Mobile menu.
3. Anota el identificador (handle, por ejemplo mobile-menu). La opción 2 requiere este identificador exacto.
4. Añade únicamente enlaces de alta prioridad: colecciones destacadas, buscador, seguimiento de pedidos y soporte. Mantén la estructura con pocos niveles.
5. Haz clic en Guardar menú.

[!NOTE] Crear un Separate mobile menu en Contenido > Menus solo guarda los datos en Shopify. No se mostrará en la tienda hasta que tu tema, una personalización de Liquid o una Menu app lo llamen explícitamente.

Opción 1: Usar un solo menú y dejar que el drawer del tema gestione la vista móvil

Para tiendas con catálogos concisos, la solución más práctica es conservar un Main menu único y permitir que el Mobile drawer nativo de tu tema lo comprima para pantallas táctiles.

Planificas tu menú con moderación y evitas ramificaciones excesivas. Al visualizarse en móviles, el tema empaqueta estos enlaces en un cajón desplegable lateral.

• Ventajas: Cero código, sin costes de aplicaciones adicionales y mantenimiento mínimo. Actualizar un enlace actualiza todos los dispositivos.
• Desventajas: Escritorio y móvil muestran exactamente lo mismo. Un mega menú amplio de escritorio se transforma en un cajón móvil interminable que exige mucho scroll.

Revisa los ajustes de tu tema para ver si permite personalizar el cajón. Para estructurar este tipo de navegación, consulta nuestra guía sobre mobile drawer menu best practices.

Opción 2: Asignar un menú móvil independiente editando el código del tema

Si deseas un menú dedicado en móviles sin instalar apps, puedes modificar los archivos Liquid de tu tema para que el cajón móvil consulte directamente tu segundo menú.

Duplica tu tema antes de editar

Como aconseja el Centro de ayuda de Shopify sobre administración de temas, realiza siempre una copia de seguridad para poder descartar cambios y volver a empezar si surge algún problema.

1. Ve a Tienda online > Temas.
2. Haz clic en los tres puntos (...) junto a tu tema publicado y selecciona Duplicar.
3. Realiza todos los cambios exclusivamente sobre esa copia de respaldo.

Dirige el cajón hacia tu menú móvil

1. En la copia duplicada, haz clic en los tres puntos (...) y selecciona Editar código.
2. En el tema Dawn, abre snippets/header-drawer.liquid.
3. Localiza el bucle principal:

{%- for link in section.settings.menu.links -%}

1. De acuerdo con la referencia de Liquid de Shopify para el objeto linklists, puedes acceder a cualquier menú mediante su handle en el objeto linklists. Reemplaza esa línea por:

{%- for link in linklists['mobile-menu'].links -%}

(Sustituye 'mobile-menu' por el handle exacto creado en el Paso 1).

Una solución semejante se documentó en la comunidad de Shopify para el tema Ride.

[!WARNING] El nombre de archivo anterior es un ejemplo para Dawn; otros temas usan otro archivo, busca un bucle similar que lea section.settings.menu. Modifica solo el bucle externo; los bucles internos deben permanecer intactos para conservar los submenús. Puede que tengas que volver a aplicar el código Liquid personalizado tras una actualización del tema.

Previsualiza la copia del tema en escritorio y móvil antes de publicarla definitivamente.

Opción 3: Usar una app de menú para separar escritorio y móvil

Si prefieres una configuración visual sin interactuar con código Liquid, una Menu app especializada representa una alternativa segura y flexible.

Estas aplicaciones te permiten estructurar diseños a medida según el dispositivo: un mega menú de varias columnas para escritorio y un cajón lateral o barra de pestañas fija inferior para smartphones.

Al elegir una aplicación, evalúa estos requisitos:

• Selector de visibilidad por dispositivo: Controles directos para activar un menú en Móvil, Escritorio o ambos.
• Vista previa móvil integrada: Simulador interactivo dentro del editor de la aplicación.
• Forma de instalación: Comprueba si la app se añade mediante un Theme App Embed o si te pide editar los archivos del tema.
• Compatibilidad con el tema: Integración limpia sin descuadrar la cabecera original.

Para profundizar en el formato más conveniente para tus productos, lee nuestra guía sobre cómo choose the right menu type for each screen.

Reglas de diseño para un menú móvil

Concept illustration: menús con excesivos niveles anidados frente a un menú conciso con amplios objetivos táctiles.

Al diseñar tus enlaces móviles, aplica estas directrices de usabilidad:

• Fewer items (Menos elementos): Las pantallas verticales son reducidas. Da prioridad a las colecciones más vendidas, novedades, búsqueda y atención al cliente. Traslada enlaces secundarios (como Prensa o Empleo) al pie de página.
• Larger tap targets (Objetivos táctiles más grandes): El dedo tiene menor precisión que el ratón. Conforme al estándar WCAG 2.2 Criterio 2.5.8 (Tamaño mínimo del objetivo), los elementos interactivos deben medir al menos 24×24 píxeles CSS (con algunas excepciones). Espacios holgados evitan pulsaciones erróneas.
• Shallow nesting (Anidación plana): Los acordeones muy anidados son más difíciles de usar en una pantalla pequeña. Apuesta por un Shallow nesting: listas directas o máximo un nivel de subcategorías.
• Más allá del icono de hamburguesa: Las investigaciones de Nielsen Norman Group revelan que el icono de hamburguesa no siempre es identificado con inmediatez. Complementar el cajón con elementos visibles permanentes, como una barra de navegación inferior, asegura el acceso instantáneo a secciones clave.

Descubre más sobre estructuras híbridas en nuestro artículo sobre mobile navigation beyond the hamburger menu.

Probar antes de publicar

Tal como recomienda el Centro de ayuda de Shopify, es fundamental probar los menús en dispositivos móviles reales para confirmar que los desplegables se expandan correctamente.

Realiza las siguientes comprobaciones:

1. Revisión en el editor de temas: Alterna entre las vistas de Escritorio y Móvil para validar la carga de cada estructura.
2. Prueba en un smartphone real: Abre el enlace de vista previa en navegadores reales como Safari y Chrome.
3. Mecanismo del cajón: Asegúrate de que el cajón se abra y se cierre con suavidad.
4. Despliegue de submenús: Toca cada acordeón para cerciorarte de que las categorías hijas no se solapen.
5. Comprobación de URLs: Verifica que cada enlace apunte a páginas activas y no a errores 404.
6. Orientación horizontal: Gira el teléfono para comprobar que el texto no quede cortado ni se oculte el botón de cierre.
7. Navegación entre plantillas: Prueba el menú desde la página de inicio, una colección y una ficha de producto.

Problemas comunes y soluciones

• El móvil sigue mostrando el menú antiguo: Puede que estés viendo el tema publicado mientras editabas una copia no publicada. Verifica también que el identificador en linklists['mobile-menu'].links coincida exactamente con el de Contenido > Menús.
• El nuevo menú no aparece por ninguna parte: Crear un menú en Contenido > Menús solo guarda la información. No será visible hasta que se configure en el encabezado del tema, se invoque mediante código Liquid o se seleccione en una aplicación.
• Eliminar un elemento padre borró todos los subelementos: Según las normas de edición de menús de Shopify, al eliminar un elemento con enlaces anidados, estos también se eliminan. Arrastra los elementos hijos fuera antes de borrar el elemento superior.
• Los desplegables no se abren en móviles: Comprueba la profundidad de anidación. Shopify soporta un máximo de dos niveles anidados bajo un elemento principal; mantén tu menú móvil dentro de ese límite y pruébalo en el cajón de tu tema.
• Los submenús del cajón desaparecieron tras editar código: Cerciórate de haber modificado únicamente el bucle externo for link in section.settings.menu.links. Si alteras los bucles internos (for childlink in link.links), los submenús dejarán de renderizarse.

Concesiones: cuándo no separar tus menús

Cuándo no separar tus menús

Tener dos menús independientes no siempre es necesario:

• Catálogos reducidos: Un catálogo pequeño y sencillo se gestiona perfectamente con un menú único y limpio.
• Tiempo de mantenimiento limitado: Manejar dos menús exige actualizar ambos en Contenido > Menús cada vez que creas colecciones. Si se descuida, la versión móvil quedará obsoleta.
• Actualizaciones frecuentes sin ayuda técnica: Quienes modifican Liquid pueden tener que repetir las modificaciones tras una actualización del tema.

Si un único menú bien estructurado funciona con fluidez en ambos entornos, mantenerlo unificado ofrece la mayor estabilidad con el menor esfuerzo.

Dónde encaja Navi+

Si prefieres no editar el código del tema, Navi+ te permite crear un mega menú de escritorio y un menú móvil o tab bar independiente, y elegir en qué dispositivo aparece cada uno. Puedes probarlo con el plan gratuito y dejar tu tema intacto.

Navi+ permite crear barras de navegación inferiores adhesivas, mega menús de escritorio de varias columnas, drawers móviles y botones flotantes mediante un editor de arrastrar y soltar, sin programar.

En la pestaña Publish de cada menú, Navi+ incorpora controles de visibilidad independientes:

• Selector Móvil: Activa el menú en pantallas de smartphone.
• Selector Escritorio: Activa el menú en pantallas de ordenador.

Por defecto, solo la opción Móvil permanece activa al crear un menú móvil. Puedes dejar esa configuración para tu cajón táctil y configurar otro menú con la opción Escritorio activa para ordenadores. Ambos menús operan con total independencia en tu tienda y admiten hasta tres niveles de anidación.

Para optimizar la ergonomía en smartphones, puedes combinar el cajón lateral con una bottom tab bar for Shopify, manteniendo el buscador, el carrito y las secciones estrella en la zona natural del pulgar.

Lista de verificación de acciones

• Auditar el catálogo: Determinar si es imprescindible tener dos menús o si basta con simplificar el actual.
• Configurar menú de escritorio: En Contenido > Menús, edita el menú principal con categorías y desplegables.
• Configurar menú móvil: En Contenido > Menús, crea una lista concisa y anota su handle.
• Revisar ajustes del encabezado: Comprueba si tu tema ya incluye un selector nativo de menú móvil.
• Elegir la estrategia: Decide entre la Opción 1 (menú único), la Opción 2 (código) o la Opción 3 (app).
• Duplicar tema antes de tocar código: Si optas por la Opción 2, duplica tu tema y edita snippets/header-drawer.liquid en la copia.
• Ajustar visibilidad en la app: Si usas app, asigna el mega menú a Escritorio y el drawer a Móvil.
• Probar en un teléfono real: Valida la apertura del cajón, submenús, tamaño de botones y vista apaisada.
• Mantener la sincronización: Actualiza ambas listas en Contenido > Menús cada vez que lances nuevas colecciones.

Preguntas frecuentes (FAQ)

¿Puedo mostrar un menú diferente en móvil que en ordenador?

Sí, aunque la mayoría de temas de Shopify muestran el mismo menú por defecto. Para mostrar enlaces diferentes, debes editar el código del cajón de tu tema o utilizar una aplicación de menú.

¿Por qué mi menú móvil muestra los mismos enlaces que mi menú de escritorio?

En temas como Dawn, la plantilla del cajón móvil lee la misma configuración seleccionada en la cabecera (section.settings.menu.links). Por eso, cualquier cambio en el menú principal afecta a ambos formatos.

¿Necesito editar el código del tema para usar dos menús?

No es necesario. Puedes recurrir a una aplicación de menús para asignar listas independientes según el dispositivo sin editar código. Si decides programar, duplica siempre tu tema primero.

¿Dónde creo los menús en Shopify?

Creas y administras todos los menús de tu tienda online en Contenido > Menus dentro del panel de Shopify.

¿Cuántos niveles puede tener un menú desplegable de Shopify?

Un elemento superior puede tener hasta dos niveles de menús desplegables anidados por debajo, lo que permite un máximo de tres niveles de navegación en total.

¿Qué pasa si elimino un elemento de menú principal?

Al eliminar un elemento padre que contiene elementos anidados, los elementos secundarios también se eliminan. Arrastra los elementos hijos fuera antes de borrar el elemento superior.

Fuentes

• Shopify Help Center: Editing Menus — Administración de navegación en Contenido > Menús y reglas de eliminación de elementos dependientes.
• Shopify Help Center: Drop-down Menus — Documentación sobre límites de anidación de dos niveles y pruebas móviles.
• Shopify Help Center: Duplicating Themes — Recomendaciones oficiales sobre duplicar temas antes de editar archivos Liquid.
• Shopify Developer Documentation: Liquid linklists Object — Referencia de la API Liquid para acceder a menús mediante su identificador.
• Shopify Dawn Repository: sections/header.liquid — Código fuente de Dawn que ilustra la asignación link_list en el encabezado.
• Shopify Dawn Repository: snippets/header-drawer.liquid — Código de Dawn que muestra el bucle del cajón móvil sobre section.settings.menu.links.
• Shopify Community: Customizing Main Menu and Sidebar Menu for Desktop and Mobile — Solución comunitaria para personalizar header-drawer.liquid en el tema Ride.
• Shopify Community: Use Different Menu for Mobile and Desktop — Hilo comunitario que expone la necesidad de separar menús en tiendas online.
• Fudge: How to Change Mobile Menu Behavior in Shopify — Análisis sobre el comportamiento de menús unificados y métodos de personalización móvil.
• W3C Web Accessibility Initiative: WCAG 2.2 Target Size (Minimum) — Criterio 2.5.8 que establece objetivos táctiles mínimos de 24×24 píxeles CSS.
• Nielsen Norman Group: Mobile Navigation Beyond the Hamburger — Investigación de usabilidad sobre la visibilidad del menú de hamburguesa e interfaces combinadas.
• Navi+ Help Center: Display Rules Settings — Manual de configuración de reglas de visualización en Mobile y Desktop.
• Shopify App Store: Navi+ Navigation & Menu Bar — Características de la aplicación para crear mega menús, cajones y barras inferiores.