Configurar los menús desplegables en tu tienda online
Puedes usar menús desplegables para agrupar productos, colecciones o páginas y facilitarles a los clientes navegar en tu tienda online. Por ejemplo, si tienes muchos productos, puedes agregarlos a las colecciones y luego usar un menú desplegable del menú principal para organizar las colecciones. Esto puede ayudar a un cliente a encontrar el tipo de producto que está buscando.
También puedes agregar, eliminar o editar elementos del menú en los menús desplegables o en tus menús predeterminados.
Puedes ver y cambiar los menús de tu tienda online desde Contenido > Menús en tu panel de control de Shopify.
En esta página
Anidar elementos del menú para crear menús desplegables
Puedes crear o mover elementos del menú para que queden anidados debajo de un elemento de nivel superior a fin de crear menús desplegables. El elemento de nivel superior aparece en el menú principal de tu tienda online y los elementos anidados del menú se muestran en un menú desplegable: El elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados.
Todos los temas mostrarán elementos anidados como menús desplegables del menú principal, y algunos temas mostrarán elementos anidados como menús desplegables en otras sucursales.
La apariencia y ubicación del menú principal y los menús desplegables en la tienda online dependen del tema. En algunos temas se mostrará 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 en el menú principal
Puedes agregar un menú desplegable en cualquiera de los elementos del menú en el menú principal.
Pasos:
Escritorio
Desde el panel de control de Shopify, ve a Contenido > Menús.
Haz clic en el nombre de tu menú principal.
Elige uno de los elementos del menú principal como encabezado del menú desplegable o agrega un nuevo elemento del menú como encabezado. Si no deseas que el encabezado esté vinculado con ningún elemento, puedes introducir # en el campo Buscar o pegar un enlace para el elemento del menú del encabezado.
Para agregar un elemento del menú a fin de incluirlo en el menú desplegable, completa las siguientes tareas:
- Haz clic en Agregar elemento del menú.
- En el campo Nombre, introduce un nombre para el elemento del menú.
- En el campo Buscar o pegar un enlace, introduce o selecciona un destino para el elemento del menú.
Haz clic en Agregar, luego en
y mueve el elemento del menú para anidarlo debajo del elemento del menú del encabezado.Haz clic en Guardar menú.
iPhone
Desde la aplicación de Shopify, toca el botón
.Toca Contenido > Menús.
Toca el nombre del menú principal.
Elige uno de los elementos del menú principal como encabezado del menú desplegable o agrega un nuevo elemento del menú como encabezado. Si no deseas que el encabezado esté vinculado con ningún elemento, puedes introducir
#en el campo Buscar o pegar un enlace para el elemento del menú del encabezado.Para agregar un elemento del menú a fin de incluirlo en el menú desplegable, completa las siguientes tareas:
- Toca Agregar opción de menú.
- En el campo Nombre, introduce un nombre para el elemento del menú.
- En el campo Buscar o pegar un enlace, introduce o selecciona un destino para el elemento del menú.
Toca Agregar, luego
y mueve el elemento del menú para anidarlo debajo del elemento del menú del encabezado.Toca Guardar.
Android
En la aplicación de Shopify, toca el botón ☰.
Toca Contenido > Menús.
Toca el nombre del menú principal.
Elige uno de los elementos del menú principal como encabezado del menú desplegable o agrega un nuevo elemento del menú como encabezado. Si no deseas que el encabezado esté vinculado con ningún elemento, puedes introducir
#en el campo Buscar o pegar un enlace para el elemento del menú del encabezado.Para agregar un elemento del menú a fin de incluirlo en el menú desplegable, completa las siguientes tareas:
- Toca Agregar opción de menú.
- En el campo Nombre, introduce un nombre para el elemento del menú.
- En el campo Buscar o pegar un enlace, introduce o selecciona un destino para el elemento del menú.
Toca Agregar, luego
y mueve el elemento del menú para anidarlo debajo del elemento del menú del encabezado.Toca ✓.
Integración del menú de pie de página
Los menús desplegables también se pueden implementar en el menú de pie de página.
Pasos:
- Desde el panel de control de Shopify, ve a Contenido > Menús.
- Opcional: sigue los mismos principios de anidamiento utilizados para los menús principales, como arrastrar elementos del menú debajo de un elemento del encabezado para crear una estructura de menú desplegable haciendo clic en y arrastra los elementos al lugar correcto.
- Introduce # en el campo Enlace para los elementos del encabezado que no deben vincularse a una página (por ejemplo, los encabezado "Ayuda" o "Explorar").
Consideraciones sobre la compatibilidad de temas
Revisa las siguientes consideraciones para agregar menús desplegables a tu tema:
- La mayoría de los temas admiten hasta dos niveles de menús desplegables anidados. Consulta la documentación de tu tema o prueba los elementos anidados para confirmar la compatibilidad.
- Algunos temas pueden requerir ajustes CSS para mejorar la usabilidad móvil. No personalices un tema si no estás familiarizado con el código del tema. Más información sobre cómo personalizar tu tema.
Mejores prácticas para menús desplegables
Revisa las siguientes mejores prácticas para crear una estructura de menú útil que funcione bien en todos los dispositivos.
Utiliza etiquetas descriptivas, como "Comprar por categoría", para elementos de menú de nivel superior con # enlaces.
Asegúrate de que los menús estén optimizados para dispositivos móviles. Puede probar los menús en el dispositivo móvil para confirmar que los menús desplegables se expanden como se espera.
Agrega siete o menos elementos del menú de nivel superior para evitar sobrecargarlo.
Utiliza títulos de enlaces claros y descriptivos. Por ejemplo “Colecciones” y “Vestidos de verano”.
Resolución de problemas frecuentes
Revisa las siguientes soluciones a problemas comunes que puedes encontrar al configurar los menús de navegación:
Redirecciones del menú en el dispositivo móvil: si un enlace del menú de nivel superior redirecciona a una nueva página cuando lo tocas, accede al menú en tu panel de control de Shopify para confirmar que el campo de enlace del menú sea #.
Problemas de visibilidad: si los elementos anidados no aparecen, asegúrate de que estén arrastrados completamente debajo del elemento del encabezado y que se ha añadido sangría en la interfaz de Menús. Confirme que su tema admite la cantidad de niveles anidados que ha configurado.
Personalizar el código del tema
Para los temas que requieren una personalización más profunda, puedes considerar personalizar el código de tu tema.