Cómo configurar enlaces de menú en tu tienda Shopify (Paso a paso, móvil incluido)

Configurar enlaces de menú en Shopify solo requiere unos pocos clics en Content > Menus, pero el menú solo está realmente “terminado” cuando el tema muestra el menú correcto y funciona a la perfección en un teléfono móvil — esta guía cubre ambos aspectos.

Cuando abres una nueva tienda Shopify, conectar tus productos, colecciones y páginas informativas con la barra de navegación es una de tus tareas principales. Una estructura de navegación clara ayuda a los compradores a orientarse en tu tienda. En las tiendas Shopify actuales, la gestión de enlaces se realiza de forma centralizada en el panel de administración, mientras que el tema activo determina cómo se presentan dichos elementos en pantallas de escritorio y teléfonos móviles.

Respuesta rápida: cómo configurar enlaces de menú en Shopify

Para configurar enlaces de menú en Shopify, ve a Content > Menus en el administrador de Shopify, abre el menú que deseas (generalmente el menú principal), haz clic en Add menu item, asigna un nombre, elige un enlace y luego haz clic en Save menu. Arrastra elementos debajo de otro elemento para crear un menú desplegable.

Sigue estos seis pasos para añadir cualquier enlace a tu navegación:

1. En tu panel de administración de Shopify, ve a Content > Menus.
2. Haz clic en el título del menú que deseas editar (habitualmente Main menu).
3. Haz clic en Add menu item.
4. En el campo Name, introduce el texto visible para los compradores, luego busca o pega el destino en Link.
5. Haz clic en Add.
6. Haz clic en Save menu para publicar los cambios.

Arrastra un elemento debajo de otro elemento para crear un menú desplegable siempre que necesites organizar subcategorías dentro de una sección principal.

Qué son los menús y enlaces en Shopify (encabezado, pie de página, tema)

Comprender el funcionamiento de la navegación en Shopify exige diferenciar la lista de enlaces en el administrador de la visualización que proporciona el tema. Un menú es una lista organizada de enlaces creada en el panel de control. Un enlace es un elemento individual en el que se puede hacer clic para dirigir a los clientes a una colección, producto, página de contenido o sitio web externo.

Toda tienda Shopify cuenta inicialmente con dos menús predeterminados que se muestran en todas las páginas: el menú principal (main menu) y el menú del pie de página (footer menu). El menú principal suele situarse a lo largo del encabezado en ordenadores o mostrarse como una barra lateral. El menú del pie de página se ubica al final de la página, donde los compradores buscan políticas de devolución, formas de contacto y preguntas frecuentes.

El tema es el elemento que determina dónde y de qué manera aparecen estos menús. Cada tema tiene un diseño diferente, por lo que tus menús pueden mostrarse de manera distinta en diferentes temas. Por ejemplo, un tema puede extender los enlaces horizontalmente, mientras que otro los agrupa dentro de un cajón desplegable lateral.

Dado que el tema controla la presentación, debes comprobar la configuración del tema en las secciones de encabezado y pie de página para confirmar que el menú seleccionado coincide con el que estás editando. Si modificas un menú en el administrador pero no observas cambios en tu tienda, casi siempre se debe a que el tema tiene asignada otra lista. Para conocer a fondo las estructuras de navegación web, consulta nuestra guía completa de menús de Shopify.

Cómo añadir un enlace de menú paso a paso en Content > Menus

Shopify concentra toda la gestión de enlaces de navegación en una única pantalla. Ten en cuenta que tutoriales y guías más antiguas se refieren a esta sección como “Tienda online > Navegación”, pero en las tiendas Shopify actuales estas opciones se encuentran en Content > Menus.

Crear un nuevo menú

Aunque tu tienda comienza con listas predeterminadas para encabezado y pie de página, es posible que necesites un menú independiente para una columna secundaria de enlaces en el pie de página o una lista lateral.

Para iniciar una nueva lista, entra en Content > Menus y haz clic en la opción para crear un menú. Asigna un título descriptivo como “Pie de página atención al cliente” o “Ayuda rápida”. Una vez creado, podrás incorporar enlaces y vincular este menú dentro del editor de temas.

Añadir un elemento de menú (Add menu item)

Incorporar un enlace a un menú existente toma menos de un minuto:

1. Ve a Content > Menus en tu administrador de Shopify.
2. Haz clic en el nombre del menú que deseas editar (por ejemplo, Main menu).
3. Desplázate hacia abajo y pulsa en Add menu item.
4. En el campo Name, escribe el texto que verán los clientes. Este nombre se muestra en el menú y puede incluir caracteres especiales o emojis para destacar promociones o nuevas colecciones.
5. En el campo Link, haz clic para seleccionar una colección, producto, página o artículo de blog, o pega una URL externa.
6. Haz clic en Add para incorporar el elemento a tu lista.

Guardar menú y reordenar elementos (Save menu)

Tras añadir los enlaces deseados, revisa su orden de visualización:

1. Localiza el icono de controlador (⠿) situado junto al elemento de menú.
2. Mantén pulsado el icono de controlador (⠿) al lado del elemento de menú y arrastra el elemento a otra posición hacia arriba o hacia abajo.
3. Suelta el botón cuando el elemento se encuentre en la posición deseada.
4. Haz clic en Save menu.

Asegúrate siempre de hacer clic en Save menu antes de salir para que todos tus cambios queden registrados.

Elegir el tipo de enlace correcto: colección, producto, página, blog, URL externa

El sistema de navegación de Shopify ofrece gran flexibilidad. Puedes añadir menús a tu tienda online para mostrar y organizar enlaces a productos, colecciones, páginas web, artículos de blog y mucho más. Elegir el destino adecuado ayuda a los compradores a llegar a su objetivo con menos clics.

Crea siempre la colección, página o entrada de blog en Shopify antes de intentar enlazarla en tu menú. Si el recurso no existe previamente, tendrás que salir del editor de navegación, crearlo y volver a empezar.

Si quieres un título de nivel superior que solo abra una lista desplegable sin llevar a ninguna página, usa, como sugiere la guía de Shopify sobre menús desplegables, una etiqueta descriptiva como “Comprar por categoría” para los elementos de nivel superior con enlaces #. Prueba el elemento en tu tema para confirmar que abre el desplegable sin cargar una página.

Crear un menú desplegable anidando elementos

A medida que crece tu catálogo, colocar cada colección en la barra principal recarga el encabezado. Puedes crear un menú desplegable anidando elementos secundarios directamente debajo de una categoría principal.

Ilustración conceptual (Concept illustration): una lista de menú plana comparada con un menú desplegable anidado.

Para anidar un elemento, añade tanto el elemento superior como el secundario al menú. Mantén presionado el icono de controlador (⠿) junto al elemento secundario, colócalo justo debajo de la fila superior y arrástralo ligeramente hacia la derecha (Drag to nest) hasta que la fila quede indentada. Suelta el controlador. El elemento indentado se convierte en un Nested item agrupado bajo tu Top-level item.

En el panel de administración puedes comparar una Flat menu list donde todas las líneas quedan alineadas con el margen izquierdo frente a un Nested drop-down menu donde los enlaces secundarios quedan sangrados bajo su encabezado.

¿Hasta qué profundidad puedes anidar?

Shopify establece un límite estructural claro: el elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados. Esto proporciona un total de tres niveles:

• Elemento de nivel superior (Top-level item, ej.: “Ropa”)
  • Primer elemento anidado (Nested item nivel 1, ej.: “Mujer”)
    • Segundo elemento anidado (Nested item nivel 2, ej.: “Vestidos”)

Aunque el administrador de Shopify admite dos niveles anidados, su visualización en la tienda depende del diseño de tu tema. Cada tema tiene un diseño diferente, por lo que los menús pueden mostrarse de manera distinta según el tema, y algunos temas pueden no mostrar todos los niveles. Prueba tu menú en tu propio tema. Para explorar jerarquías amplias, consulta nuestro artículo sobre cómo funcionan los menús multinivel.

Menús desplegables en el pie de página

Muchos propietarios de tiendas se preguntan si los menús desplegables funcionan en el pie de página. La documentación de Shopify señala que los menús de pie de página solo pueden mostrar elementos de nivel superior en configuraciones estándar.

La propia página de ayuda de Shopify sobre menús desplegables no es del todo coherente respecto al pie de página, así que no cuentes con desplegables en el footer: planifica solo con enlaces de nivel superior, comprueba la configuración de tu tema y prueba tu tienda para ver cómo gestiona la navegación del pie de página.

El siguiente vídeo oficial de Shopify muestra la técnica de arrastrar controladores para construir menús desplegables anidados:

Ordenar y nombrar elementos del menú para facilitar la búsqueda

Organizar la navegación consiste en ayudar a los compradores a encontrar lo que buscan. Nombres claros y un orden lógico hacen que el menú sea más fácil de recorrer.

Shopify aconseja añadir siete o menos elementos de menú de nivel superior para evitar la sobrecarga visual. Un nivel superior más corto también resulta más fácil de recorrer para los compradores.

En cuanto a los nombres de las etiquetas, sigue principios consolidados de experiencia de usuario. Las pautas del Nielsen Norman Group advierten que los menús no son el lugar para ponerse creativo con palabras inventadas, jerga interna o categorizaciones abstractas de alto nivel. Utiliza términos familiares como “Tienda”, “Hombres”, “Mujeres”, “Ofertas” o “Contacto” en vez de fórmulas confusas como “El Universo” o “Curaduría”. Si los compradores no adivinan qué contiene un enlace, es menos probable que hagan clic.

Coloca tus colecciones más demandadas o estratégicas al principio del menú. Mantén los textos breves para que encajen sin cortes en las pantallas estrechas de los teléfonos móviles.

Revisar el menú en dispositivos móviles y solucionar problemas comunes

Evaluar la navegación únicamente en ordenadores es insuficiente. Shopify recomienda verificar que el menú se muestre correctamente tanto en dispositivos de escritorio como móviles antes de publicar tu tienda.

Abre tu tienda en un smartphone real. Revisa el menú en el móvil tocando el icono de hamburguesa, desplegando cada carpeta anidada y comprobando que cada enlace sea fácil de pulsar con el pulgar.

Las investigaciones del Nielsen Norman Group confirman que la navegación oculta es menos detectable que la navegación visible o parcialmente visible. En pantallas móviles, los temas sitúan los enlaces dentro de un Theme mobile drawer detrás de un icono de menú hamburguesa. Como estos enlaces permanecen ocultos hasta que se pulsa el botón, los visitantes deben hacer un esfuerzo consciente para descubrirlos. Si este cajón está desordenado, los clientes pasarán por alto productos clave. Además, algunos temas pueden requerir ajustes de CSS para mejorar la facilidad de uso en móviles, sobre todo si los espacios táctiles son reducidos.

Si tu menú no funciona según lo esperado, consulta esta tabla de solución de incidencias:

¿Por qué no aparecen los cambios del menú en la tienda?

Este es el inconveniente más común entre nuevos administradores de Shopify. Añades con cuidado varias colecciones en Content > Menus, haces clic en Save menu, recargas la tienda y sigues viendo los enlaces antiguos.

Esto ocurre porque Shopify separa las listas de menús de los ajustes de presentación del tema. Tu tienda puede tener más de un menú, pero el tema solo muestra el seleccionado en su editor. Abre el editor de temas, entra en la sección Header y comprueba qué menú utiliza. Si apunta a una lista anterior, cámbiala a tu menú actualizado y guarda.

Faltan subenlaces o no se despliegan

Si creaste elementos anidados pero no se despliegan en la web, revisa el sangrado en el administrador. En Content > Menus, un elemento anidado debe quedar visiblemente desplazado hacia la derecha bajo su fila principal. Si queda alineado con el borde del elemento superior, Shopify lo tratará como un enlace de nivel superior independiente. Si el sangrado es correcto en el panel pero sigue sin abrirse en la tienda, tu tema probablemente solo soporte menús de un nivel.

Un elemento de menú ha desaparecido

Shopify mantiene tus enlaces coherentes: al eliminar el recurso vinculado también se elimina el elemento del menú. Si borras una colección de temporada o una página en borrador en tu administrador, el elemento de menú que apuntaba a ella también desaparece. Si un elemento desaparece, revisa tu lista de colecciones o páginas para verificar si el recurso fue eliminado.

Si compruebas que ocultar todo el catálogo tras un cajón móvil dificulta la exploración de tus clientes, valora implementar una barra de pestañas inferior en móvil para mantener los enlaces estratégicos siempre a la vista.

Valoraciones: cuándo es suficiente el menú por defecto de Shopify

No todas las tiendas en Shopify necesitan aplicaciones externas de navegación ni modificaciones de código a medida. Para una gran cantidad de comercios, las herramientas de menú integradas en Shopify son suficientes.

El menú nativo de Shopify funciona óptimamente cuando:

• Tu catálogo cuenta con un volumen moderado de productos distribuidos en pocas colecciones.
• Tu barra principal dispone de siete o menos elementos de nivel superior.
• Tu tema ofrece un cajón móvil limpio y accesible desde el primer momento.
• No requieres pancartas publicitarias, imágenes de productos ni bloques en columnas múltiples dentro de tus desplegables.

Usar los menús predeterminados no requiere ninguna app adicional.

Sin embargo, los menús nativos conllevan limitaciones concretas:

• Límites de anidación: El elemento de nivel superior solo puede tener hasta dos niveles de menús desplegables anidados, es decir, tres niveles en total.
• Dependencia del diseño del tema: Cada tema tiene un diseño diferente, por lo que los menús pueden mostrarse de manera distinta según el tema, quedando sujeto al código de terceros para estilos, animaciones y ergonomía táctil en móviles.
• Navegación móvil oculta: El menú móvil predeterminado esconde todo detrás de un botón hamburguesa. Dado que la navegación oculta resulta menos detectable que la visible, los usuarios en smartphones deben realizar pasos adicionales para descubrir tus productos.

Para identificar cuándo tu catálogo supera el formato de los temas estándar, consulta nuestro análisis sobre los límites de los menús de temas.

Cuando necesitas más: Mobile Menu, Mega Menu, Tab Bar con Navi+

Cuando tu catálogo se diversifica o tus visitas en smartphones exigen accesos más rápidos, una lista simple de texto en un cajón básico puede frenar la experiencia de compra. Es en este punto donde los formatos especializados marcan una diferencia clara.

Ilustración conceptual (Concept illustration): el cajón móvil estándar de un tema comparado con un menú móvil con barra de pestañas inferior.

Mediante Navi+ Tab Bar & Mega Menu, puedes crear barras de pestañas fijas en la parte inferior, mega menús, cajones móviles enriquecidos, menús con iconos y botones flotantes mediante arrastrar y soltar, sin alterar el código de tu tema.

Para los comerciantes que desean una experiencia móvil superior sin renunciar a sus hábitos en el panel de control, Navi+ puede reutilizar tus menús de Shopify existentes. Su función Mobile Menu puede insertar un menú existente de Shopify y actualizar su copia con un solo clic en el botón “Sync now”. Así, puedes seguir gestionando tus enlaces en Content > Menus dentro de Shopify y simplemente pulsar “Sync now” en Navi+ para reflejar las novedades en tu menú móvil. La sincronización es manual: Navi+ no se actualiza por sí solo y tampoco modifica los menús de Content > Menus.

Los menús de Navi+ también admiten hasta tres niveles de anidación, la misma profundidad que el menú de Shopify, así que la ventaja está en cómo se ve el menú y dónde se coloca (cajón, barra de pestañas, panel mega), no en más profundidad. Para determinar el formato óptimo según tu tienda, examina nuestra guía para elegir el tipo de menú adecuado para tu tienda.

Tanto si buscas una Tab Bar inferior para mantener accesibles las colecciones estrella en smartphones, un Mega Menu de varias columnas en ordenadores, o un Mobile Menu con diseño avanzado, dispones de alternativas a medida. Si el menú de tu tema cubre todo lo que requieres, consérvalo. Si prefieres un cajón móvil más completo, una barra de navegación inferior o un mega menú sin tocar código, puedes probar Navi+ Tab Bar & Mega Menu en la Shopify App Store.

Lista de verificación antes de publicar

Antes de anunciar tu tienda o lanzar tráfico de pago, repasa estos puntos clave:

• Comprobar los enlaces: Haz clic en cada enlace para cerciorarte de que abre una colección, producto o página activa y publicada.
• Respetar el límite de siete elementos: Mantén siete o menos elementos de nivel superior para evitar saturar el encabezado.
• Utilizar términos comprensibles: Cambia la jerga interna por palabras cotidianas y familiares que los compradores reconozcan inmediatamente.
• Verificar asignaciones en el tema: Entra en los ajustes del tema en Header y Footer para confirmar que el menú seleccionado es exactamente el que editaste en Content > Menus.
• Realizar pruebas en un smartphone físico: Comprueba que se muestre correctamente en ordenadores y dispositivos móviles navegando en un teléfono real.
• Crear redirecciones de URL: Si modificaste la dirección de una página o colección, recuerda que las redirecciones de URL pueden utilizarse para redirigir el tráfico de una página web a otra, evitando enlaces rotos 404.
• Guardar en el administrador: Confirma que hiciste clic en Save menu dentro de Content > Menus antes de cerrar la pestaña del navegador.

FAQ

¿Dónde están los menús en el administrador de Shopify?

Puedes añadir, eliminar, cambiar y consultar tus enlaces y menús desde Content > Menus en tu administrador de Shopify. Las guías más antiguas se refieren a esta sección como Tienda online > Navegación, pero en las tiendas actuales los menús se ubican en Content.

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

El elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados debajo de él. Esto genera un máximo de tres niveles, aunque su presentación en la tienda depende del diseño de tu tema.

¿Por qué no aparecen los cambios de mi menú en la tienda?

Es posible que tu tema tenga asignada una lista de menú diferente en las secciones Header o Footer. Comprueba la configuración de tu tema en Header y Footer para confirmar que el menú seleccionado coincide con el que estás editando.

¿Cuántos elementos de nivel superior debe tener mi menú?

Shopify recomienda añadir siete o menos elementos de nivel superior para no sobrecargar la barra de navegación.

¿Se pueden añadir menús desplegables al pie de página?

Shopify señala que los menús de pie de página solo pueden mostrar elementos de nivel superior en configuraciones convencionales. Revisa la configuración de tu tema para comprobar cómo gestiona los enlaces del pie de página.

¿Por qué ha desaparecido un elemento del menú?

Al eliminar el recurso vinculado también se elimina el elemento del menú. Si borras un producto, colección o página en Shopify, el sistema elimina automáticamente el enlace correspondiente en el menú.

Fuentes

• Shopify Help Center: Menus and links — Administración de menús y enlaces en Content > Menus en Shopify.
• Shopify Help Center: Editing menus — Instrucciones para añadir elementos, reordenar con controladores y uso de emojis.
• Shopify Help Center: Understanding navigation — Menús predeterminados y asignación de menús en los ajustes del tema.
• Shopify Help Center: Drop-down menus — Límites de anidación, comportamiento en pie de página, reglas de borrado y pruebas móviles.
• Shopify Help Center: URL redirects — Creación de redirecciones de URL al cambiar enlaces existentes.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation — Investigación sobre la visibilidad y descubrimiento de menús ocultos en móviles.
• Nielsen Norman Group: Menu Design — Principios para crear etiquetas descriptivas sin jerga interna.
• Shopify App Store: Navi+ Tab Bar & Mega Menu — Aplicación para diseñar barras de pestañas, mega menús y cajones móviles.
• Navi+ Blog: Shopify Menu Guide — Arquitectura de navegación y sincronización para menús móviles.