Configura menús desplegables en la tienda online

Puedes usar menús desplegables para agrupar productos, colecciones o páginas y facilitar que los clientes naveguen por la tienda online. Por ejemplo, si tienes muchos productos, puedes agregarlos a colecciones y luego usar un menú desplegable del menú principal para organizar esas colecciones. Esto puede ayudar a los clientes a encontrar el tipo de productos que buscan.

También puedes agregar, eliminar o editar elementos del menú en menús desplegables o en los menús predeterminados.

Puedes ver y cambiar los menús de la tienda online en Contenido > Menús del panel de control de Shopify.

Anidar elementos del menú para crear menús desplegables

Puedes crear menús desplegables creando o moviendo elementos del menú para anidarlos debajo de un elemento de primer nivel. El elemento de primer nivel se muestra en el menú principal de la tienda online y los elementos anidados se muestran en un menú desplegable. El elemento de primer nivel puede tener hasta dos niveles de menús desplegables anidados.

Todos los temas muestran los elementos anidados como menús desplegables desde el menú principal, y algunos temas los muestran como menús desplegables en otras ubicaciones.

El menú principal y los menús desplegables se muestran en distintas ubicaciones de la tienda online según el tema. Algunos temas muestran un ícono junto al nombre de un menú desplegable en el menú principal para ayudar a los clientes a reconocer que hay un menú desplegable.

Agregar un menú desplegable desde el menú principal

Puedes agregar un menú desplegable desde cualquiera de los elementos del menú principal.

Pasos:

Integración del menú de pie de página

También se pueden implementar menús desplegables en los menús de pie de página.

Pasos:

1. En el panel de control de Shopify, ve a Contenido > Menús.
2. Opcional: Sigue los mismos principios de anidación que se usan para los menús principales, como arrastrar elementos del menú debajo de un encabezado para crear una estructura desplegable. Haz clic en y arrastra los elementos hasta colocarlos.
3. Ingresa # en el campo Enlace para los encabezados que no deban llevar a una página (por ejemplo, encabezados como "Ayuda" o "Explorar").

Consideraciones de compatibilidad del tema

Revisa las siguientes consideraciones para agregar menús desplegables al tema:

• La mayoría de los temas admiten hasta dos niveles de menús desplegables anidados. Revisa la documentación del tema o prueba con elementos anidados para confirmar la compatibilidad.
• Algunos temas pueden requerir ajustes de CSS para mejorar la usabilidad en dispositivos móviles. No personalices el tema si no conoces el código del tema. Más información sobre customizing your theme.

Cómo determinar si el tema admite menús desplegables anidados

Para determinar si el tema actual admite la cantidad máxima de niveles de menús desplegables anidados que quieres implementar, puedes usar los siguientes recursos:

1. Revisa la documentación del tema: Consulta la documentación del tema para obtener información específica sobre las capacidades del menú y los niveles de anidación compatibles.
2. Prueba los elementos anidados: Crea una estructura de menú de prueba con la cantidad de niveles anidados que quieras y verifica que se muestre correctamente tanto en escritorio como en dispositivos móviles.

La mayoría de los temas admiten hasta dos niveles de menús desplegables anidados. Si tienes problemas con los menús desplegables, verifica que el tema admita la cantidad de niveles anidados que intentas implementar, ya que algunos temas pueden requerir personalizaciones adicionales para admitir varios niveles de anidación.

Mejores prácticas para menús desplegables

Revisa estas mejores prácticas para crear una estructura de menús útil que funcione bien en todos los dispositivos:

• Usa etiquetas descriptivas, como "Comprar por categoría", para los elementos de menú de primer nivel con enlaces #.
• Asegúrate de que los menús estén optimizados para dispositivos móviles. Puedes probar los menús en dispositivos móviles para confirmar que los menús desplegables se expanden como se espera.
• Agrega siete o menos elementos de menú de primer nivel para evitar la saturación.
• Usa títulos de enlace claros y descriptivos. Por ejemplo, "Colecciones" y "Vestidos de verano".
• Cada menú puede tener hasta 10.000 elementos y la tienda puede tener hasta 1.000 menús en total. Cualquier elemento de menú con subelementos en un menú desplegable cuenta como un menú aparte para este límite.

Accesibilidad de los menús desplegables

La mayoría de los temas implementan los encabezados de menús desplegables como botones en lugar de enlaces en los que se puede hacer clic. Es una decisión de diseño de accesibilidad intencional que ayuda a los clientes que usan tecnología de asistencia a comprender la estructura de navegación.

Cuando un elemento de menú de primer nivel controla un submenú desplegable, funciona como un botón para expandir el menú en lugar de como un enlace a una nueva página. Este enfoque asegura que los clientes que usan lectores de pantalla u otra tecnología de asistencia puedan navegar correctamente por el sistema de menús de la tienda.

Si quieres que los clientes accedan a una página de categoría principal (como "Todos los productos" o "Todas las colecciones"), agrega esa página como el primer elemento dentro del menú desplegable en lugar de hacer que el encabezado sea un enlace.

Resolución de problemas comunes

Revisa las siguientes soluciones a problemas comunes que podrían surgir al configurar menús de navegación:

• Redireccionamientos en el menú móvil: Si un enlace de primer nivel redirige a una página nueva cuando lo tocas, revisa el menú en el panel de control de Shopify para confirmar que el campo del enlace del menú sea #.

• Problemas de visibilidad: Si no se muestran los elementos anidados, asegúrate de colocarlos por completo debajo del elemento de encabezado y de que queden con sangría en la interfaz de Menús. Confirma que el tema admita la cantidad de niveles anidados que configuraste.

• Compatibilidad del tema: Si tienes problemas con los menús desplegables, verifica que el tema admita la cantidad de niveles anidados que intentas implementar. Algunos temas pueden requerir personalización adicional para admitir varios niveles de anidación.

• Bloqueo al crear menús anidados: Si aparece el error "Menu cannot contain nested menus. Opt in the nested navigation feature to use this", es posible que la tienda necesite activar la función de navegación anidada. Esto suele afectar a las tiendas creadas antes de 2018. Contacta a atención al cliente de Shopify si ves este error.

• Se muestra el submenú incorrecto: Si tienes varios enlaces de navegación que apuntan a la misma página (como la página de inicio), el tema podría mostrar el submenú equivocado. Asegúrate de que cada sección de navegación apunte a una página única para evitar confusión.

• Desaparición de elementos del menú: Si los enlaces del menú desaparecen sin que los elimines, verifica si eliminaste los productos, colecciones o páginas a los que apuntaban esos elementos. Si eliminas el recurso vinculado, también se elimina el elemento del menú.

Personalizar el código del tema para menús desplegables

Si el tema requiere una personalización más avanzada, puedes considerar customizing your theme code.