Cómo reparar enlaces en el menú de navegación de Shopify: rotos, desaparecidos y no cliqueables

Pocas situaciones generan mayor desconcierto al gestionar una tienda online que toparse con un enlace de navegación que no responde al hacer clic. Seleccionas una categoría principal en el encabezado de tu tienda esperando ver un catálogo de productos seleccionado, pero no ocurre nada. O peor aún, un cliente pulsa una opción desde su teléfono y aterriza en una página de error 404 vacía.

Comprender la diferencia entre un enlace de menú averiado y un enlace de navegación debidamente reparado comienza por diagnosticar con exactitud en qué punto falló la conexión. En la mayoría de las tiendas de Shopify, los enlaces de menú rotos no se deben a fallos de programación complejos ocultos en las plantillas Liquid. Casi todos los incidentes responden a cuatro síntomas operativos muy definidos: enlaces muertos que apuntan a recursos eliminados, enlaces que dirigen a una página equivocada, encabezados superiores que abren submenús sin redirigir o cambios guardados en el panel de control que no se reflejan en la tienda pública.

Cada síntoma cuenta con una solución metódica que comienza directamente en el administrador de Shopify, en Contenido > Menús, sin necesidad de recurrir a modificaciones arriesgadas en el código del tema. Esta guía te orienta punto por punto para diagnosticar el problema de tu tienda, reparar destinos rotos con seguridad y lograr que los encabezados desplegables respondan a los clics tanto en ordenadores como en teléfonos móviles.

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

Para reparar enlaces en un menú de navegación de Shopify, abre Contenido > Menús, localiza el elemento, haz clic en la x junto al campo de enlace y selecciona la colección, página o producto correspondiente; después, guarda el menú (Shopify Help Center). Si un elemento padre con menú desplegable no responde al clic, suele deberse al diseño del tema: la mayoría de las plantillas muestran los encabezados desplegables como botones y no como enlaces (Shopify Help Center).

Sigue estos cinco pasos para reparar un enlace de menú defectuoso:

1. Abre Contenido > Menús en tu panel de administración de Shopify para acceder a tus listas de navegación (Shopify Help Center).
2. Abre el menú asignado a tu encabezado (como “Menú principal”) y localiza la fila con el problema.
3. Haz clic en la x junto al campo de enlace para desvincular el destino antiguo y elige la colección, página o producto que corresponda (Shopify Help Center).
4. Guarda el menú pulsando el botón de guardar en la barra de acciones superior o inferior.
5. Comprueba el enlace en una ventana de incógnito tanto en el ordenador como en el móvil para verificar que la página cargue correctamente.

Si se trata de una categoría superior que contiene submenús y no abre ninguna página al hacer clic, ese comportamiento lo controla la estructura de tu tema. Revisa la sección siguiente sobre por qué el elemento superior de un menú desplegable no es cliqueable para elegir la solución más conveniente.

Identifica tu síntoma: roto, incorrecto, no cliqueable o sin actualizar

Antes de alterar los ajustes de navegación o tocar archivos de plantillas, debes identificar con precisión el síntoma que experimenta tu tienda. Los distintos fallos visuales se originan en áreas completamente diferentes de la plataforma de Shopify. Tratar un menú desplegable que no reacciona al clic como si fuera un enlace roto hacia un recurso eliminado solo provocará configuraciones erróneas.

Utiliza la siguiente tabla de diagnóstico para relacionar lo que observas en la tienda con su causa de fondo:

Al evaluar tu tienda, presta atención al comportamiento visual específico. Un enlace muerto devuelve una pantalla estándar de error 404 (“Página no encontrada”). Una ruta equivocada solo exige seleccionar el recurso correcto en el selector del panel. En cambio, un elemento configurado como botón desplegable funciona de manera totalmente distinta a un enlace convencional, puesto que el navegador absorbe el evento de clic exclusivamente para mostrar u ocultar los elementos secundarios.

Reparar un enlace roto o erróneo en Contenido > Menús

Cuando un enlace de menú desemboca en una página de error 404 o muestra una categoría equivocada, la corrección básica se efectúa en los ajustes de navegación. En el panel de control de Shopify, puedes ver y cambiar los menús de tu tienda online desde Contenido > Menus (Shopify Help Center).

Figura 1: Ilustración conceptual (Concept illustration) — Reparar un enlace roto o erróneo en Contenido > Menús

Para subsanar el elemento defectuoso, lleva a cabo estos tres pasos:

Eliminar el enlace antiguo

Entra en Contenido > Menús y haz clic en el título del menú que alberga la fila afectada. Pulsa en Editar junto al elemento en cuestión. En el cuadro de diálogo verás el campo Nombre y el campo Enlace. Para cambiar el destino del elemento de menú, haz clic en la x situada junto al campo de enlace (Shopify Help Center). A continuación, elige el nuevo destino.

Elegir colección o página

Con el campo de enlace vacío, haz clic dentro de la casilla para desplegar el selector de recursos nativo de Shopify. Shopify permite enlazar a productos, colecciones, páginas, artículos de blog y políticas. Como indica la documentación de Shopify, en la mayoría de los casos es necesario crear un elemento antes de poder enlazarlo (Shopify Help Center). Si tienes prevista una nueva línea de productos, asegúrate de haberla publicado previamente en el panel antes de intentar seleccionarla aquí.

Elige siempre tu destino de forma directa desde esta lista en lugar de teclear una URL relativa (como /collections/camisas) manualmente. Elegir de la lista también evita errores de escritura en la ruta.

[!NOTE] Si un elemento se esfuma de repente de tu navegación sin que nadie lo haya editado, revisa tus colecciones y páginas. Si eliminas un recurso que utilizas en los menús de tu tienda, también se eliminarán automáticamente todos los elementos de menú asociados (Shopify Help Center).

Guardar el menú

En cuanto el recurso correcto quede registrado en la casilla de enlace, pulsa Aplicar cambios en el modal y, a continuación, haz clic en Guardar menú en la barra superior del panel de control. El destino actualizado quedará guardado en la plataforma.

Redirigir URL antiguas tras modificar un identificador

Muchos comerciantes sufren enlaces rotos tras reorganizar las secciones de su catálogo. Por ejemplo, si cambias el handle de la URL de una colección de /collections/moda-de-verano a /collections/prendas-estivales, los enlaces o marcadores antiguos que usen la ruta anterior pueden terminar en una página 404.

Cuando cambias una URL en tu tienda de Shopify, puedes crear una redirección de URL para evitar que clientes y motores de búsqueda aterricen en páginas inexistentes (Shopify Help Center).

Para gestionar eficazmente las redirecciones de enlaces antiguos, ten presentes dos reglas indispensables:

En primer lugar, solo puedes redirigir desde URL rotas (Shopify Help Center). Si la ruta previa fue eliminada o cambiada definitivamente, Shopify trasladará de forma transparente a los visitantes hacia la nueva colección.

En segundo lugar, si la URL todavía carga una página web válida, la redirección de URL no funcionará (Shopify Help Center). Si la dirección anterior permanece ligada a una página, producto o colección activa, el sistema servirá dicho recurso en lugar de ejecutar la regla de redirección.

Tras generar tu regla de redirección, regresa a Contenido > Menús y actualiza directamente el enlace del menú. No dependas de las redirecciones para la navegación principal: son una red de seguridad para enlaces antiguos, y el menú debe apuntar directamente a la URL activa.

Por qué el elemento superior de un menú desplegable no es cliqueable

Una de las dudas más frecuentes entre los usuarios de Shopify surge al organizar categorías anidadas en el menú principal. Un comerciante crea un elemento de primer nivel llamado “Tienda” que apunta a /collections/all, y luego coloca debajo subcategorías como “Camisas” y “Pantalones”. Al guardar, hacer clic en “Tienda” en la vitrina pública deja de abrir el catálogo completo de productos.

Figura 2: Ilustración conceptual (Concept illustration) — Por qué el elemento superior de un menú desplegable no es cliqueable

Suele ser una decisión de diseño del tema, no un fallo. De acuerdo con la documentación oficial de Shopify, la mayoría de los temas implementan los encabezados de los menús desplegables como botones en lugar de enlaces cliqueables (Shopify Help Center).

Desde una perspectiva técnica, muchas plantillas modernas de Shopify estructuran los desplegables con las etiquetas HTML nativas <details> y <summary>. Según la referencia de MDN Web Docs, al hacer clic en el elemento <summary> se alterna el estado de apertura y cierre del elemento primario <details> (MDN Web Docs).

Dado que el navegador interpreta la etiqueta <summary> como un conmutador de visibilidad, la interacción se restringe:

• Solo abre el menú desplegable: La acción de clic es utilizada enteramente por el navegador para desplegar o plegar las opciones subordinadas, lo que impide la navegación hacia cualquier dirección web vinculada.

Quienes gestionan tiendas topan continuamente con esta barrera. En los foros de Shopify Community, diversos comerciantes expresan que los enlaces superiores dejan de responder tras añadir submenús desplegables. Otro comerciante describe el impacto comercial: tras convertir el enlace en desplegable, ya no dirige a la página de todos los productos (Shopify Community).

Cuando diseñas estructuras jerárquicas complejas, comprender bien la estructura de menús multinivel en Shopify te ayuda a estructurar categorías claras sin confundir a quienes compran desde el móvil.

Hacer que el enlace superior sea cliqueable: ajuste del tema, alternativa de menú o código

Si tu tienda requiere obligatoriamente que los visitantes puedan tanto acceder a la categoría principal como desplegar sus submenús, cuentas con tres métodos ordenados de menor a mayor complejidad:

Comprobar el tipo de menú en el encabezado

Antes de editar código, examina las opciones del personalizador de temas. Ciertas plantillas incluyen selectores para cambiar la forma en que la barra de navegación gestiona los enlaces secundarios.

Por ejemplo, en el tema Trade, los análisis de la comunidad revelaron que cuando el tipo de menú se define como “mega menú”, los ajustes de script para habilitar clics en elementos superiores no surten efecto, mientras que al cambiarlo a “menú desplegable” el comportamiento sí funciona (Shopify Community). Revisa los ajustes de la sección Encabezado en el editor de tu tema para comprobar si existen opciones de visualización alternativas.

Añadir un enlace secundario “Ver todo”

Una solución alternativa sin código consiste en reorganizar el primer elemento secundario. En lugar de exigir que el encabezado funcione a la vez como botón y como hipervínculo, lo conviertes estrictamente en una carpeta interactiva.

En Contenido > Menús, edita el elemento superior. Si prefieres que el encabezado no apunte a ningún sitio, escribe # en la casilla del enlace (Shopify Help Center). Después, crea un nuevo elemento anidado en la primera posición de esa lista desplegable con el texto “Ver todo” o “Toda la colección”, enlazando a la colección principal.

Esta alternativa reporta tres claras ventajas:

1. No requiere tocar código, eliminando el riesgo de dañar archivos del tema.
2. Mantiene el elemento padre como desplegable y aun así ofrece a los compradores un enlace a la colección completa.
3. El cliente asimila de inmediato que el encabezado expande la lista y que el primer enlace muestra la colección entera.

Modificar el código del tema (con copia de seguridad previa)

Si necesitas que el texto del elemento superior conduzca a la página de colección al hacer clic en ordenador, puedes ajustar las plantillas Liquid del tema (como header-dropdown-menu.liquid o header.liquid).

[!WARNING] Antes de alterar cualquier archivo Liquid, recuerda la recomendación explícita de Shopify: es aconsejable hacer una copia de seguridad del tema antes de modificar el código (Shopify Help Center). Duplicar el tema activo te proporciona un punto de restauración inmediato si los cambios en el marcado rompen la visualización.

El principio técnico de esta modificación consiste en envolver el texto de la categoría superior dentro de una etiqueta de anclaje HTML <a> con atributo href real, en vez de dejarlo como un elemento <summary> básico. Este esquema también resulta decisivo para los rastreadores de motores de búsqueda. Según Google Search Central, por lo general, Google solo puede rastrear tu enlace si es un elemento HTML <a> (Google Search Central); repasa cómo asegurar que Google pueda rastrear tu menú para conservar un etiquetado amigable con el SEO.

En pantallas de escritorio, esta configuración suele adoptar un control dividido:

• Enlace con flecha: El texto de la categoría actúa como un enlace que abre la colección, mientras que un icono de flecha adyacente funciona como botón para desplegar el submenú.

No obstante, actúa con prudencia. Las conversaciones de la comunidad sobre Dawn 7.0.1 demuestran que las ediciones Liquid manuales que funcionan en escritorio pueden fallar en pantallas móviles o dejar de funcionar en otras versiones del tema al cambiar las clases CSS y el DOM (Shopify Community).

Los cambios del menú no aparecen en la tienda online

Otra incidencia habitual ocurre cuando organizas con cuidado los elementos en el panel, pulsas guardar, pero la tienda sigue mostrando los enlaces antiguos.

Comprobar qué menú utiliza el encabezado

En la mayor parte de los casos, la discrepancia surge por haber editado una lista de menú distinta. Tu tienda puede tener varias listas de menú en Contenido > Menús (como “Menú principal”, “Navegación 2026”, “Menú Móvil” o “Menú inferior”).

Para verificar la asignación en tiempo real:

1. En el panel de Shopify, ve a Tienda online > Temas.
2. Pulsa en Personalizar junto a tu tema activo.
3. En la barra izquierda, selecciona la sección Encabezado.
4. Revisa la opción Menú en el panel de la derecha.

Si el encabezado tiene asignado “Navegación Nueva” pero tus modificaciones se realizaron en “Menú principal”, la vitrina nunca reflejará los cambios. Modifica el ajuste para apuntar a la lista editada o actualiza la lista que esté efectivamente conectada al encabezado.

El truco comunitario de volver a guardar el identificador

Si el tema apunta al menú correcto pero los cambios siguen sin aparecer, podría deberse a una demora en la memoria caché del sistema.

En los foros de Shopify, usuarios que experimentaban demoras persistentes en la sincronización compartieron un truco de administración: cambiar y guardar el identificador del menú y luego volver a guardarlo con su identificador original (Shopify Community).

[!NOTE] Ten presente que este truco es una alternativa práctica compartida por la comunidad y no un procedimiento de soporte oficial de Shopify. Antes de alterar identificadores, realiza siempre pruebas en una ventana de incógnito para descartar que tu navegador web esté sirviendo una versión en caché antigua.

El menú desplegable se cierra demasiado rápido en escritorio

Un fallo de usabilidad molesto surge cuando un enlace opera bien en lo técnico, pero los compradores no alcanzan los submenús porque el cuadro desplegable se repliega precipitadamente.

Cuando el desplegable se cierra demasiado pronto, el usuario pasa el ratón por la categoría superior, desplaza el puntero hacia abajo para elegir una opción y el menú se desvanece de inmediato antes de poder pulsar.

En debates especializados de la comunidad, varios participantes señalaron que este problema suele originarse por una separación innecesaria generada por el borde entre el elemento de primer nivel y el contenedor desplegable, lo que quiebra el puente de interacción al pasar el ratón (Shopify Community). Al pasar el cursor sobre esa franja vacía, se pierde el estado hover y el menú se cierra.

Conflictos de CSS generados por aplicaciones instaladas recientemente pueden ocasionar el mismo síntoma. Para diagnosticar el origen sin redactar código CSS arbitrario, desactiva temporalmente las incrustaciones de aplicaciones en tu tema o consulta al desarrollador de la plantilla para que ajuste los espaciados del encabezado.

Compromisos: cuándo no editar el código del tema

Ante un elemento superior no cliqueable, surge la tentación de buscar un fragmento de código Liquid en un foro y pegarlo en el tema. No obstante, las alteraciones manuales de código conllevan cargas de mantenimiento reales:

• Pérdida ante actualizaciones: Cuando el creador del tema lanza una actualización de seguridad o rendimiento, los cambios aplicados en header.liquid o header-dropdown-menu.liquid no se trasladan automáticamente. Deberás rehacer y probar las modificaciones en cada nueva versión.
• Incompatibilidad entre versiones: La arquitectura de los temas cambia rápidamente. Como se evidenció en Dawn 7.0.1, un código válido para una versión puede quedar inservible en otra al haber variado las etiquetas summary o los nombres de clases CSS (Shopify Community).
• Fallos en dispositivos móviles: Los scripts de interacción pensados para ratón suelen comportarse mal en pantallas táctiles. Tocar la categoría superior puede desencadenar la redirección inmediata antes de que el usuario haya podido ver las opciones secundarias.

Para muchas tiendas, la alternativa de añadir un enlace “Ver todo” brinda una experiencia fluida sin código personalizado que mantener. Si tu catálogo exige esquemas más avanzados, analiza los límites de los menús de temas para evaluar si una aplicación especializada de menús representa una mejor inversión a largo plazo.

Dónde encaja Navi+

Si tu catálogo comercial precisa una estructura de navegación más profunda y prefieres no mantener código Liquid personalizado en tu tema, Navi+ ofrece una solución flexible.

Navi+ funciona como una plataforma especializada de navegación que aporta menús laterales para móvil (drawer), mega menús para ordenador y móvil, y una barra de pestañas para smartphone, admitiendo hasta tres niveles jerárquicos anidados. En vez de intervenir en los archivos internos de tu tema, Navi+ opera de manera independiente en conjunto con tu diseño.

Cada elemento configurado en Navi+ permite definir su comportamiento:

• Asignar # a un elemento superior permite que al tocarlo se desplieguen los elementos secundarios sin realizar ninguna redirección (Documentación de Navi+).
• En aquellas tiendas que requieran enlaces directos en el elemento principal, los encabezados de sección de Navi+ pueden enlazar a una página y desplegar opciones al mismo tiempo: pulsar el texto despliega el submenú, mientras que tocar la flecha dedicada navega directamente a la colección (Changelog de Navi+).

Si tu tema no deja de convertir los elementos superiores en botones y no quieres asumir el mantenimiento de código en el encabezado, puedes configurar el menú en Navi+ y decidir para cada elemento si enlaza, despliega o hace ambas cosas.

Lista de comprobación posterior a la reparación

Tras corregir los enlaces de navegación, repasa esta lista de comprobación para garantizar que toda tu estructura de menús responda fielmente en cualquier dispositivo:

• Abre una ventana de incógnito en ordenador y móvil para verificar la tienda real sin interferencias de la memoria caché.
• Pulsa cada elemento de nivel 1, nivel 2 y nivel 3 para constatar que la dirección URL de destino cargue con éxito.
• Comprueba que no existan errores 404 en colecciones renombradas y verifica que las redirecciones de URL estén activas en el panel (Shopify Help Center).
• En el editor de temas, confirma que la sección Encabezado tenga asignado exactamente el menú que editaste en Contenido > Menús.
• Verifica que se haya creado una copia de seguridad del tema antes de efectuar cualquier modificación de código manual (Shopify Help Center).
• Revisa tus listas de navegación cada vez que elimines colecciones, páginas o productos para reponer los elementos que el sistema haya borrado (Shopify Help Center).
• Verifica la respuesta del cursor en escritorio para asegurar que los menús desplegables no se cierren de manera prematura.
• Consulta nuestra guía completa de menús en Shopify para mantener una arquitectura accesible y ordenada conforme crezca tu catálogo.

Preguntas frecuentes

¿Por qué no puedo hacer clic en mi elemento de menú principal que tiene un desplegable?

Shopify aclara que la mayoría de los temas procesan los encabezados desplegables como botones y no como hipervínculos (Shopify Help Center). Puedes revisar la configuración de tipo de menú en tu tema (Shopify Community) o añadir un enlace secundario “Ver todo” dirigido a la colección principal.

¿Por qué desapareció repentinamente un elemento de mi menú?

Si eliminas un recurso (como una colección, página o producto) vinculado a tus menús, todos los elementos de menú que dependían de él se eliminarán automáticamente (Shopify Help Center). Comprueba si el recurso asociado fue borrado hace poco.

¿Por qué el enlace de menú muestra un error 404 tras renombrar una colección?

Al cambiar el identificador o la dirección de una página en la tienda, puedes crear una redirección de URL para conservar las visitas (Shopify Help Center). No obstante, las redirecciones solo actúan sobre URL rotas, por lo que conviene actualizar la casilla de enlace directamente en Contenido > Menús.

¿Por qué no se actualiza mi menú de navegación en la tienda online?

Comprueba qué menú está seleccionado en la sección Encabezado dentro del editor de temas. Una alternativa práctica compartida en la comunidad consiste en modificar y guardar el identificador del menú y luego volver a guardarlo con su nombre original (Shopify Community); realiza siempre una prueba en modo privado.

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

El elemento superior puede alojar hasta dos niveles de menús desplegables anidados debajo (Shopify Help Center), lo que permite organizar hasta tres niveles de navegación en total.

¿Es seguro modificar el código del encabezado para solucionar este problema?

Shopify aconseja duplicar el tema para conservar una copia de seguridad antes de alterar el código (Shopify Help Center). Las ediciones manuales en Liquid pueden ocasionar desajustes visuales ante actualizaciones de plantilla y en pantallas táctiles.

Fuentes

• Shopify Help Center: Editing Menus — Gestión de destinos de menú y vinculación de recursos.
• Shopify Help Center: Drop-down Menus — Pautas para menús anidados y comportamiento de botones en elementos superiores.
• Shopify Help Center: URL Redirects — Reglas y límites para la redirección de direcciones web en la tienda.
• Shopify Help Center: Duplicating Themes — Recomendaciones de respaldo antes de ajustar el código de plantillas.
• Google Search Central: Make Links Crawlable — Requisitos de marcado en etiquetas HTML de anclaje para rastreadores.
• MDN Web Docs: The Summary Element — Mecánica técnica de apertura y cierre en elementos HTML summary y details.
• Shopify Community: Why Isn’t My Navigation Menu Updating — Debates sobre retardos de sincronización en identificadores de menú.
• Shopify Community: Why Aren’t the Main Menu Links Working — Análisis de espaciados de bordes y cierres involuntarios al pasar el ratón.
• Shopify Community: Dropdown Menu Clickable - Trade — Efectos del tipo de menú de encabezado en la plantilla Trade.
• Shopify Community: Dawn Theme 7.0.1 Dropdown Menu Parent Link Not Clickable — Casos reportados sobre encabezados superiores no cliqueables.
• Shopify Community: How to Make My Shop Link in the Header Work Again — Opiniones sobre enlaces desactivados al transformarse en desplegables.
• Navi+ Documentation: Menu Item Link Types — Tipos de enlaces independientes y respuesta táctil en enlaces almohadilla.
• Navi+ Changelog: Latest Update — Funcionalidad simultánea de enlace y despliegue para encabezados de sección.