Guía de menús de Shopify: Arquitectura, patrones de navegación, ergonomía móvil y UX de storefront

La navegación es el motor de orientación de su tienda Shopify. Antes de que un comprador evalúe detalles, lea opiniones o compre, debe encontrar dónde residen los productos. Las rutas claras generan impulso, mientras que los enlaces ocultos, etiquetas vagas y objetivos táctiles incómodos estancan la compra.

El comercio electrónico actual abarca dos realidades: monitores de escritorio con amplio espacio horizontal y smartphones manipulados con un solo pulgar. Equilibrar la capacidad de escaneo en escritorio con la ergonomía móvil exige decisiones arquitectónicas precisas.

Esta guía ofrece una hoja de ruta práctica para estructurar la navegación en Shopify: cómo gestiona la plataforma los datos de menú, cómo se comparan cuatro patrones esenciales, qué recomienda la investigación de usabilidad y una lista de verificación paso a paso.

Respuesta rápida: Cómo funcionan los menús de Shopify

Los menús de Shopify se crean en Contenido > Menús y se muestran según el tema; un elemento principal puede albergar hasta dos niveles anidados (tres en total). Utilice un desplegable simple para catálogos pequeños, un mega menú en escritorio para ofertas amplias y mantenga enlaces visibles en móviles en lugar de ocultar todo tras un icono hamburguesa.

Puntos clave

• Jerarquía de plataforma: Shopify establece un límite de tres niveles de anidación (un elemento principal y hasta dos niveles desplegables anidados) gestionados en Contenido > Menus (Shopify Help Center).
• Visibilidad en escritorio: Investigaciones de Nielsen Norman Group demuestran que los mega menús permiten abarcar opciones de un vistazo en vez de memorizarlas (NN/g).
• Participación en móviles: Las pruebas de usabilidad de NN/g revelan que los menús ocultos solo se usaron en el 57% de los casos móviles, mientras que la navegación combinada con enlaces visibles alcanzó el 86% (NN/g).

Cómo se construyen los menús de Shopify: Contenido > Menús, Temas y el Límite de tres niveles

Configurar una navegación eficaz exige comprender cómo separa Shopify los datos de menú de la presentación gráfica del tema. Las jerarquías residen como datos persistentes de la tienda, mientras que los temas controlan los estilos visuales.

Figura 1: Ilustración conceptual (Concept illustration) — Cómo se construyen los menús de Shopify: Contenido > Menús, Temas y el Límite de tres niveles

Dónde residen los menús en el panel de administración

En el panel de control de Shopify, las estructuras de navegación se gestionan en Contenido > Menús (según el Shopify Help Center). Desde aquí, los comerciantes crean menús, agregan enlaces y configuran rutas de acceso.

Dado que los menús existen como registros de plataforma y no como código incrustado en el tema, la jerarquía se conserva intacta al cambiar de tema. Las relaciones anidadas se crean simplemente arrastrando elementos bajo un enlace padre.

Cómo elige el tema qué menú mostrar

Aunque los datos se guardan en el admin, su tema activo determina cómo se renderizan en el storefront. Los temas se vinculan a los menús mediante un ajuste de tipo link_list (documentado en la Documentación de Desarrolladores de Shopify), que permite asignar menús a cabeceras, drawers o pies de página.

Al migrar de tema, los enlaces no se pierden. No obstante, debe abrir el personalizador de su nuevo tema y reasignar el menú en el selector link_list del encabezado. Banners promocionales o bloques creados en el editor antiguo no se migran automáticamente.

El límite de tres niveles de anidación

El pilar fundamental de la navegación en Shopify es su límite de anidación: un elemento de nivel superior puede contener hasta dos niveles desplegables secundarios, generando una profundidad máxima de tres niveles (según el Shopify Help Center y la Documentación de Desarrolladores de Shopify). Se establece un esquema de tres niveles: Categoría principal → Subcategoría → Elemento final.

Diseñe su jerarquía para que se mantenga dentro de estos tres niveles. Asimismo, el Shopify Help Center señala que la inmensa mayoría de los temas solo admiten dos niveles anidados.

Existe una regla de accesibilidad básica: cuando un enlace superior controla un submenú, actúa como un botón para desplegar u ocultar opciones, no como un enlace directo (según el Shopify Help Center). Coloque siempre un enlace explícito “Ver todo [Categoría]” dentro del panel desplegable.

Los cuatro patrones de navegación clave: Desplegable, Mega menú, Drawer y Tab Bar

Las tiendas Shopify recurren principalmente a cuatro patrones, asumiendo cada uno distintas ventajas e inconvenientes de espacio y visibilidad.

1. Menú desplegable simple

El desplegable tradicional abre una lista vertical al pulsar o pasar sobre un enlace. Es ideal para catálogos pequeños. No obstante, en catálogos extensos, los desplegables habituales suelen ocultar la mayoría de las opciones del usuario (NN/g).

2. Mega menú multicolumna

El mega menú despliega la navegación en un panel ancho con varias columnas. Investigaciones de Nielsen Norman Group confirman que muestran todo de un vistazo, permitiendo ver las opciones en lugar de recordarlas (NN/g). Agrupar los enlaces bajo títulos nítidos facilita recorrer un catálogo amplio en escritorio.

Conozca más en nuestras mejores prácticas de mega menú Shopify.

3. Panel lateral deslizable (drawer)

El panel lateral—activado con el icono hamburguesa—mantiene los enlaces ocultos hasta que se tocan. Aunque es el estándar en smartphones, Nielsen Norman Group alerta de que esconder la navegación detrás de un icono reduce drásticamente su descubrimiento (NN/g).

Para optimizarlo, revise nuestras prácticas recomendadas para drawer móvil.

4. Barra de pestañas inferior

La barra inferior fija destinos esenciales en la base de la pantalla, justo en el área cómoda del pulgar. No obstante, Nielsen Norman Group advierte de que incluir más de 5 opciones en una barra dificulta mantener un tamaño de pulsación adecuado (NN/g).

Revise nuestra guía para crear una barra de pestañas inferior para Shopify.

Arquitectura de navegación híbrida

Las tiendas suelen combinar patrones: un mega menú en escritorio con una barra de pestañas y un drawer en móviles para armonizar inmediatez visual y profundidad de catálogo.

Navegación de escritorio: Cuándo un mega menú supera al desplegable

En ordenadores, los comerciantes cuentan con un amplio espacio horizontal. Investigaciones de Nielsen Norman Group destacan que los mega menús muestran todo de un vistazo, facilitando que el usuario vea sin forzar su memoria (NN/g). Los desplegables convencionales suelen ocultar la mayoría de las opciones del usuario.

Calibrar los tiempos de hover para evitar parpadeos

Un problema muy común en mega menús de escritorio es una sensibilidad al cursor mal ajustada. Si el menú se abre en cuanto el cursor toca un elemento de la cabecera, puede desplegarse por accidente cuando el usuario mueve el ratón por ella.

Nielsen Norman Group ofrece pautas temporales claras: el cursor debe permanecer estático durante 0,5 segundos antes de desplegar paneles dependientes del ratón (NN/g). Una vez alcanzado ese reposo, el mega menú debe aparecer en menos de 0,1 segundos (NN/g). Así se evitan activaciones accidentales sin restar agilidad.

Agrupación estructurada dentro del panel

Presentar enlaces en un mega menú demanda una jerarquía visual clara. Organice los enlaces en bloques temáticos con encabezados concisos. Verifique que cada categoría aparezca solo en un bloque coherente. Las imágenes en miniatura ayudan a orientar, pero nunca deben sustituir a los textos descriptivos.

Nunca esconda la navegación principal tras un icono hamburguesa en escritorio si dispone de espacio. Nielsen Norman Group constató que los usuarios de ordenador recurrieron a los menús ocultos solo en un 27% de las ocasiones (NN/g). Más detalles en nuestras mejores prácticas de mega menú Shopify.

Ergonomía móvil: Alcance del pulgar, menús ocultos y barras de pestañas

Si la navegación en escritorio se centra en la arquitectura de información, la móvil responde a restricciones biomecánicas físicas. Al navegar con el smartphone, el alcance natural condiciona la fluidez de compra.

Figura 2: Ilustración conceptual (Concept illustration) — Ergonomía móvil: Alcance del pulgar, menús ocultos y barras de pestañas

Cómo sostienen realmente los teléfonos los usuarios

En un estudio empírico de ergonomía, Steven Hoober registró 1.333 observaciones de personas utilizando dispositivos móviles en entornos cotidianos (UXmatters). De ellas, 780 interactuaban activamente con la pantalla táctil para desplazarse, escribir o pulsar.

El análisis de las posturas de esos 780 usuarios activos sobre pantalla táctil reveló esta distribución:

• Uso con una sola mano: el 49% sostenía y operaba el smartphone íntegramente con una mano.
• Agarre con apoyo: el 36% sostenía el teléfono con una mano e interactuaba con los dedos de la otra.
• Uso a dos manos: el 15% sujetaba el dispositivo con ambas manos, tecleando habitualmente con los dos pulgares.

El estudio de Hoober documentó posturas físicas en público en 2013 sin calcular métricas de conversión comercial. Los móviles han cambiado desde 2013, así que lea estas cifras como una instantánea de hábitos de agarre, no como una medición de sus propios clientes.

La conclusión ergonómica: en la muestra de Hoober, cerca de la mitad de las personas que tocaban la pantalla lo hacían con una sola mano. Si los controles se sitúan solo en esquinas superiores, estos usuarios pueden tener que cambiar de postura o estirar el dedo. Profundice en nuestro estudio sobre ergonomía de la zona del pulgar.

El coste real de ocultar el menú de navegación

Ocultar la navegación móvil tras un botón hamburguesa acarrea un coste medible en usabilidad. Al evaluar la navegación oculta, Nielsen Norman Group cuantificó el porcentaje de uso según el diseño (NN/g):

NN/g observó que los usuarios en móviles recurrieron al menú oculto en el 57% de los casos y a la navegación combinada—con enlaces visibles junto al panel lateral—en el 86% (NN/g). NN/g no probó sitios con navegación solo visible en móviles, por lo que la comparación es entre navegación oculta y combinada. En esa prueba, mantener visibles los accesos clave fue de la mano de un uso claramente mayor de la navegación.

Cuándo conviene instalar una barra de pestañas inferior

Para combatir la falta de visibilidad en pantallas táctiles, muchas tiendas incorporan una barra inferior persistente. Nielsen Norman Group recomienda explícitamente mostrar 4 o menos enlaces principales como opciones visibles (NN/g).

Una barra inferior cumple este criterio situando los destinos clave al alcance cómodo del pulgar. No obstante, mantenga la mesura: NN/g advierte de que superar las 5 opciones dificulta sostener áreas de contacto idóneas (NN/g).

Nielsen Norman Group también destaca que los enlaces diminutos o demasiado próximos enfurecen a los usuarios móviles (NN/g). Saturar la barra genera toques erróneos. Restrinja la barra inferior a unos pocos accesos esenciales.

Consulte cómo implementar una barra de pestañas inferior para Shopify y explorar la navegación móvil más allá de la hamburguesa.

Accesibilidad y Rendimiento: Menús que los clientes realmente pueden usar

El estilo visual carece de valor si el menú es difícil de operar o enlentece la tienda. Los menús de Shopify de alto nivel deben acatar normas de accesibilidad y mantener un peso del DOM controlado.

Botones activadores frente a hipervínculos directos

Los controles interactivos deben indicar su comportamiento sin ambigüedad. Tal como expone el Shopify Help Center, un elemento principal con submenú actúa como un botón para desplegar o replegar opciones, no como un enlace directo a una colección.

Forzar un elemento a ser enlace de colección y conmutador a la vez pide a un único control que haga dos cosas, lo que confunde a quienes usan teclado, lector de pantalla o pantalla táctil. Trate un elemento superior con submenú solo como botón de apertura y coloque un enlace “Ver todo [Categoría]” en el interior.

Indicadores de posición y dimensiones de contacto

Nielsen Norman Group señala que omitir la ubicación actual es probablemente el fallo más habitual en menús web (NN/g). Las categorías activas deben resaltarse con negrita, contraste neto o un subrayado distintivo.

Las zonas táctiles demandan idéntico rigor. NN/g incide en que los enlaces pequeños o apretados son una enorme fuente de frustración (NN/g). Las áreas de toque móviles precisan holgura y separación.

Aplique estas pautas con nuestra guía de accesibilidad en navegación.

Conteo de nodos del DOM y carga de renderizado

Cada enlace, contenedor de columna, miniatura y lista suma elementos al Document Object Model (DOM). En sus auditorías de rendimiento, Google Chrome Lighthouse alerta cuando el body supera unos 800 nodos y marca error al rebasar aproximadamente 1.400 nodos (Google Chrome Lighthouse).

Si su tema genera contenedores separados para el menú de escritorio y el móvil, el mismo árbol de categorías puede aparecer dos veces en el código de la página. Revise su propio tema: cada enlace duplicado suma nodos al total mencionado arriba.

Interaction to Next Paint (INP) en dispositivos móviles

Dentro del marco Core Web Vitals de Google, Interaction to Next Paint (INP) mide la latencia de respuesta frente a las interacciones del usuario. Según Google Chrome Web.dev, un INP de 200 milisegundos o menos denota una respuesta ágil.

Google matiza que el INP no contempla el desplazamiento pasivo (Google Chrome Web.dev). Sin embargo, cuantifica el retardo de toques y clics—como abrir un drawer o expandir un acordeón. Scripts de JavaScript pesados bloquean el hilo principal e incrementan el INP por encima de 200 milisegundos.

Descubra técnicas de mejora en nuestro artículo sobre cómo afecta la navegación a la velocidad.

Elegir el patrón de menú adecuado para su tienda

Seleccionar el patrón de navegación es un dictamen estructural basado en el volumen del catálogo y los hábitos de sus clientes.

Matriz de perfiles de tienda

Marco de decisión para la navegación

Para seleccionar el formato apropiado, plantéese tres cuestiones estructurales:

1. Cantidad de accesos primarios: Si su tienda cuenta con 4 o menos enlaces de cabecera, muéstrelos directamente en lugar de ocultarlos (NN/g).
2. Ramificación de subcategorías: Si maneja múltiples subcategorías, un mega menú ayuda a visualizar todas de golpe sin exigir memorización previa (NN/g).
3. Porcentaje de tráfico móvil: Revise sus informes de Shopify Analytics. Una presencia móvil dominante obliga a priorizar el área del pulgar y la navegación combinada para no perder visitas.

Árbol de decisión de navegación para tiendas Shopify:
+-- ¿Accesos principales de 1er nivel <= 4?
|   +-- Sí: Mostrarlos como enlaces visibles (sugerencia NN/g)
|   +-- No: Agrupar en núcleos temáticos de categorías
|
+-- ¿El catálogo se divide en diversas subcategorías independientes?
|   +-- No: Usar desplegables básicos para eludir grandes espacios vacíos
|   +-- Sí: Configurar un mega menú multicolumna en escritorio
|
+-- Comprobación del tráfico móvil:
    +-- ¿Mayoría abrumadora desde smartphones?
        +-- Descartar menús únicamente ocultos bajo hamburguesa (57% de uso)
        +-- Preferir navegación combinada: enlaces clave visibles + drawer para el catálogo profundo (86% frente a 57% en la prueba de NN/g)

Compromisos: Cuándo no conviene emplear menús complejos

Los recursos avanzados como mega menús y barras inferiores agilizan la revisión de catálogos densos, pero no son válidos en todos los casos. Forzar esquemas complejos en contextos sencillos genera roces.

1. Tiendas pequeñas o monomarca

En tiendas con un surtido modesto, implantar un mega menú multicolumna es contraproducente. Esparcir pocos productos en paneles gigantescos genera áreas desiertas y pasos superfluos. Para marcas con colecciones concisas, un encabezado horizontal limpio proporciona el paso más directo al producto.

2. Superposición de elementos flotantes en móviles

Aunque las barras de pestañas mejoran la ergonomía, reclaman una franja vertical en pantalla. Si su tienda ya recurre a chats en vivo, avisos de cookies o barras de anuncios pegajosas, agregar otra barra puede provocar conflictos visuales. Si una burbuja tapa el botón de compra o un icono, el cliente no puede alcanzarlo. Revise sus capas antes de publicar barras fijas.

3. Carga de renderizado y material gráfico excesivo

Saturar los mega menús con fotografías y banners promocionales dispara el peso del archivo HTML. Precargar imágenes innecesarias engrosa el DOM hacia el umbral de advertencia de 800 nodos de Lighthouse (Google Chrome Lighthouse). Asimismo, los paneles que solo se abren al pasar el ratón son difíciles de usar en pantallas táctiles.

4. Cuando el tema oficial de Shopify resulta suficiente

Si su catálogo se acomoda bien en la arquitectura de 3 niveles y el tema actual ofrece un drawer móvil rápido, quizá no necesite una aplicación de terceros. Revise primero lo que su tema ya ofrece. Evalúe sus límites leyendo sobre las restricciones de menús en temas Shopify.

Dónde encaja Navi+ en esta estrategia

Para aquellas marcas cuyo inventario o usabilidad móvil supera lo que ofrece el tema de fábrica, Navi+ suministra un conjunto modular de navegación desarrollado expresamente para Shopify.

Navegación modular concebida para Shopify

Navi+ permite incorporar elementos fundamentales—incluyendo barra de pestañas inferior, panel deslizable (drawer), mega menús para escritorio y móvil, cuadrículas de iconos y botones flotantes—sin programar. La barra inferior sitúa las secciones clave bajo el pulgar, con ocultamiento automático opcional al desplazarse.

Código del tema intacto y soporte nativo para 3 niveles

Navi+ se instala íntegramente mediante los App Embeds nativos de Shopify sin modificar plantillas Liquid. Los archivos de su tema permanecen intactos. Las configuraciones respetan el límite jerárquico de tres niveles. Asimismo, Navi+ Mobile Menu permite vincular un menú de Shopify ya existente y actualizar su copia con el botón “Sync now” en un clic.

Reutilizable al cambiar de tema

Como sus menús se guardan en Navi+, cambiar el tema de Shopify no borra su estructura de navegación. Debe activar el app embed de Navi+ en el tema nuevo y comprobar su ubicación. Navi+ se ha probado en 331 temas, listados en el directorio de compatibilidad de temas de Navi+.

Si el menú de su tema actual ya se adapta bien a su catálogo, manténgalo. Si desea incorporar una barra de pestañas inferior o un mega menú sin tocar el código del tema, puede probar Navi+ en su tienda y validarlo con la lista de verificación que figura abajo.

Lista de verificación: Audite el menú de su tienda Shopify

Recorra este procedimiento para evaluar la navegación de su tienda en dispositivos físicos y corroborar usabilidad, ergonomía y velocidad.

• Revisar la profundidad en el panel admin: En Contenido > Menús, cerciórese de que los árboles no sobrepasen los tres niveles de anidación. Compruebe que las categorías con submenú incorporen un enlace explícito “Ver todo [Categoría]”.
• Hacer la prueba de manejo con una mano: En un smartphone real, intente acceder a sus tres categorías principales únicamente con el pulgar sin variar el agarre. Si cuesta llegar, incorpore accesos visibles o una barra inferior.
• Medir los nodos DOM de la página: En la consola de Chrome, introduzca document.querySelectorAll('body *').length y verifique si se aproxima a la alerta de 800 nodos o al umbral crítico de 1.400 nodos de Lighthouse.
• Comprobar avisos de posición y tamaños de pulsación: Cerciórese de que las categorías activas destaquen claramente (negrita o subrayado) y que los botones guarden distancia suficiente para prevenir clics indeseados.
• Contrastar datos de navegación frente al buscador: En los reportes de Shopify Analytics, analice las ventas de quienes navegan por el menú frente a quienes usan el buscador interno para sacar a la luz líneas desaprovechadas.

FAQ

¿Cuántos niveles de menú admite Shopify de forma nativa?

Shopify admite nativamente hasta tres niveles de navegación: una opción principal con un máximo de dos niveles desplegables anidados (Shopify Help Center). La gran mayoría de temas se amolda a este límite.

¿Dónde se editan los menús de navegación en el panel de Shopify?

Usted controla toda la navegación en el panel de Shopify bajo Contenido > Menús (Shopify Help Center), donde agrega enlaces y ordena niveles. Los ajustes del tema eligen después qué menú se muestra.

¿Se pierden mis menús si decido cambiar de tema en Shopify?

No. Las ramas del menú se conservan como datos de la tienda en Contenido > Menús y no en los archivos del tema. Al instalar otro tema, simplemente elija su menú en los ajustes de encabezado correspondientes (Documentación de Desarrolladores de Shopify).

¿Cuándo conviene emplear un mega menú en lugar de un desplegable?

Incorpore un mega menú cuando maneje diversas subcategorías que el usuario necesite asimilar en una sola mirada (NN/g). En tiendas con pocos productos, un desplegable básico previene espacios desiertos.

¿Por qué resulta contraproducente ocultar toda la navegación tras una hamburguesa en móviles?

Las investigaciones de Nielsen Norman Group demuestran que los clientes en smartphones solo interactúan con menús ocultos en un 57% de las ocasiones, porcentaje que sube al 86% al emplear sistemas mixtos con opciones visibles (NN/g).

¿Cuál es la cantidad máxima aconsejada de opciones en una barra inferior para móvil?

Mantenga la barra de pestañas móvil en unos pocos accesos esenciales. NN/g señala que con más de 5 opciones es difícil encajarlas en una barra de pestañas o de navegación y conservar un tamaño táctil óptimo (NN/g).

Sources

• Shopify Help Center: Menus and links — Documentación oficial sobre la gestión de menús en el admin de Shopify.
• Shopify Help Center: Drop-down menus — Pautas de plataforma sobre la restricción de tres niveles y el uso de botones conmutadores.
• Shopify Dev Documentation: Navigation Architecture — Referencia técnica para la configuración link_list y la representación de árboles.
• Nielsen Norman Group: Mega Menus Work Well (Angie Li & Jakob Nielsen, 2017) — Estudios de asimilación visual completa y tiempo sugerido de reposo del ratón de 0,5 segundos.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Kara Pernice & Raluca Budiu, 2016) — Evaluación empírica de uso comparando opciones visibles, ocultas e híbridas.
• Nielsen Norman Group: Mobile Navigation Patterns (Raluca Budiu, 2015) — Examen de barras y drawers móviles, desaconsejando exceder 5 accesos.
• Nielsen Norman Group: Menu Design Best Practices (Page Laubheimer, 2024) — Criterios para indicar la ubicación del comprador y preservar holguras táctiles.
• UXmatters: How Do Users Really Hold Mobile Devices? (Steven Hoober, 2013) — Registro empírico de 1.333 observaciones de personas utilizando dispositivos móviles detallando usos a una mano, con apoyo y a dos manos.
• Google Chrome Lighthouse: DOM Size Thresholds — Directrices de eficiencia con umbral preventivo en 800 nodos y nivel de fallo en 1.400 nodos.
• Google Chrome Web.dev: Interaction to Next Paint (INP) — Métricas Core Web Vitals que fijan en 200 milisegundos la barrera para una respuesta satisfactoria.
• Directorio de compatibilidad de temas de Navi+ — Página de referencia con los 331 temas de Shopify en los que se ha probado Navi+.