Arquitectura de Menús Multinivel en Shopify: Taxonomías Anidadas, Navegación Profunda y Orientación
Estructurar la navegación para una tienda pequeña es sencillo: unos pocos enlaces en la cabecera guían directamente a los compradores hacia los productos. Sin embargo, cuando el catálogo se expande a través de departamentos, siluetas y especificaciones técnicas, el menú deja de ser un detalle visual. Se convierte en una disciplina de ingeniería para la orientación en la tienda.
En las tiendas nativas de Shopify, los comerciantes se encuentran con una regla de plataforma inamovible: los menús admiten un elemento principal más un máximo de dos niveles anidados. Este límite de 3 niveles no es un defecto fortuito, sino una protección de usabilidad. Las tiendas eficientes no intentan saltarse este límite con estructuras complejas, sino que presentan estos tres niveles mediante mega menús en escritorio, navegación tranquila paso a paso en móviles y delegan los detalles en los filtros de colección.
Respuesta rápida: ¿Hasta qué profundidad puede llegar un menú en Shopify?
Un menú de Shopify admite tres niveles: un elemento raíz y hasta dos niveles desplegables anidados (Centro de ayuda de Shopify). La mayoría de temas los admiten, pero los menús profundos son difíciles de usar. Agrúpelos en un mega menú en escritorio y en paneles o acordeones en móviles (NN/g).
- Límite de plataforma de 3 niveles: Shopify permite un enlace raíz más dos niveles desplegables. La taxonomía más detallada debe residir en los filtros de colección.
- Desafío de la ley de Steering: Nielsen Norman Group advierte que los menús hover en cascada crean túneles de ratón inestables. NN/g sugiere considerar mega menús 2D en escritorio.
- Equilibrio en patrones móviles: Los acordeones verticales provocan desplazamiento infinito si se abren varias ramas, mientras que los paneles drill-down fijan la altura pero exigen botones de retorno claros.
| Modelo de entrega | Dispositivo principal | Fortaleza clave | Riesgo de usabilidad | Catálogo recomendado |
|---|---|---|---|---|
| Flyouts en cascada | Solo escritorio | Ocupa poco espacio en cabecera | El movimiento diagonal del ratón cierra el submenú | Boutiques pequeñas con mínimas subcategorías |
| Mega Menú agrupado | Solo escritorio | Muestra la jerarquía 2D de un vistazo | Errores táctiles si se reutiliza tal cual en móviles | Tiendas departamentales y catálogos amplios |
| Acordeones verticales | Móviles | Conserva el contexto de categorías hermanas | Proliferación vertical empuja los enlaces fuera de pantalla | Catálogos con pocos elementos por categoría padre |
| Paneles Drill-Down | Móviles | Altura de pantalla fija, un nivel a la vez | Desorientación si el botón de regreso es genérico | Comercio con taxonomías profundas y muchas ramas |
Cómo almacena Shopify los menús multinivel
Shopify almacena los menús como listas de enlaces jerárquicas en la base de datos. Aunque guías antiguas remitían a Online Store > Navigation, la documentación oficial actual gestiona los menús directamente desde Content > Menus. Entender las restricciones de la plataforma y cómo leen los temas estas estructuras evita fallos graves de visualización.
Anidar elementos en Content > Menus
Para crear un menú anidado en Shopify, vaya al panel de administración y entre en Content > Menus. Abra su menú principal, agregue los enlaces y arrastre los elementos secundarios hacia la derecha debajo de su categoría principal. La documentación de Shopify establece que un elemento raíz puede contener hasta dos niveles de menús desplegables anidados, formando un límite estricto de 3 niveles en total. No es posible crear un cuarto nivel de forma nativa.
Shopify Admin Native Menu Structure:
Level 1: Men (Top-level item)
└── Level 2: Footwear (First nested drop-down)
└── Level 3: Running Shoes (Second nested drop-down — hard ceiling)
└── [Level 4: Trail Running] ◄── Not possible in Shopify admin
Cómo leen los temas los enlaces anidados (link.links)
Las plantillas Liquid de Shopify recorren la navegación anidada mediante el objeto link. El atributo link.links devuelve los enlaces secundarios, mientras que link.levels indica el número de niveles anidados disponibles. Los temas suelen ejecutar hasta tres bucles anidados:
<ul class="site-nav">
</ul>
Por qué su tema oculta el tercer nivel
Muchos comerciantes notan con sorpresa que los enlaces de tercer nivel creados en el admin no se muestran en la tienda. El Centro de ayuda de Shopify aclara que la mayoría de los temas solo admiten hasta dos niveles desplegables en cabeceras estándar. Algunos temas reservan el tercer nivel para diseños de mega menú con columnas; consulte la documentación de su tema antes de suponer que los datos del menú están mal.
En dispositivos móviles ocurre otro problema habitual: al pulsar en una categoría principal, la tienda redirige de inmediato a la colección en lugar de desplegar los submenús. Shopify aconseja comprobar en Content > Menus que el enlace del elemento superior esté fijado en #. Además, Shopify señala que algunos temas requieren ajustes de CSS para optimizar la ergonomía móvil.
Por qué la profundidad excesiva falla: Ley de Steering y rastro de información
Los menús multinivel profundos introducen fricciones mecánicas y cognitivas. En ordenadores, los menús flyout en cascada obligan a desplazar el cursor a través de pasillos horizontales estrechos. Si el usuario mueve el puntero en diagonal hacia el tercer nivel, este sale del área de activación y el submenú se cierra al instante.
The "Mouse Tunnel" Steering Trap in Cascading Flyouts:
┌──────────────┐
│ Category A │
├──────────────┤
│ Category B │──────┐
├──────────────┤ │ Shopper moves pointer diagonally
│ Category C │ ▼ toward desired item...
└──────────────┘ ┌──────────────┐
│ Sub-item 1 │
├──────────────┤ ◄── Pointer exits the narrow tunnel!
│ Sub-item 2 │ Submenu collapses instantly.
└──────────────┘
La ley de Accot-Zhai (Steering Law) formaliza esta dificultad: desplazarse por túneles estrechos lleva más tiempo y es fácil equivocarse. Las investigaciones de Nielsen Norman Group sobre esta ley señalan que los menús jerárquicos son una interfaz intrínsecamente difícil de diseñar. NN/g aconseja explícitamente evitar los menús jerárquicos, en especial aquellos con más de dos niveles de profundidad.
Además, la profundidad excesiva daña el rastro de información (information scent). Los usuarios avanzan buscando palabras clave que confirmen que van por el camino correcto. Cuando las categorías están ocultas o formuladas con términos ambiguos, los clientes pueden perderse.
Desktop: Flyouts en cascada vs Mega Menús
Para escapar de la trampa del túnel del ratón, Nielsen Norman Group aconseja: para los menús de navegación, considere los mega menús como alternativa a los menús desplegables. En lugar de exigir trayectorias complejas, un mega menú extiende todas las opciones de segundo y tercer nivel sobre una superficie bidimensional estable.
El comportamiento hover de un mega menú requiere tiempos de espera rigurosos. Nielsen Norman Group establece que el puntero debe permanecer quieto durante 0.5 segundos antes de abrir el panel, desplegarse en 0.1 segundos y mantenerse visible hasta que el puntero haya estado fuera del botón y del menú durante 0.5 segundos. Este margen evita aperturas accidentales al cruzar la cabecera.
NN/g también indica agrupar las opciones en conjuntos relacionados. En un menú de 3 niveles en Shopify, esto implica utilizar los elementos de Nivel 2 como encabezados de columna destacados y ubicar los enlaces de Nivel 3 bajo ellos. Si desea profundizar en su disposición, consulte nuestra guía sobre mega menu best practices.
No obstante, un mega menú de escritorio no debe trasladarse directamente al móvil. NN/g advierte que las opciones diminutas en los mega menús provocan errores de selección en pantallas táctiles. El diseño de escritorio debe transformarse en una interfaz adaptada a la mano.
Móvil: Acordeones vs Paneles Drill-Down
La navegación móvil debe responder a la biomecánica táctil. El estudio de campo de Steven Hoober publicado en UXmatters —basado en 1,333 observaciones de usuarios móviles— comprobó que el 49% utiliza el teléfono con una sola mano. Pruebe su menú con una sola mano en un teléfono real.
Figura 1: Ilustración conceptual (Concept illustration) — Móvil: Acordeones vs Paneles Drill-Down
Las ventajas de los acordeones
Los acordeones verticales despliegan las subcategorías justo debajo del elemento seleccionado. Un artículo de Smashing Magazine (Friedman 2022) señala que los acordeones funcionan muy bien para varios niveles de navegación y suelen ser preferibles a los menús deslizantes. Como las categorías hermanas siguen visibles, los compradores pueden saltar rápidamente entre niveles sin perder el contexto de la página.
El principal riesgo es el fenómeno de Accordion sprawl. Si el usuario abre varias categorías seguidas, el menú vertical se prolonga a lo largo de varias alturas de pantalla y aparta los enlaces clave de la vista. Para corregirlo, configure el menú de modo que cierre automáticamente los paneles hermanos cuando se abra uno nuevo.
Las ventajas de los paneles Drill-Down
Los paneles drill-down reemplazan la vista completa del cajón de navegación de forma horizontal en cada paso, mostrando One tier at a time. Esto preserva la altura constante del menú y organiza los enlaces en Intent groups limpios, ideal para catálogos extensos con muchas ramas.
La desventaja señalada por Smashing Magazine es que el destino del botón de retorno suele ser incierto. Smashing recomienda sustituir un botón genérico por un Contextual back label (por ejemplo ‹ Men). También sugerimos mantener un Persistent back button en la parte superior de cada panel. Para implementarlo, consulte nuestra guía de mobile drawer menu design.
Taxonomía vs Filtros: Dónde debe detenerse el menú
Figura 2: Ilustración conceptual (Concept illustration) — Taxonomía vs Filtros: Dónde debe detenerse el menú
Cuando los comerciantes se sienten limitados por el tope de 3 niveles, el motivo suele ser una confusión entre taxonomía y filtros. El menú debe albergar Structural categories que representen intenciones de compra mutuamente excluyentes (como Zapatillas de running frente a Zapatillas casual). Por el contrario, los atributos pertenecen a Faceted filters y Filter chips en las páginas de colección.
| Dimensión | Menú de navegación (Niveles 1–3) | Filtros de colección (Facetados) | Impacto en la tienda |
|---|---|---|---|
| Alcance estructural | Structural categories con siluetas definidas | Atributos y características transversales | Distingue la orientación general del filtrado fino |
| Ejemplos típicos | Hombre > Calzado > Zapatillas de running | Color, Talla, Material, Precio, Marca | Evita la repetición masiva de enlaces en el menú |
| Ubicación en tienda | Barra de cabecera y panel móvil | Barra lateral o panel de filtros en colección | Mantiene la navegación principal despejada y legible |
| Interacción del cliente | Descubrimiento general y entrada inicial | Ajuste preciso según preferencias de compra | Une la agilidad de navegación con la precisión de compra |
Introducir atributos como Rojo, Talla L o un rango de precios en los enlaces de navegación sobrecarga la jerarquía. Detener el menú en el nivel 3 y dejar que los filtros resuelvan las variantes garantiza una navegación limpia y accesible.
Rendimiento y accesibilidad en menús profundos
Los menús muy anidados conllevan riesgos técnicos. En temas estándar de Shopify, los bucles Liquid renderizan cada enlace del lado del servidor en el documento HTML inicial. Los mega menús cargados de imágenes, insignias y descripciones generan una gran cantidad de nodos DOM antes de cualquier interacción del cliente.
La documentación de Google Chrome Lighthouse advierte cuando el elemento body supera ~800 nodos y señala un error si sobrepasa ~1,400 nodos. Un DOM grande da más trabajo al navegador: mida en lugar de adivinar. Puede verificar los nodos de su cabecera en la consola de Chrome: document.querySelector(‘header’).querySelectorAll(‘*’).length. Amplíe información en nuestro artículo sobre how navigation affects page speed.
En cuanto a accesibilidad, los menús deben ceñirse a las pautas de W3C WAI-ARIA APG. El patrón de disclosure establece que la navegación web no utiliza el rol de menú, reservado para aplicaciones de escritorio. Los botones de activación deben alternar aria-expanded entre false y true, ocultar paneles inactivos a los lectores de pantalla y responder a Escape: al pulsar Escape se cierra el desplegable y el foco vuelve al botón que lo abrió.
Compromisos de diseño: Cuándo prescindir de menús profundos
No todas las tiendas necesitan tres niveles. Las boutiques con catálogos breves crean fricción innecesaria al incorporar menús multinivel. Cuando un catálogo pequeño puede explorarse cómodamente en una sola página, los niveles adicionales solo imponen clics superfluos.
Las marcas de venta directa (DTC) que derivan tráfico de pago directamente a landing pages específicas también obtienen mejores resultados con menús planos. Disponer de enlaces directos y filtros horizontales puede encajar mejor que un mega menú complejo; pruébelo con su propio tráfico.
Asimismo, las firmas de lujo y diseño priorizan el espacio en blanco y la estética visual sobre las listas densas de enlaces. Recuerde la recomendación fundamental de Nielsen Norman Group: evite los menús jerárquicos, en especial los que superan dos niveles de profundidad.
Marco de decisión por forma de catálogo
Para determinar la arquitectura de navegación ideal para su tienda en Shopify, compare la escala de su catálogo y el comportamiento de sus clientes con la siguiente matriz:
Multi-Level Navigation Decision Architecture:
┌─────────────────────────────────────────────────────────────────┐
│ Catalog Scale & Taxonomy Audit │
└────────────────────────────────┬────────────────────────────────┘
│
┌───────────────────────┴───────────────────────┐
▼ ▼
[ Small, focused catalog ] [ Broad, multi-category ]
│ │
▼ ▼
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ 1–2 Tier Flat Navigation │ │ Multi-Tier Structure Needed │
│ Single-line bar on desktop │ └──────────────┬──────────────┘
│ Clean 1-level mobile drawer │ │
└─────────────────────────────┘ ┌──────────────────────┴──────────────────────┐
▼ ▼
[ Desktop Viewport ] [ Mobile Viewport ]
│ │
▼ ▼
┌─────────────────────────────┐ ┌─────────────────────────────┐
│ 2D Scannable Mega Menu │ │ Drill-Down Panels / Drawer │
│ Columns, intent groups │ │ Step-by-step navigation │
│ High scannability │ │ Contextual "< Back" crumb │
└─────────────────────────────┘ └─────────────────────────────┘
| Tipo de catálogo | Niveles sugeridos | Modelo en escritorio | Modelo en móviles | Estrategia de taxonomía |
|---|---|---|---|---|
| Catálogo reducido y enfocado | 1 a 2 Niveles | Barra horizontal limpia | Cajón deslizante de 1 nivel | Agrupar por producto clave; añadir un nivel anidado solo si hace falta |
| Pocos departamentos claros | 2 a 3 Niveles | Mega menú con varias columnas | Cajón de 2 niveles con acordeón | Departamento > Categoría; insignias visuales de apoyo |
| Muchos departamentos y SKUs | 3 Niveles | Mega menú amplio y agrupado | Paneles drill-down o cajón | Departamento > Categoría > Silueta; atributos en filtros |
| Técnico y basado en búsqueda | 3 Niveles + búsqueda y filtros | Mega menú con barra de búsqueda | Paneles drill-down + filtros rápidos | Disciplina > Equipo > Ficha; facilitar búsqueda y navegación |
Las etiquetas de catálogo son pautas cualitativas, no umbrales matemáticos absolutos.
Dónde encaja Navi+
Para los comerciantes de Shopify que buscan estructurar catálogos complejos sin modificar el código Liquid del tema, Navi+ ofrece un editor visual de navegación para tiendas Shopify.
Theme Menu vs. Navi+ Menu Delivery:
Traditional Theme Liquid:
[Shopify Server] ──► [Loops every menu link in Liquid] ──► [All links in initial HTML] ──► Browser
Navi+:
[Shopify Server] ──► [Theme HTML without Navi+ menu links] ──► Browser
▲
│ Menu config loaded by a script
[CDN]
(Menu stored as a JSON file)
Siguiendo la arquitectura nativa de Shopify, los menús de Navi+ admiten un límite de 3 niveles. Su diferencial radica en la presentación según el dispositivo: permite diseñar un Desktop Mega Menu con columnas, grupos e imágenes llamativas, mientras que en teléfonos activa un Mobile Menu exclusivo (o una barra inferior Tab Bar) orientado al uso táctil. Un Mobile Menu también puede incrustar su árbol de menú de Shopify existente y actualizarlo con el botón Sync now.
En el plano técnico, Navi+ almacena las configuraciones en archivos JSON en CDN que se cargan mediante un script en el navegador, manteniendo los enlaces del menú fuera de la plantilla Liquid inicial del servidor. Recomendamos medir el rendimiento de su tienda mediante PageSpeed Insights y las herramientas DevTools de Chrome.
Si el menú integrado de tu tema no permite que los compradores de escritorio y de móvil vean presentaciones distintas de la misma estructura de tres niveles, Navi+ te permite crear visualmente un Desktop Mega Menu y un Mobile Menu independiente — y después aplicar la lista de verificación de abajo en tu propia tienda.
Para explorar otros esquemas de navegación móvil, lea nuestro artículo sobre mobile navigation beyond the hamburger y consulte las Navi+ setup guides for Shopify themes.
Checklist de acción: Audite su menú multinivel
Aplique esta auditoría de cinco pasos para optimizar la estructura de navegación en su tienda de Shopify:
- Paso 1: Separar taxonomía de atributos: Revise sus enlaces en una hoja de cálculo. Conserve las categorías estructurales (como Calzado o Abrigos) en el menú y traslade los atributos (Color, Talla, Precio) a los filtros de colección.
- Paso 2: Fortalecer el rastro de información: Elimine nombres comerciales ambiguos y utilice términos claros y directos que coincidan con las búsquedas reales de sus compradores.
- Paso 3: Probar en un teléfono real: Navegue en un smartphone hasta el Nivel 3. Asegúrese de que el enlace de nivel superior tenga configurado # para no causar recargas erróneas y compruebe los botones de retorno.
- Paso 4: Medir los nodos DOM de cabecera: Ejecute document.querySelector(‘header’).querySelectorAll(‘*’).length en la consola DevTools. Compare el resultado con el total de la página y el aviso de ~800 nodos de Lighthouse.
- Paso 5: Comprobar la navegación con teclado: Recorra el menú utilizando exclusivamente Tab, Enter y Escape. Verifique que Escape cierre los desplegables y devuelva el foco al botón de apertura.
Preguntas Frecuentes (FAQ)
Dudas habituales sobre la arquitectura de menús multinivel en Shopify, límites de plataforma y UX móvil:
¿Cuántos niveles puede tener un menú en Shopify?
Un menú de Shopify admite tres niveles: un elemento superior más hasta dos niveles de menús desplegables anidados, según el Centro de ayuda de Shopify.
¿Cómo anidar un elemento de menú en Shopify?
En el panel de Shopify, vaya a Content > Menus, seleccione su menú, arrastre un elemento hacia la derecha debajo del elemento principal y guarde los cambios.
¿Por qué mi tema no muestra los enlaces del tercer nivel?
Según el Centro de ayuda de Shopify, la mayoría de los temas solo admiten hasta dos niveles desplegables en cabeceras estándar. Algunos temas reservan el tercer nivel para diseños de mega menú; consulte la documentación del tema.
¿Por qué mi enlace principal abre una página en móvil en vez de desplegar el menú?
Shopify aconseja comprobar en Content > Menus que el enlace del elemento superior esté configurado como # para que al tocarlo se abra el submenú sin recargar la página.
¿Es mejor un mega menú que un menú desplegable para un catálogo grande?
Nielsen Norman Group recomienda considerar mega menús en lugar de menús desplegables tradicionales y aconseja evitar jerarquías de más de dos niveles.
¿Acordeón o paneles drill-down en dispositivos móviles?
Ambos tienen ventajas: Smashing Magazine indica que los acordeones funcionan muy bien para varios niveles, mientras que los paneles drill-down evitan el desplazamiento vertical excesivo si cuentan con botones de regreso contextuales.
Fuentes y Referencias
- Centro de ayuda de Shopify: Set up drop-down menus in your online store. Documentación sobre jerarquía de menús y funciones de temas. help.shopify.com
- Shopify.dev: Referencia del objeto Liquid link. Especificaciones de arrays de enlaces secundarios link.links y link.levels. shopify.dev
- Nielsen Norman Group: Laubheimer, P. (2019). Accot-Zhai Steering Law: Implications for UI Design. Estudio sobre túneles del ratón y menús anidados. nngroup.com
- Nielsen Norman Group: Nielsen, J. & Li, A. (2017). Mega Menus Work Well for Site Navigation. Pautas de agrupación 2D y tiempos de hover (0.5 s / 0.1 s). nngroup.com
- Smashing Magazine: Friedman, V. (2022). Designing Navigation for Mobile: Design Patterns and Best Practices. Análisis de acordeones móviles, menús deslizables y botones contextuales. smashingmagazine.com
- Steven Hoober (UXmatters): How Do Users Really Hold Mobile Devices? (2013). Estudio empírico con 1,333 observaciones; 49% con una sola mano. uxmatters.com
- Chrome for Developers: Avoid an excessive DOM size (Lighthouse). Directrices sobre avisos de nodos (~800 nodos) y errores (~1,400 nodos). developer.chrome.com
- W3C Web Accessibility Initiative (WAI): WAI-ARIA APG - Disclosure Navigation Pattern. Estándares de interacción con teclado y estados de accesibilidad. w3.org
- Lecturas recomendadas: Mega Menu Best Practices, Mobile Drawer Menu Design, Navigation and Page Speed, Mobile Navigation Beyond the Hamburger y Navi+ Setup Guides for Shopify Themes.
Explora los temas
Esta guía enlaza a artículos específicos — profundiza en cada uno.