Navegación principal

Personaliza tu navegación principal con menús flexibles, búsqueda, marca y control de diseño adaptado a móviles.

Todas las secciones Documentación de referencia

Enlaces destacados

Videos útiles

Vídeo de Learn With Shopify: mejores prácticas para los menús de navegación de Shopify

Vídeo de Learn With Shopify: el menú de navegación de Shopify explicado en 50 segundos

Vídeo de Shopify Academy: personalización de su tienda

Construye tu navegación principal combinando bloques de menú, marca, búsqueda y utilidad en el orden en que quieres que aparezcan. El orden de los bloques define el diseño general, mientras que los bloques individuales todavía pueden colocarse de forma diferente en escritorio y móvil para un control más preciso. Para una vista general más amplia de cómo funcionan las secciones y los bloques del tema, consulta la documentación de Shopify sobre secciones y bloques

Ajustes principales

Estos ajustes afectan a cómo los visitantes interactúan con la navegación en toda la sección.

Interacción del menú

Elige si los submenús se abren al hacer clic o al pasar el cursor. Hacer clic suele ser la opción más segura cuando quieres una interacción más deliberada, mientras que pasar el cursor puede resultar más rápido en dispositivos con puntero.

Si tu navegación incluye estructuras de menú más profundas o contenido promocional en los desplegables, la apertura al hacer clic suele ser más fácil de controlar y menos propensa a cambios accidentales del menú.

Estado predeterminado del menú móvil

Puedes mostrar abierto de forma predeterminada el primer elemento del menú móvil. Esto funciona bien cuando el primer elemento de nivel superior conduce a una categoría o colección de alta prioridad, pero puede resultar recargado si ese primer elemento contiene demasiados enlaces.

Ajustes de color

Estos ajustes sustituyen las opciones de color generales del tema para el texto y los iconos de navegación dentro de esta sección. Son especialmente útiles cuando la navegación se sitúa sobre un fondo personalizado o necesita más contraste que el que ofrece el estilo predeterminado.

Tipos de bloque admitidos

Icono de cuenta
Button
Cart
Menú hamburguesa
Icon with text
Selectores de localización
Logo
Main menu
Mega menu
Search
Rich text
Iconos de redes sociales

Diseño de bloques y comportamiento compartido de los bloques

La mayoría de los bloques de esta sección usan la misma lógica de colocación. Su ajuste de diseño decide si se sitúan en el grupo izquierdo, central o derecho de la fila principal, y el orden de los bloques controla el orden dentro de cada grupo. Algunos bloques también pueden moverse a una fila independiente de ancho completo.

Los ajustes de alineación suelen ser secundarios. Son más importantes cuando un bloque ocupa el espacio disponible o se sitúa en una fila de ancho completo.

Diseño de escritorio y móvil

Muchos bloques te permiten elegir posiciones distintas para escritorio y móvil. Esto resulta útil cuando quieres un encabezado de escritorio más completo pero un diseño móvil más centrado que priorice el botón del menú, el logotipo, la búsqueda y el carrito.

Rellenar el espacio disponible

Algunos bloques pueden estirarse para ocupar el espacio restante en la fila de escritorio. Esto funciona mejor para bloques como el logotipo, los menús o la búsqueda cuando quieres que anclen el diseño y empujen otras acciones hacia fuera.

Visibilidad de los bloques

Muchos bloques incluyen sus propios controles de visibilidad. Úsalos cuando quieras que una utilidad se muestre de forma diferente según el dispositivo sin duplicar toda la sección.

Tipos de bloque clave

Menú hamburguesa

El bloque de menú hamburguesa es el activador móvil de la navegación. Es necesario para que la navegación principal funcione en móvil, así que debe considerarse esencial y no opcional.

Mantenlo en una posición clara y predecible en móvil, normalmente en el lado izquierdo o junto al logotipo. Evita ocultarlo en móvil a menos que tengas otra forma clara para que los visitantes abran la navegación.

Eliminar u ocultar el bloque de menú hamburguesa en móvil puede dejar a los visitantes sin una forma útil de abrir la navegación principal.

Logotipo

El Logotipo muestra la marca y recurre al nombre de tu tienda si no se ha establecido ninguna imagen de logotipo. Los controles de ancho independientes para escritorio y móvil te ayudan a mantener visible la marca sin saturar las pantallas más pequeñas.

Un logotipo móvil compacto suele ofrecer el resultado más limpio. Si dejas que el logotipo se extienda demasiado, puede desplazar fuera de la vista acciones más importantes.

Menú principal y mega menú

Usa el bloque de menú principal para la navegación desplegable estándar y el bloque de mega menú cuando necesites un desplegable más amplio y más editorial. En móvil, todos los bloques de Main menu y Mega menu se combinan en una sola interfaz de navegación.

Ambos tipos de bloque pueden incluir un banner y una barra de características, lo que los hace útiles tanto para merchandising como para la navegación. Mega menu también añade un control más sólido para la navegación estructurada, incluidos enlaces opcionales de nivel superior de “ver todo” dentro de los submenús.

Los bloques de menú y mega menú pueden incluir su propio medio de fondo, contenido en primer plano, botón e imagen de apoyo. Úsalo para campañas de temporada, colecciones destacadas o rutas clave de clientes que merezcan más énfasis.

Comportamiento en móvil

Como varios bloques basados en menús se fusionan en una única interfaz móvil, considera el escritorio y el móvil como experiencias relacionadas pero diferentes. Mantén claras las etiquetas de categoría y revisa el resultado móvil combinado si divides la navegación de escritorio entre varios bloques de menú.

Búsqueda

El bloque de búsqueda añade búsqueda en toda la tienda a la navegación. Puedes mostrarlo como un activador solo con icono o como un campo pequeño, con comportamiento móvil independiente para ahorrar espacio.

Si los resultados predictivos están activados, también puedes definir menús de resultados predeterminados y secundarios, además de contenido promocional opcional. Esto hace que la búsqueda sea más útil para el descubrimiento, no solo para consultas directas.

Bloques de utilidad y acción

Estos bloques añaden acciones de apoyo habituales alrededor de tu navegación principal.

Icono de cuenta para iniciar sesión y acceder a la cuenta
Carrito para acceder al carrito, con anulaciones de color opcionales
Botón para una acción destacada, como una promoción o un punto de entrada especial
Selectores de localización para cambiar país, moneda e idioma

Para encabezados compactos, suelen funcionar mejor los controles más pequeños o solo con icono. Cuando estos bloques compiten por espacio con menús y logotipos, usa diseños específicos para móvil o visibilidad de bloques para simplificar la experiencia en pantallas pequeñas.

Bloques informativos y sociales

Estos bloques son útiles cuando la navegación también actúa como una barra de utilidad o de mensajes.

Icono con texto para puntos de venta breves o señales de confianza
Texto enriquecido para contenido breve con formato
Iconos de redes sociales para enlaces sociales desde tus cuentas configuradas

Úsalos con moderación en la navegación principal. Funcionan mejor en una fila secundaria o en un diseño de ancho completo, donde respaldan el encabezado sin competir con las rutas principales de exploración.

Ajustes estándar de sección

Ajustes de fondo de sección

Usa los ajustes de fondo de sección para añadir un color, degradado, imagen o vídeo detrás de la navegación. Estos ajustes pueden crear un encabezado con una marca más fuerte, pero también pueden cambiar el espaciado percibido y el peso visual de la parte superior de la página.

Los controles de superposición ayudan a mantener el texto legible sobre fondos multimedia. Si utilizas distintos medios de fondo para móvil, comprueba ambos puntos de interrupción con cuidado porque la navegación es una zona de uso intensivo. Si estás ajustando estos ajustes en el editor, la documentación de Shopify sobre la personalización de secciones explica cómo se editan los ajustes de sección en el editor de temas.

Ajustes de espaciado

Usa los ajustes de espaciado para controlar el espacio por encima y por debajo del contenido de navegación. Pequeños cambios aquí pueden hacer que el encabezado se sienta más compacto o más amplio.

Como esta sección aparece en todo el sitio, un espaciado moderado suele ser más fácil de mantener de forma consistente. El espaciado predeterminado es ligero, lo que constituye un punto de partida práctico salvo que tu logotipo o la combinación de bloques necesiten más espacio.

Ajustes de separador

Usa los ajustes de separador para añadir una línea superior o inferior a la navegación. Esto es útil cuando quieres un límite más limpio entre el encabezado y el contenido circundante sin usar un tratamiento de fondo completo.

Si el color del separador se deja transparente, la sección utiliza el ajuste de color de borde más amplio. Establece un color de separador personalizado solo cuando el color de borde predeterminado no ofrezca suficiente contraste.

Ajustes de visibilidad

Usa los ajustes de visibilidad para mostrar u ocultar toda la sección según el tipo de dispositivo. Esto es especialmente útil cuando quieres patrones de encabezado distintos para escritorio y móvil.

Usa la visibilidad a nivel de bloque cuando solo tengan que cambiar unos pocos elementos. Usa la visibilidad a nivel de sección cuando toda la estructura de navegación deba sustituirse en un rango de dispositivos concreto.

Ajustes de ancho

Usa los ajustes de ancho para controlar tanto el ancho del contenido como el ancho general del contenedor de la sección. Esto es especialmente importante cuando tu navegación incluye fondos, diseños de menús amplios o filas de ancho completo.

El ancho del contenido es el control principal para determinar hasta dónde pueden extenderse los elementos de navegación, mientras que el ancho de la sección importa más cuando la sección tiene su propio tratamiento de fondo. El editor puede representar de forma insuficiente los cambios de ancho, así que comprueba la tienda online en vivo antes de finalizar. Para una vista rápida de los controles del editor disponibles, consulta la documentación de Shopify sobre el editor de temas

Notas de uso

Prioriza el acceso móvil. Mantén visible el bloque de menú hamburguesa y fácil de alcanzar para que los visitantes siempre puedan abrir la navegación en pantallas pequeñas.
Diseña por grupos de diseño. Usa primero la colocación de bloques a la izquierda, en el centro y a la derecha, y luego ajusta con el orden de los bloques y los ajustes de ocupación de espacio en lugar de depender solo de la alineación.
Mantén los menús fáciles de revisar. Si usas varios bloques basados en menús, revisa el menú móvil combinado para asegurarte de que las categorías sigan siendo claras y no estén demasiado fragmentadas.
Usa el contenido promocional de forma selectiva. Añade banners, botones y mensajes destacados solo cuando respalden la navegación en lugar de distraer de ella.
Comprueba el resultado en vivo. Revisa el contraste, el espaciado y el ancho en la tienda online después de añadir fondos, colores personalizados o cambios de ancho.
Revisa ambos estados de la búsqueda. Compara el estado vacío de búsqueda y la experiencia con consulta escrita para asegurarte de que los resultados predictivos, el contenido predeterminado y los elementos promocionales apoyen el mismo recorrido del cliente.
Prueba diseños separados por dispositivo. Revisa escritorio y móvil después de cambiar posiciones de bloques, visibilidad o alineación, ya que ambas vistas pueden comportarse de manera distinta.
Vigila las anulaciones de medios. Cuando añadas imágenes de fondo, vídeos o medios separados para escritorio y móvil, confirma que el recorte, la apariencia de reserva y la legibilidad sigan funcionando bien.

Align v2.0