Hola Leonidas
Entiendo perfectamente lo que necesitas: quieres añadir un submenú adicional en tu menú desplegable de Shopify para organizar las llantas por tamaño. Actualmente, tienes
CATÁLOGO > PARTES DE COCHE > LLANTAS, y desde “LLANTAS” enlazas a una colección con todas las llantas. Lo que buscas es que “LLANTAS” abra otro submenú con opciones como
15 PULGADAS,
16 PULGADAS, etc., y que cada una enlace a una colección específica. ¡Vamos a solucionarlo paso a paso!
Paso 1: Verifica si tu tema soporta menús de tres niveles
Shopify permite menús desplegables de hasta tres niveles en la mayoría de los temas, pero algunos tienen limitaciones. Para saber si el problema es del tema:
- Revisa la documentación de tu tema: Busca en la tienda de temas de Shopify o en el sitio del desarrollador si menciona soporte para menús anidados de tres niveles.
- Prueba en el editor del tema: Ve a Tienda online > Temas > Personalizar, y en la sección de navegación o encabezado, mira si puedes configurar submenús más profundos.
Si tu tema soporta tres niveles, solo necesitas configurarlo correctamente. Si no, habrá que ajustar el código, pero te explicaré ambas opciones.
Paso 2: Configura el menú en Shopify
Vamos a asegurarnos de que el menú esté bien estructurado en el panel de administración:
Accede a la sección de Navegación:
- En tu panel de Shopify, ve a Tienda online > Navegación.
- Haz clic en el menú que usas (probablemente “Menú principal”).
Revisa la estructura actual:
- Deberías ver “CATÁLOGO” como elemento principal.
- Dentro de “CATÁLOGO”, “PARTES DE COCHE” como subelemento.
- Dentro de “PARTES DE COCHE”, “LLANTAS”.
Convierte “LLANTAS” en un elemento con submenús:
- Haz clic en “LLANTAS” y asegúrate de que no sea solo un enlace directo a una colección.
- Si tiene un enlace, cámbialo a un elemento sin enlace (deja el campo de enlace vacío o usa #).
Añade las medidas como subelementos:
- Dentro de “LLANTAS”, haz clic en Añadir elemento de menú.
- Escribe “15 PULGADAS” y enlázalo a la colección correspondiente (si no tienes una colección para llantas de 15 pulgadas, créala antes en Productos > Colecciones).
- Repite para “16 PULGADAS”, “17 PULGADAS”, etc.
Guarda los cambios:
- Haz clic en “Guardar” y revisa tu tienda para ver si el submenú aparece.
Paso 3: Confirma la ubicación del menú
Asegúrate de que el menú que editaste esté asignado al lugar correcto:
- Ve a Tienda online > Temas > Personalizar.
- En el editor, busca la sección de Encabezado o Navegación.
- Verifica que el menú seleccionado sea el que acabas de modificar.
Paso 4: Si el submenú no aparece (ajuste del tema)
Si configuraste todo y el submenú de medidas no se muestra, tu tema podría no soportar menús de tres niveles por defecto. Aquí te explico cómo ajustarlo:
Edita el código del tema:
- Ve a Tienda online > Temas > Acciones > Editar código.
- Busca el archivo de navegación, como header.liquid o navigation.liquid.
Modifica el código para soportar tres niveles:
- Encuentra el código que renderiza el menú (busca algo con linklists y bucles for).
- Añade un bucle adicional para el tercer nivel. Por ejemplo:
{% for link in linklists.main-menu.links %}
<li>
<a href="{{ link.url }}">{{ link.title }}</a>
{% if link.links != blank %}
<ul>
{% for sub_link in link.links %}
<li>
<a href="{{ sub_link.url }}">{{ sub_link.title }}</a>
{% if sub_link.links != blank %}
<ul>
{% for sub_sub_link in sub_link.links %}
<li><a href="{{ sub_sub_link.url }}">{{ sub_sub_link.title }}</a></li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
Nota: Este es un ejemplo básico. El código puede variar según tu tema, así que busca la estructura específica de tu menú.
Paso 5: Comprueba el diseño (CSS y JavaScript)
Si el submenú aparece, pero no se despliega bien (por ejemplo, no se ve o no funciona al pasar el ratón), podría faltar soporte en el CSS o JavaScript del tema:
- Revisa el CSS: En el editor de código, busca archivos como styles.css y asegúrate de que los submenús de tercer nivel sean visibles. Ejemplo:
.menu-level-3 {
display: none;
}
.menu-item:hover .menu-level-3 {
display: block;
}
Con estos pasos deberías tener tu menú como quieres: CATÁLOGO > PARTES DE COCHE > LLANTAS > 15 PULGADAS. Si algo no funciona o necesitas ayuda con el código, no dudes en escribirme. ¡Estoy aquí para que tu tienda quede perfecta! Muchas gracias por tu consulta, ¡espero haberte ayudado!
¡Un saludo!
Luis Forero | Shopify Developer | Experto en Liquid | Personalización de temas | Optimización de código | Soluciones a medida | Soporte en español e inglés | Hablemos sobre tu tienda Shopify
Si resolví tu pregunta, haz clic en Aceptar como solución.
Para soluciones personalizadas, contáctame por correo | luisforero.co@gmail.com
