Mega menú

Enlaces destacados

1. Documentación de Shopify sobre secciones y bloques
2. Documentación de Company XYZ sobre el bloque de mega menú
3. Documentación de Company XYZ sobre el uso de vídeos
4. Documentación de Company XYZ sobre iconos
5. Documentación de Company XYZ sobre los ajustes de colores del banner
6. Documentación de Shopify sobre el editor de temas
7. Documentación de Company XYZ sobre los ajustes de visibilidad

Videos útiles

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Vídeo de Shopify Academy: Cómo personalizar tu tienda

Use este bloque para convertir un elemento de navegación de primer nivel en un menú desplegable grande con enlaces agrupados y contenido promocional opcional. Es una buena opción cuando su encabezado necesita mostrar muchos destinos sin resultar recargado, y puede añadir varios bloques de Mega menu para ampliar un sistema de navegación más amplio. Para ver una descripción general más amplia de la estructura del tema, consulte la documentación de Shopify sobre secciones y bloques. Consulte la referencia de Mega menu para obtener más orientación sobre la configuración.

Nota

En móvil, los bloques Menu y Mega menu se combinan en una sola interfaz de navegación. Revise la navegación móvil completa después de añadir o renombrar bloques para que el resultado combinado siga siendo claro.

Ajustes básicos

Los ajustes básicos definen la etiqueta de nivel superior, el menú que abre y si aparecen ayudas de navegación adicionales o contenido promocional.

Establezca Title en la etiqueta que los clientes deben ver en el encabezado y luego elija el Menu que debe abrirse desde ese elemento. También puede activar un banner, una barra de funciones y botones de “view all” para los submenús cuando quiera que el desplegable guíe a los compradores hacia páginas de categorías más amplias en lugar de solo hacia enlaces más profundos.

Consejo

Los botones de “view all” funcionan mejor cuando los submenús representan categorías o campañas principales. Ofrecen a los clientes una ruta clara hacia el destino principal sin obligarlos primero a elegir una opción demasiado concreta.

Ajustes de alineación

Estos ajustes afinan cómo se coloca el contenido dentro del espacio disponible en escritorio. Son más importantes cuando el bloque se amplía más o usa un diseño más extenso.

Si los cambios de alineación parecen menores, revise primero los ajustes de diseño. Las opciones de diseño determinan cuánto espacio obtiene el bloque, y la alineación suele actuar como un ajuste secundario dentro de ese espacio.

Ajustes de diseño

Los ajustes de diseño controlan cuánto espacio horizontal ocupa el bloque en el encabezado y dónde se sitúa en escritorio.

Use Fill available space cuando quiera que este bloque se expanda y ayude a equilibrar la fila del encabezado. Elija el diseño de escritorio que mejor se adapte a la estructura general de su encabezado, especialmente si quiere que este elemento de navegación se sienta más centrado o ocupe más ancho.

Revise juntos el diseño y la alineación. Un diseño de ancho completo o ampliado puede cambiar el equilibrio visual de todo el encabezado, no solo de este bloque.

Fondo del banner

Si activa el banner, este grupo controla el medio que se muestra detrás de él. Puede usar una imagen o un video, además de medios móviles independientes cuando el recurso de escritorio no se recorte o escale bien en pantallas más pequeñas.

Use Cover para efectos visuales envolventes y Contain cuando necesite que la imagen completa siga visible. Mantenga los fondos del banner lo bastante simples como para que la navegación siga siendo fácil de revisar de un vistazo.

Para obtener orientación sobre la configuración de video, consulte using video.

Precaución

Los medios de fondo pesados o recargados pueden dificultar el uso de la navegación. Si el banner compite con los enlaces, simplifique los medios o refuerce el overlay.

Primer plano del banner

Este grupo controla el contenido superpuesto sobre el área de contenido del banner, incluido el texto, los iconos y el botón principal. Los campos que se dejan en blanco simplemente no se muestran, por lo que es fácil mantener el banner minimalista.

Use los controles de alineación para colocar el contenido donde se lea mejor sobre los medios elegidos. Los encabezados breves y el texto de apoyo conciso suelen funcionar mejor aquí que el texto promocional largo.

Puede añadir un emoji o un nombre de icono compatible para los campos de icono y de icono del botón. Para obtener ayuda con los nombres, consulte la guía de iconos.

Elija un estilo y un diseño de botón que respalden el banner en lugar de dominarlo. Si usa un estilo de enlace de bloque completo, se eliminan los enlaces dentro del subtítulo, por lo que esa opción es la mejor cuando todo el banner debe actuar como un único destino claro.

Trate el banner como una ayuda promocional rápida, no como un segundo sistema de navegación. Si añade un mensaje contundente y un botón, mantenga especialmente limpio el resto de la estructura del menú.

Medios del primer plano del banner

Este grupo añade una imagen sobre el área de contenido del banner, separada del fondo. Es útil para logotipos, recortes de producto o pequeñas ilustraciones de apoyo.

Ajuste el estilo de la imagen y el ancho máximo para que los medios respalden el mensaje sin imponerse. Los medios de primer plano de ancho completo pueden funcionar, pero requieren un cuidado adicional en un contexto de navegación porque pueden dominar rápidamente el desplegable.

Si añade un enlace a los medios, asegúrese de que no compita con el botón principal ni con el comportamiento de enlace de bloque completo del banner.

Colores del banner

Estos ajustes reemplazan solo para este bloque las opciones de color del banner más amplias. Úselos cuando este mega menú necesite su propio estilo de campaña o cuando los medios seleccionados necesiten un mejor soporte de contraste.

Los ajustes de overlay suelen ser el punto de partida más útil, ya que un mejor overlay puede mejorar la legibilidad sin obligarle a recolorear todos los elementos de texto. Para más orientación, consulte Ajustes de color del banner.

Ajustes estándar del bloque

Ajustes de visibilidad

Use los controles de visibilidad para mostrar este bloque en escritorio, en móvil o en ambos. Esto es especialmente útil cuando está creando distintos patrones de navegación para diferentes tamaños de pantalla.

Como en móvil se combinan los estilos de menú en una sola interfaz, asegúrese de que cualquier opción de visibilidad específica por dispositivo siga dejando a los clientes un conjunto completo y comprensible de rutas de navegación. Para ver detalles de configuración específicos del editor, consulte la documentación de Shopify sobre el editor de temas. Encontrará más detalles en Ajustes de visibilidad.

Notas de uso

1. Mantenga familiares las etiquetas. Use títulos de nivel superior cortos y claros para que los clientes puedan predecir qué tipo de enlaces contiene cada desplegable.
2. Compruebe ambos viewports. Revise los resultados en escritorio y en móvil después de cambiar el diseño, la alineación, la visibilidad o los medios, ya que cada uno puede comportarse de forma distinta.
3. Use el estilo de reserva con intención. Los colores en blanco o con estilo predeterminado suelen conservar el diseño circundante, mientras que los colores, degradados o medios explícitos hacen que el bloque se sienta más independiente.
4. Proteja la legibilidad. Al usar fondos de imagen o video, ajuste el overlay, los colores y la longitud del texto para que los enlaces y las llamadas a la acción sigan siendo fáciles de revisar de un vistazo.
5. Limite los clics en competencia. Si el banner incluye un botón, medios enlazados o un enlace de bloque completo, asegúrese de que siga existiendo una acción principal obvia.