Dedica horas a organizar colecciones y anidar enlaces en el panel de administración de Shopify. En la pantalla grande de un ordenador, las categorías se despliegan en un amplio mega menú. Pero al abrir el menú lateral en el teléfono móvil, la navegación suele sentirse dividida o desincronizada.
Muchos comerciantes asumen que ofrecer un diseño en columnas en escritorio y un menú sencillo en móvil requiere crear dos menús totalmente independientes. En realidad, no necesita mantener dos estructuras de datos. Puede conservar una única jerarquía de categorías como fuente de verdad y dejar que cada dispositivo presente esa estructura con el diseño más adecuado.
Respuesta rápida: ¿Puede un solo menú alimentar escritorio y móvil?
Sí. En Dawn, el menú principal de la cabecera alimenta tanto el menú de escritorio como el menú móvil desplegable, por lo que la estructura ya se comparte. La única diferencia radica en el diseño: el escritorio muestra columnas y el móvil navega nivel por nivel. Elija el método que mantenga una única fuente de verdad.
- Método 1 (Ajustes nativos del tema sin código): Conserve un solo menú en el panel de Shopify y cambie el ajuste de cabecera a Mega menú; el tema adaptará automáticamente la versión móvil.
- Método 2 (Menús separados en el panel): Cree una linklist móvil independiente y vincule el código del menú móvil a ella, asumiendo una doble carga de mantenimiento.
- Método 3 (Modificación de la plantilla móvil): Modifique el código Liquid del panel lateral para que las subcategorías se muestren abiertas de inmediato sin exigir varios toques de pantalla.
Cómo reutilizan los temas de Shopify un menú en escritorio y móvil
En Shopify, los datos de navegación son independientes del diseño visual. Cuando crea un menú en Contenido > Menús, Shopify lo guarda como un objeto linklist. Según la Documentación para desarrolladores de Shopify, “Puede anidar enlaces hasta tres niveles de profundidad”: un elemento principal acompañado de dos niveles secundarios. Para aprender a estructurar su catálogo, consulte nuestra Shopify menu guide.
Dado que cada linklist es una estructura de datos pura, el tema activo define cómo y dónde se visualiza (Shopify Dev Docs). En el archivo sections/header.liquid de Dawn, el ajuste menu_type_desktop permite alternar entre menús desplegables, mega menús o paneles laterales en escritorio (GitHub Shopify Dawn).
Independientemente del estilo de escritorio seleccionado, el menú móvil de Dawn lee esa misma linklist. En snippets/header-drawer.liquid, la plantilla recorre el menú con for link in section.settings.menu.links y profundiza hasta los enlaces de tercer nivel con for grandchildlink in childlink.links (GitHub Shopify Dawn). Liquid también registra la profundidad mediante la propiedad levels del objeto link (Shopify Liquid API).
La jerarquía base ya está unificada. Cuenta con One menu tree; lo único que cambia entre pantallas es la disposición visual.
Por qué los dos diseños siguen ofreciendo sensaciones diferentes
A pesar de compartir una misma lista de enlaces, la experiencia entre el ordenador y el móvil varía notablemente debido a modelos de interacción muy diferentes.
Figura 1: Ilustración conceptual (Concept illustration) — Por qué los dos diseños siguen ofreciendo sensaciones diferentes
En el escritorio, situar el cursor sobre una categoría abre un amplio Hover panel. Los compradores pueden revisar varias columnas con subcategorías y enlaces de producto a la vez sin cambiar de página.
En pantallas móviles, la estrechez del espacio impide mostrar columnas paralelas. Los temas recurren a un menú lateral deslizante con navegación escalonada. Para acceder a una subcategoría, el comprador debe tocar el elemento padre, esperar la transición de pantalla y tocar nuevamente. Esta necesidad de Two taps es una queja que han planteado algunos usuarios de Dawn en la comunidad de Shopify (Shopify Community). Si desea conocer a fondo la mecánica de estos menús, lea nuestro artículo sobre mobile drawer menu architecture.
Además, las pantallas táctiles introducen retos adicionales:
- Parent link not clickable: En muchos paneles móviles, tocar el nombre de la categoría principal solo despliega el submenú, impidiendo navegar a la página de la colección.
- Selecciones accidentales: Investigaciones de Nielsen Norman Group señalan que “las opciones diminutas dentro de los mega menús causan errores de selección en pantallas táctiles” (NN/g).
- Plantillas móviles independientes: Aplicaciones como Meteor separan intencionadamente las plantillas de escritorio y móvil (Helium Meteor Docs), mientras que diseñadores de Clean Canvas recomiendan un menú móvil de un solo nivel con enlaces directos para Symmetry (Clean Canvas).
Método 1: Mantener un menú de Shopify y cambiar el tipo de escritorio a Mega menú
El método sin código más eficiente consiste en aprovechar la función de mega menú integrada en el tema. Esto permite gestionar un único menú en el panel mientras el tema adapta el formato a cada pantalla.
Siga estos cuatro pasos:
- Construir la jerarquía de tres niveles: En Contenido > Menus, organice su menú principal en elementos de primer nivel, subtítulos y enlaces finales.
- Asignar el menú a la cabecera: En Tienda online > Temas > Personalizar > Cabecera, seleccione su lista de enlaces en la opción Menú.
- Cambiar el tipo de menú a Mega menú: En la configuración de cabecera, cambie Menu type de Menú desplegable a Mega menu (GitHub Shopify Dawn). Para configurar Dawn, lea nuestra guía para add a mega menu to Dawn.
- Comprobar la versión móvil: Cambie la vista previa a Móvil y abra el menú lateral. El sistema mostrará exactamente el mismo árbol de categorías (GitHub Shopify Dawn).
En otros temas comerciales, el nombre de este ajuste puede variar; consulte la documentación técnica de su tema (Shopify Dev Docs).
Método 2: Usar dos menús separados en el panel de Shopify
Si su menú de escritorio cuenta con muchos enlaces o banners que saturan los dispositivos móviles, puede optar por crear dos menús independientes en Shopify.
Crea un menú principal para escritorio y un segundo menú simplificado llamado “Mobile Menu” en Contenido > Menús. Para vincularlo, los programadores suelen modificar snippets/header-drawer.liquid para que apunte al menú móvil en vez de a section.settings.menu (Shopify Community). Consulte la documentación de su tema para saber si ofrece un ajuste propio para el menú lateral, lo que evitaría tocar el código.
Aunque otorga total libertad para diseñar la versión móvil, acarrea un coste operativo elevado:
- Cada nueva colección o campaña promocional obliga a actualizar dos menús por separado.
- Con el tiempo los dos menús pueden desajustarse y los clientes móviles pierden enlaces que sí están en el escritorio. Los comerciantes que quieren «replicar su menú de escritorio en el móvil» buscan justamente evitar esto (Shopify Community).
Reserve el Método 2 exclusivamente para casos donde la tienda móvil requiera un flujo de navegación completamente distinto.
Método 3: Editar el menú móvil para mostrar niveles anidados a la vez
Muchos comerciantes prefieren que los menús móviles muestren las subcategorías de inmediato sin obligar al usuario a desplazarse entre pantallas consecutivas (Shopify Community).
La plantilla móvil de Dawn ya recorre los enlaces secundarios y de tercer nivel (GitHub Shopify Dawn). Ajustando el código Liquid y CSS, los desarrolladores pueden retirar los paneles ocultos y hacer que los niveles anidados aparezcan expandidos por defecto.
Tenga en cuenta estas advertencias indispensables:
- Diferencias entre versiones: El código compartido en foros en 2022 se diseñó para versiones antiguas de Dawn. Las clases y estructuras han cambiado.
- Duplique su tema primero: Guarde siempre una copia de seguridad del tema antes de modificar archivos Liquid. Nunca edite código sin probar en la tienda activa.
- Desplazamiento vertical excesivo: Si su mega menú tiene muchos enlaces, mostrarlos todos abiertos en móvil provocará una lista larga que obliga a desplazarse mucho.
Qué elementos pasan del mega menú de escritorio al móvil
Al trasladar un mega menú de escritorio a un smartphone, los componentes visuales deben ajustarse. Nielsen Norman Group aconseja agrupar las opciones en conjuntos relacionados (NN/g). Para conocer estrategias de agrupación, consulte nuestro artículo sobre mega menu layout and grouping best practices.
Figura 2: Ilustración conceptual (Concept illustration) — Qué elementos pasan del mega menú de escritorio al móvil
| Elemento de escritorio | Comportamiento en móvil | Recomendación práctica |
|---|---|---|
| Cuadrícula de varias columnas | La pantalla estrecha no admite varias columnas horizontales (Navi+ Docs) | Las Columns become one column apiladas verticalmente en una sola lista desplazable |
| Títulos de columna | Los títulos que solo etiquetan una columna de escritorio ocupan espacio en una lista estrecha | Suelen omitirse al apilar las columnas; un Divider between columns fino mantiene visible la agrupación anterior |
| Imágenes y banners comerciales | Los grandes Promo banner desplazan los enlaces fuera de la vista | Oculte imágenes pesadas en móvil; use ajustes como Exclude when embedded para mantener el menú ligero (Navi+ Docs) |
| Profundidad del menú | Shopify limita los menús a tres niveles en total (Shopify Dev Docs) | Limite la estructura a ≤ 3 niveles para evitar que queden enlaces fuera de los bucles Liquid nativos |
| Enlaces de texto compactos | El texto demasiado junto propicia errores táctiles (NN/g) | Amplíe el espaciado para cumplir la norma WCAG 2.2 de al menos 24 por 24 píxeles CSS (W3C WCAG 2.2) |
Probar en dispositivos reales antes de publicar
Los emuladores del navegador simulan anchos de pantalla, pero no reproducen el alcance del pulgar ni la precisión táctil real. Realice comprobaciones en dispositivos físicos:
- Probar en teléfonos iOS y Android reales: Abra la vista previa en dispositivos con distintos tamaños de pantalla en formato vertical y horizontal.
- Pulsar en cada nivel de enlace: Toque elementos principales, subcategorías y destinos finales para validar que apunten a colecciones activas.
- Comprobar los enlaces padre: Asegúrese de que tocar una categoría superior dirija a la colección o expanda el submenú sin fallos.
- Medir el área táctil: Compruebe que los botones y enlaces midan al menos 24x24 píxeles según WCAG 2.2 (W3C WCAG 2.2).
- Verificar el desplazamiento del menú: Desplácese desde arriba hasta los enlaces inferiores de cuenta para confirmar que nada queda tapado.
- Utilizar la vista previa del tema: Realice las pruebas en un borrador de tema duplicado antes de publicar cambios en la tienda real.
Problemas comunes y soluciones
Al sincronizar la navegación de escritorio y móvil, suelen darse cuatro incidentes habituales:
El menú móvil requiere dos toques
- Causa: La navegación por paneles exige tocar una categoría, esperar la transición y tocar de nuevo (Shopify Community).
- Solución: Reestructure el código para desplegar los subelementos en línea (Método 3), o elija un diseño que omita el nivel intermedio de columnas.
Los niveles profundos no aparecen
- Causa: Shopify solo admite tres niveles de navegación (Shopify Dev Docs). Dawn no lee más allá del tercer nivel (GitHub Shopify Dawn).
- Solución: Simplifique la estructura para que todas las páginas relevantes se ubiquen dentro de los tres niveles admitidos.
El enlace principal no es interactivo
- Causa: En pantallas táctiles, pulsar sobre el elemento padre solo sirve para abrir o cerrar el subpanel.
- Solución: Añada un enlace “Ver todo en [Categoría]” como primer elemento del submenú.
El menú móvil muestra enlaces diferentes al escritorio
- Causa: Su tienda aplica el Método 2 mediante código en
snippets/header-drawer.liquido una aplicación que apunta a un menú móvil independiente (Shopify Community). - Solución: Revise los ajustes de cabecera y el código Liquid del panel para verificar qué identificador de menú se está consultando.
Compromisos: Cuándo una estructura única es una mala elección
Mantener una única estructura ahorra tiempo, pero cada alternativa conlleva compromisos definidos:
| Método | Esfuerzo inicial | Código necesario | Lugar de gestión | Principales limitaciones y riesgos |
|---|---|---|---|---|
| Método 1: Mega menú nativo | Bajo (minutos) | Ninguno (ajustes de tema) | Un menú en el panel Shopify | Supeditado a las opciones del tema; el menú móvil mantiene la navegación por toques |
| Método 2: Dos menús separados | Medio | Pequeña edición Liquid o ajuste | Dos menús en el panel | Riesgo alto de desfase en el catálogo; doble trabajo al gestionar el inventario |
| Método 3: Menú lateral adaptado | Alto | Edición en Liquid y CSS | Un menú en el panel Shopify | Puede romperse con actualizaciones del tema; listas largas generan fatiga visual en móvil |
Cuándo conviene separar los menús
Aunque tener una sola fuente de datos evita incoherencias, separar menús resulta conveniente en situaciones específicas:
- Catálogos extremadamente grandes: Las tiendas con miles de productos repartidos en muchas ramas pueden saturar los teléfonos móviles. Un menú móvil de un solo nivel con accesos directos proporciona una experiencia más cómoda (Clean Canvas).
- Accesos rápidos para móvil: Los usuarios de teléfonos móviles pueden beneficiarse de accesos directos como Seguimiento de pedido o Localizador de tiendas en el primer nivel.
- Rastreo y SEO: Si oculta categorías en móvil, asegúrese de que todas las páginas de colección sigan siendo accesibles mediante enlaces internos en páginas de producto, migas de pan y sitemaps. Consulte nuestra guía sobre cómo keep your menu crawlable.
Dónde encaja Navi+
Si su tema actual carece de opciones de mega menú o prefiere no modificar código Liquid, Navi+ ofrece una forma estructurada de compartir la navegación entre dispositivos.
Según la documentación de Navi+, así funcionan juntos el menú de escritorio y el menú móvil:
- Desktop Mega Menu: En pantallas amplias, Navi+ Desktop Mega Menu muestra paneles de varias columnas con imágenes y banners. No se visualiza en teléfonos móviles porque las columnas no caben en pantallas estrechas (Navi+ Docs).
- Incrustación en Mobile Menu: En lugar de crear otro menú, Navi+ Mobile Menu permite incrustar su mega menú mediante un elemento específico colocado en el nivel 1 del panel (Navi+ Docs).
- Apilamiento en columna única: Al incrustarse, las Columns become one column apiladas con claridad (Navi+ Docs). Se descarta el nivel intermedio de columnas para que los clientes lleguen a los enlaces con un solo toque.
- Control de visibilidad: Active la función Exclude when embedded para ocultar banners de escritorio en el móvil (Navi+ Docs).
- Editar en un solo lugar: El panel móvil reutiliza los elementos del mega menú: solo necesita realizar los cambios una vez (Edit once) en su mega menú y la copia incrustada en el panel lo sigue. Para eliminar un mega menú, retire antes el elemento incrustado del Mobile Menu (Navi+ Docs).
- Tres niveles de profundidad: Navi+ Mobile Menu admite hasta tres niveles de navegación (categorías, subcategorías y enlaces directos) (Navi+ Docs).
Para configurarlo:
- En Navi+, copie el elemento incrustado de su Desktop Mega Menu.
- Péguelo en el nivel 1 de su Mobile Menu.
- Active Exclude when embedded en los banners o elementos exclusivos para ordenador.
Para conocer todos los detalles, consulte las guías oficiales para reuse a Desktop Mega Menu on phones y gestionar elementos con Exclude when embedded.
Si ya usa Navi+ para un Desktop Mega Menu, pruebe a copiar su elemento incrustado en un Mobile Menu y revise la vista previa en su teléfono; si el resultado no es el que busca, elimine el elemento incrustado y nada más cambiará.
Lista de verificación de acciones
Siga esta lista para coordinar su mega menú de escritorio y la navegación móvil:
- Definir un árbol de menú único: Cree su estructura en Contenido > Menús, respetando el límite de tres niveles de Shopify.
- Elegir el método: Seleccione entre ajustes nativos del tema (Método 1), menús independientes (Método 2) o retoque de código del panel (Método 3).
- Duplicar el tema: Guarde una copia de seguridad antes de modificar archivos Liquid o insertar código.
- Apilar columnas en una sola: Compruebe que las columnas de escritorio se conviertan en una lista legible de una sola columna en pantallas móviles.
- Filtrar elementos pesados: Oculte banners publicitarios de gran tamaño en el menú móvil.
- Verificar enlaces principales: Compruebe que las categorías superiores abran su colección o tengan un enlace “Ver todo”.
- Probar en smartphones reales: Evalúe la agilidad táctil, el desplazamiento vertical y el tamaño mínimo de 24x24 px en dispositivos físicos.
Preguntas frecuentes (FAQ)
¿Puedo usar un solo menú para escritorio y móvil?
Sí. En temas como Dawn, el menú móvil se alimenta del mismo menú asignado a la cabecera. De este modo gestiona una sola linklist mientras el tema aplica el diseño oportuno a cada pantalla.
¿Cuántos niveles puede tener un menú de Shopify?
Un elemento principal en Shopify puede tener hasta dos niveles secundarios anidados, sumando tres niveles de navegación en total. La plantilla móvil de Dawn lee los enlaces hasta el nivel de nietos.
¿Por qué mi menú móvil necesita dos toques?
Los paneles móviles convencionales suelen aplicar navegación por niveles: tocar una categoría abre un panel secundario y un segundo toque selecciona el enlace. Esto se resuelve desplegando los menús directamente o retirando el nivel de columnas.
¿Funcionan las columnas y las imágenes del mega menú en móvil?
Las columnas anchas no caben en pantallas móviles y se muestran apiladas en una columna vertical. Las imágenes y banners ocupan demasiado espacio y se suelen ocultar en móvil mediante ajustes de visibilidad.
¿Necesito editar el código del tema?
No. Si su tema incluye soporte nativo para mega menú, puede activarlo en el editor del tema sin tocar código. Solo necesitará modificar código si busca alterar el funcionamiento del panel móvil o redirigirlo a otro menú.
Fuentes
- Shopify Developer Documentation: Navigation and Search — Especificaciones técnicas de objetos linklist y anidación de hasta tres niveles.
- Shopify Dawn Repository: header.liquid — Código fuente de los tipos de menú en escritorio: desplegable, mega menú y lateral.
- Shopify Dawn Repository: header-drawer.liquid — Bucle del menú móvil que recorre enlaces hasta el nivel de nietos.
- Shopify Liquid API Reference: Link Object — Documentación de atributos de enlace, incluyendo los niveles de anidación.
- Nielsen Norman Group: Mega Menus Work Well Anywhere — Estudios de UX sobre fallos táctiles, agrupación de opciones y jerarquía informativa.
- W3C Web Accessibility Initiative: Target Size Minimum (WCAG 2.2) — Estándar de accesibilidad que exige áreas táctiles de al menos 24 por 24 píxeles CSS.
- Shopify Community: Main menu nesting mobile vs desktop — Debate acerca de la necesidad del doble toque en la navegación móvil de Dawn.
- Shopify Community: Desktop Mega Menu and Mobile Hamburger Menu — Solución de la comunidad para vincular un menú móvil diferente en el tema.
- Shopify Community: DAWN how to show nested menu/submenu on mobile — Peticiones para mostrar niveles 2 y 3 a la vez en el menú móvil de Dawn.
- Shopify Community: How can I make my desktop menu identical on mobile — Consultas para replicar estructuras de menú de escritorio en dispositivos móviles.
- Helium Meteor Documentation: Welcome to Meteor — Estructura de plantillas diferenciadas para menús de escritorio y móvil.
- Clean Canvas Blog: Mega Menu Your Shopify Store — Recomendaciones para menús móviles de un nivel en el tema Symmetry.
- Navi+ Documentation: Create a Desktop Mega Menu — Documentación sobre apilamiento de columnas, incrustaciones y visibilidad.
- Navi+ Documentation: Create a Mobile Menu — Guía para menús móviles de 3 niveles e incrustación de paneles.
- Navi+ Documentation: Item Visibility — Instrucciones para ocultar elementos según el dispositivo con Exclude when embedded.
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.