Cómo agregar un submenú a tu menú de navegación de Shopify (Desplegable, niveles y móvil)

Agregar un submenú en Shopify solo requiere arrastrar un elemento en Content > Menús — pero para que los compradores naveguen sin tropiezos, el elemento principal, el menú Header del tema y el panel móvil deben estar bien configurados.

Al lanzar una tienda online, una barra horizontal con cuatro o cinco enlaces directos suele ser suficiente. Sin embargo, conforme tu catálogo se expande, mostrar cada colección en una sola fila satura la cabecera. En diseño web, los términos submenú, menú desplegable y elementos anidados hacen referencia al mismo concepto: enlaces secundarios agrupados de forma ordenada bajo una categoría principal. Puedes configurarlos directamente en tu panel de Shopify sin tocar código.

Respuesta rápida: Cómo agregar un submenú en Shopify

Para agregar un submenú en Shopify, dirígete a Content > Menús, abre tu menú principal, agrega el elemento deseado bajo el elemento principal, arrástralo justo debajo y ligeramente a la derecha, y haz clic en Guardar menú. Un elemento de nivel superior puede albergar hasta dos niveles de menús desplegables anidados.

Sigue estos cinco pasos:

1. En el panel de control de Shopify, ve a Content > Menus.
2. Haz clic en el nombre del menú que deseas editar (normalmente Main menu).
3. Haz clic en Agregar elemento de menú, escribe el Nombre, selecciona el enlace y haz clic en Agregar.
4. Mantén presionado el icono de arrastre (⠿) junto al elemento y deslízalo debajo y ligeramente a la derecha del elemento principal.
5. Haz clic en Guardar menú.

Un elemento de nivel superior puede alojar hasta dos niveles de menús desplegables subordinados.

Qué es un submenú y cuándo lo necesita tu tienda

Un submenú es una lista de enlaces secundarios agrupados bajo un encabezado principal. En el ordenador, al pasar el ratón o hacer clic se despliega la lista. En móviles, estos enlaces se expanden en el menú lateral.

Las navegaciones anidadas son una solución popular para organizar colecciones, productos y páginas con eficacia. En lugar de saturar la cabecera, la estructura jerárquica traza un camino intuitivo. Los compradores pueden ojear departamentos amplios como «Ropa» antes de profundizar en opciones concretas como «Chaquetas».

Conviene añadir un submenú cuando tu tienda supera una estructura básica. Shopify aconseja incluir siete o menos elementos de menú de nivel superior para evitar la sobrecarga visual. Agrupar las colecciones bajo elementos principales mantiene una cabecera larga más fácil de recorrer.

No necesitas un submenú si solo vendes unos pocos productos o tienes dos o tres colecciones. Forzar menús desplegables en catálogos pequeños genera clics innecesarios.

Una buena organización también facilita el rastreo de los motores de búsqueda. Descubre cómo Google rastrea tu menú para ver cómo los enlaces del menú ayudan a los buscadores a encontrar tus páginas de colección.

Cómo agregar un submenú en Shopify paso a paso

Shopify dispone de un editor de menús visual mediante arrastrar y soltar. Puedes configurar tu jerarquía desde el ordenador o en la app móvil.

En el ordenador

1. Entra en Content > Menus en tu panel de administración. (Nota: las guías antiguas llaman a este apartado Tienda online > Navegación; el Centro de ayuda actual de Shopify usa Content > Menus.)
2. Haz clic en el menú que quieres modificar, normalmente Main menu.
3. Si todavía no tienes el elemento principal, haz clic en Agregar elemento de menú, escribe un título (por ejemplo, «Tienda»), asígnale un enlace y haz clic en Agregar.
4. Vuelve a hacer clic en Agregar elemento de menú para crear el elemento secundario. Escribe su nombre, selecciona la colección o página en el campo de enlace y haz clic en Agregar.
5. Localiza el icono de seis puntos (⠿) a la izquierda. Haz clic y mantén presionado el icono de arrastre (⠿) junto al elemento de menú, y luego arrástralo a otra posición. Sitúalo debajo del elemento principal y desplaza el cursor ligeramente hacia la derecha hasta que se sangre la fila. Suelta el ratón.
6. Repite el proceso con las demás subcategorías y reorganiza el orden a tu gusto.
7. Haz clic en Guardar menú. Guarda los cambios con frecuencia para no alcanzar el límite de cambios de Shopify.

En la aplicación móvil de Shopify

También puedes administrar tus menús desde el smartphone:

1. Abre la app de Shopify, toca el icono de Menú y abre Menus en la sección Contents.
2. Toca el nombre de tu menú principal y luego Agregar elemento de menú.
3. Escribe el nombre, elige el enlace y pulsa en Agregar.
4. Mantén presionado el icono de arrastre (⠿), deslízalo bajo el elemento principal y muévelo a la derecha hasta que quede sangrado.
5. Pulsa en Guardar.

Shopify recomienda probar los menús en dispositivos móviles para confirmar que los menús desplegables se expanden como se espera y que los enlaces se pulsan con comodidad.

Crear un elemento principal que solo abra el menú desplegable

Una duda habitual entre comerciantes es: «¿Cómo hago que un elemento de menú no sea cliqueable en Shopify?»

Quizá desees que una etiqueta como «Comprar por categoría» funcione únicamente como botón desplegable. Si un elemento principal apunta a una colección vacía, hacer clic en él desviará al comprador de la página que estaba consultando.

Para crear un elemento principal que no dirija a ninguna página:

1. En Content > Menus, haz clic en Editar junto al elemento principal (o créalo con Agregar elemento de menú).
2. Introduce el título en el campo Nombre. Emplea etiquetas descriptivas, como «Comprar por categoría», para elementos de nivel superior con enlaces #, de modo que los clientes comprendan qué encontrarán.
3. Si no quieres que el encabezado enlace a ningún sitio, escribe # en el campo Buscar o pegar un enlace.
4. Haz clic en Aplicar cambios y luego en Guardar menú.

La mayoría de los temas configuran los encabezados desplegables como botones en lugar de enlaces convencionales. Con un enlace #, el elemento principal no tiene página que cargar, así que al tocarlo puede abrirse el desplegable en su lugar.

Si de todos modos deseas dar acceso a la colección principal, incluye un enlace llamado «Ver todo [Categoría]» como primer subelemento dentro del desplegable.

Recuerda una precaución fundamental: al eliminar un elemento de menú que tiene elementos secundarios anidados, también se eliminarán dichos elementos. Si alguna vez necesitas borrar un elemento principal, extrae primero los elementos hijos al nivel superior.

Figura 1: Ilustración conceptual — Configuración de un elemento principal con enlace almohadilla (#) como botón frente a un enlace de página directo.

¿Cuántos niveles puede tener un submenú en Shopify?

Quienes administran inventarios extensos suelen preguntarse: «¿Cuántos niveles de menú admite Shopify?»

En el gestor de menús de Shopify, el elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados por debajo. Sumando la barra inicial, dispones de un total de tres niveles:

• Nivel 1 (Principal): El enlace visible en la barra horizontal de la cabecera (por ejemplo, «Hombres»).
• Nivel 2 (Primer submenú): La lista desplegable al interactuar con el nivel 1 (por ejemplo, «Calzado»).
• Nivel 3 (Segundo submenú / desplegable lateral): Una subcategoría dentro del nivel 2 (por ejemplo, «Zapatillas»).

Aunque Shopify permite estructurar tres niveles en el panel, que se muestren en tu tienda depende de tu plantilla. Asegúrate de actualizar tu tema para que muestre los tres niveles de menú en tu tienda online.

La ubicación también influye: prácticamente todos los temas muestran los elementos anidados como menús desplegables en el menú principal, pero solo algunos lo hacen en otros lugares como el pie de página o las barras laterales.

Para comprobarlo en tu tienda, anida un enlace de prueba de nivel 3 bajo el nivel 2, guarda y revisa la vista previa en ordenador y móvil. Si el tercer nivel no aparece, es posible que tu tema no lo admita.

Procura ceñirte a dos niveles siempre que tu catálogo lo permita. Los submenús de nivel 3 son más difíciles de usar, sobre todo con el ratón. Si requieres más profundidad, consulta nuestra guía sobre planificación de menús multinivel en Shopify para estructurar tu árbol de categorías con eficacia.

Cómo funcionan los submenús en dispositivos móviles

Los teléfonos no tienen ratón, así que tu submenú debe funcionar al tocar.

Qué ven los compradores en el panel móvil

En smartphones, la barra de menú horizontal se comprime tras el icono de hamburguesa. Al tocarlo se despliega el menú lateral:

• Los elementos con submenú suelen presentar un indicador visual, como un signo más (+) o una flecha.
• Al pulsar el encabezado, los elementos anidados suelen expandirse en una lista o abrir un panel; el comportamiento exacto depende de tu tema.
• Cuando un elemento principal usa un enlace #, la mayoría de los temas abren la lista en lugar de cargar una página.

Shopify aconseja probar los menús en dispositivos móviles para comprobar que los menús desplegables se expanden según lo previsto y que las áreas táctiles son accesibles.

Añadir un enlace «Ver todo»

En el ordenador, el usuario puede pasar el ratón para ver los subelementos y a la vez hacer clic en el título para abrir la colección global. En pantallas táctiles, el estado de desplazamiento no existe: un toque abre el menú o carga una URL, pero no ambas cosas a la vez.

Ofrecer una opción «Ver todo» en la navegación principal móvil es una solución económica para atender esta necesidad del usuario móvil, según certifica el Baymard Institute.

Sin embargo, las auditorías de Baymard revelan que solo el 24 % de los sitios lo implementan correctamente.

Para aplicarlo en tu tienda:

1. En cada categoría principal, añade un enlace secundario que se titule «Ver todo [Categoría]» enlazando a la colección global.
2. Colócalo en la primera posición de la lista anidada.
3. Mantén las listas breves para que no sea necesario desplazarse en exceso por la pantalla.

Para conocer más sobre ergonomía y menús móviles, lee nuestra guía sobre buenas prácticas para menús laterales móviles.

¿No aparece el submenú? Solución a problemas frecuentes

Si tu submenú no se muestra tras guardarlo, el fallo suele deberse a uno de estos cuatro desajustes comunes:

El tema utiliza otro menú

El tropiezo más común es editar el menú Main menu por defecto mientras la cabecera de tu tema apunta a otra lista. Cerciórate de que el menú seleccionado como menú principal superior coincida con el que acabas de modificar. Puedes cambiar el menú predeterminado de la mayoría de los temas modificando los ajustes en la sección Header. Ve a Tienda online > Temas > Personalizar > Header, comprueba el menú asignado, selecciona el correcto y guarda.

El elemento no está sangrado

Si los elementos secundarios quedan alineados junto al margen izquierdo, Shopify los interpreta como elementos independientes de nivel 1. Entra en Content > Menus, arrastra cada elemento bajo su correspondiente principal y desplaza el cursor a la derecha hasta que se indente. Guarda después.

El tema oculta el tercer nivel

Si los enlaces de nivel 3 no aparecen, puede que tu tema carezca de compatibilidad con submenús a tres niveles. Asegúrate de actualizar tu tema para que muestre los tres niveles de menú en tu tienda online. Recuerda también que ciertos temas solo admiten niveles anidados en la cabecera y no en paneles laterales.

Conflictos con código personalizado o aplicaciones

Si el desplegable titila o no responde, algún script de terceros o código modificado en theme.liquid podría estar bloqueando los eventos de la cabecera. Duplica tu tema y comprueba si el problema se reproduce en la versión original.

Accesibilidad con teclado y lectores de pantalla

La navegación debe resultar igualmente cómoda para quienes usan teclados o lectores de pantalla.

Las pautas de la W3C Web Accessibility Initiative (WAI) señalan que los elementos de navegación con submenú deben indicarse visualmente y mediante marcado. Un icono de flecha advierte visualmente a los usuarios de que existen más opciones, mientras que los atributos ARIA notifican el estado a los lectores de pantalla.

Asimismo, los estándares del W3C dictan que los submenús no deben desplegarse al utilizar la tecla Tab para recorrer el menú. El motivo: de lo contrario, quienes usan el teclado tendrían que recorrer todos los elementos del submenú para llegar al siguiente elemento de nivel superior.

Consulta nuestra guía sobre menús de navegación accesibles para aplicar las pautas completas.

Figura 2: Ilustración conceptual — Comprobación del menú asignado en la cabecera del tema y verificación de la sangría en los elementos secundarios.

Compromisos: Cuándo no conviene añadir otro submenú

Los submenús aportan orden, pero encadenar demasiados niveles no siempre es la mejor decisión para tus clientes. Cada nivel adicional introduce fricción de navegación.

Si las listas desplegables crecen en exceso, la usabilidad se resiente. Como advierte el Nielsen Norman Group: «Los menús desplegables muy largos que requieren desplazarse impiden que los usuarios vean todas sus opciones de un vistazo». Cuando los compradores deben hacer scroll dentro de un desplegable, los enlaces inferiores suelen pasar inadvertidos.

Antes de crear otro submenú, sopesa estas alternativas:

1. Fusionar colecciones pequeñas: Si tienes varias colecciones con solo dos o tres productos cada una, unifícalas en una sola página de colección.
2. Definir categorías más descriptivas: Corregir nombres genéricos ayuda a que los clientes encuentren sus productos sin necesidad de rebuscar en submenús.
3. Aprovechar los filtros de colección: Facilita que los compradores filtren por talla, color o precio en la propia página de colección en vez de sobrecargar el menú con cada variante.
4. Dar el salto a un mega menú: Si tu catálogo engloba docenas de subcategorías, un mega menú multicolumna distribuye los enlaces en columnas claras con títulos temáticos, lo que permite visualizar toda la oferta sin desplazarse. Requiere soporte en tu tema o una aplicación de menús.

Para evaluar los límites de las plantillas estándar, revisa nuestro análisis sobre limitaciones de los menús en temas de Shopify.

Dónde encaja Navi+

Los menús nativos de Shopify solventan bien las necesidades básicas. Sin embargo, a medida que los catálogos crecen, las listas de una sola columna muestran sus limitaciones. Las listas largas de una sola columna pueden resultar difíciles de recorrer, y el menú móvil predeterminado de un tema puede ser más simple de lo que tu catálogo necesita.

Cuando tu tienda supera las opciones estándar, Navi+ te ayuda a perfeccionar la navegación:

• Desktop Mega Menus: Crea mega menús con productos, colecciones, imágenes, iconos y estructuras flexibles. Organiza tus subcategorías en estructuras flexibles para que tus clientes vean las opciones sin desplazarse.
• Mobile Menus: Diseña menús móviles, menús laterales y menús de hamburguesa para navegar con más facilidad por la tienda desde el móvil.

Los menús de Navi+ se crean en la app de Navi+ con un editor de arrastrar y soltar, sin programar. Son independientes del menú de tu panel de Shopify, que no se sustituye automáticamente.

Si tu submenú se ha convertido en una lista interminable o buscas incorporar imágenes y columnas en el ordenador y un menú más ordenado en el móvil, puedes probar Navi+ Tab Bar & Mega Menu junto a tu tema mientras tu menú de Shopify sigue en su sitio.

Lista de verificación previa a la publicación de tu submenú

Antes de poner en marcha tu nueva estructura de navegación, verifica estos 8 puntos esenciales:

• Menú de cabecera revisado: Confirmado en Tienda online > Temas > Personalizar > Header que el menú activo coincida con el modificado en Content > Menus.
• Sangría asegurada: Comprobado que cada elemento secundario esté visiblemente anidado bajo su elemento principal.
• Encabezado sin enlace descriptivo: Si has usado # en el elemento principal, comprobado que el título sea claro como «Comprar por categoría».
• Enlace «Ver todo» incluido: Añadido un enlace «Ver todo [Categoría]» al inicio de cada subgrupo para usuarios móviles.
• Probado en smartphones reales: Verificado que el submenú se abre y que los enlaces son fáciles de tocar en un móvil real.
• Máximo de siete elementos principales: Limitada la barra principal a siete enlaces o menos para evitar la saturación.
• Indicador visual visible: Comprobado que el elemento principal muestre una flecha o icono que anticipe el desplegable.
• Cambios guardados: Pulsado Guardar menú para confirmar que no queden modificaciones pendientes.

Preguntas frecuentes (FAQ)

¿Cómo agrego un submenú a un menú de navegación en Shopify?

Accede a Content > Menus en tu panel de Shopify, abre tu menú principal, pulsa en Agregar elemento de menú para crear un enlace secundario y arrástralo mediante el icono (⠿) debajo y ligeramente a la derecha del principal. Haz clic en Guardar menú.

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

Un elemento de nivel superior puede contener hasta dos niveles de menús desplegables subordinados, lo que permite un máximo de tres niveles. Tu tema debe estar actualizado para poder mostrar estos tres niveles en la tienda.

¿Cómo hago para que un elemento principal de menú no sea cliqueable?

Escribe # en el campo «Buscar o pegar un enlace» del elemento principal y nómbralo con un término representativo como «Comprar por categoría». La mayoría de los temas lo tratarán como un botón de despliegue en lugar de como un enlace directo.

¿Por qué no aparece mi submenú en la tienda online?

La causa más frecuente es que la sección Header del tema esté vinculada a un menú distinto del que acabas de modificar. También puede ocurrir si el elemento no quedó bien sangrado o si tu plantilla no admite ese nivel de anidación.

¿Funcionan los submenús en teléfonos móviles?

Sí. En el móvil, la mayoría de los temas muestran el menú tras un icono de hamburguesa y abren los elementos secundarios dentro. Prueba siempre el funcionamiento en un móvil real y considera agregar un enlace «Ver todo» en cada nivel para facilitar el acceso a la colección completa.

Fuentes

• Shopify Help Center: Drop-down menus — Instrucciones oficiales para crear menús desplegables y comprobaciones móviles.
• Shopify Help Center: Editing menus — Directrices sobre el uso del icono de arrastre, límites de cambios y eliminación de elementos principales.
• Shopify Partners Blog: Building Nested Navigations with Shopify Link List — Perspectiva general sobre listas de enlaces y navegación anidada para organizar catálogos.
• Shopify Community: Nesting menu not showing — Solución compartida por la comunidad para verificar el menú asignado en la cabecera.
• W3C Web Accessibility Initiative (WAI): Flyout Menus Tutorial — Normas de accesibilidad para indicadores visuales y comportamiento con la tecla Tab.
• Baymard Institute: Have a “View All” Option in the Main Navigation at Each Level of the Mobile Product Catalog (Only 24% Get It Right) (2022) — Datos de investigación que demuestran que solo el 24 % de los sitios gestiona bien la opción «Ver todo» en móviles.
• Nielsen Norman Group: Dropdowns: Design Guidelines — Hallazgos sobre los problemas de usabilidad en menús desplegables largos que precisan scroll.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Ficha de la aplicación para mega menús y menús móviles.
• YouTube (Shopify Academy): How to create drop-down menus Shopify Help Center — Vídeo tutorial oficial para configurar menús desplegables.
• YouTube (Learn With Shopify): How to reorganize your Shopify Menu like a pro — Guía en vídeo para reestructurar menús y jerarquías visuales.