Cómo personalizar el diseño del menú del encabezado en Shopify (Ajustes de tema, menús desplegables y mega menús)

Quick Answer: How to Customize the Header Menu Layout in Shopify

Open Online Store > Themes > Customize and select the Header section. There you can change the logo position, pick which menu appears, and (in themes like Dawn) choose a menu type: Dropdown, Mega menu, or Drawer. Build the menu itself in Content > Menus.

Para personalizar el diseño del menú del encabezado paso a paso:

1. Abra la configuración del tema: En su panel de administración de Shopify, vaya a Tienda online > Temas > Personalizar y haga clic en la sección Encabezado (Header).
2. Establezca la posición del logotipo y el diseño: Modifique la opción Logo position para ubicar el logo a la izquierda en la misma línea o centrado sobre el menú. (Nota: los nombres de los ajustes varían según el tema; en Dawn se denomina Logo position).
3. Vincule y anide su menú: Vaya a Contenido > Menús para estructurar sus enlaces con hasta 2 niveles de anidación, y asigne esa lista en Encabezado > Menú.
4. Elija el tipo de menú y verifique la vista móvil: En Menu type, seleccione Dropdown, Mega menu o Drawer, y controle la visualización móvil en Mobile logo position.

What “Header Menu Layout” Means in Shopify

Cuando los comerciantes se proponen personalizar el diseño del menú del encabezado, rara vez modifican un único ajuste aislado. En la arquitectura de Shopify, el diseño del encabezado depende de cuatro capas estructurales:

1. Identidad de marca y alineación (Logo position): Determina la ubicación del logotipo respecto a los enlaces de navegación, la barra de búsqueda y el carrito.
2. Lista de navegación asignada (Qué menú se muestra): El menú creado en el panel de administración que se conecta con la sección del encabezado.
3. Jerarquía estructural y tipo de menú (Profundidad & presentación): Cómo se despliegan las subcategorías en pantallas de escritorio: listas verticales estrechas, amplios paneles de varias columnas o cajones ocultos.
4. Reglas de visualización móvil (Diseño móvil & comportamiento del cajón): Cómo se adapta el encabezado a pantallas táctiles, incluyendo la posición de iconos y el panel deslizante.

Según la documentación oficial de Shopify, el menú principal predeterminado de la mayoría de los temas se modifica a través de los ajustes en la sección Encabezado. Sin embargo, los enlaces, sus nombres y las relaciones de niveles se gestionan en Contenido > Menús. En esa sección, el elemento de nivel superior admite hasta dos niveles de menús desplegables anidados (sumando tres niveles jerárquicos en total).

Dado que cada tema maneja los parámetros de diseño de manera diferente, esta guía toma como referencia el tema Dawn de Shopify. En Dawn, estos controles forman parte de los ajustes de esquema modulares, pero las etiquetas y opciones varían en otros temas. Si desea profundizar en modelos de diseño para ordenadores portátiles y puntos de corte flex, consulte nuestro análisis sobre modelos de diseño de encabezado y breakpoints.

Step 1: Change the Logo and Menu Position in the Theme Editor

La primera capa visible del encabezado es la alineación entre su logotipo y los enlaces del menú. Para modificarla en Shopify:

1. Inicie sesión en su panel de administración de Shopify.
2. Vaya a Tienda online > Temas.
3. En su tema activo o en una copia de prueba, haga clic en Personalizar.
4. En la barra lateral izquierda, seleccione la sección Encabezado (Header).

En Dawn, encontrará el ajuste denominado Logo position, que ofrece cuatro configuraciones principales:

• Middle left: Ubica el logotipo a la izquierda, en la misma fila horizontal que los enlaces del menú principal. Este formato en línea ahorra espacio vertical.
• Top left: Coloca el logotipo en la esquina superior izquierda y desplaza el menú a una línea dedicada inmediatamente inferior.
• Top center: Centra el logotipo en la parte superior y alinea el menú centrado justo debajo. Si desea el logo en el centro y el menú debajo, esta es la opción nativa exacta.
• Middle center: Centra el logotipo, con el menú a la izquierda y los iconos del encabezado a la derecha.

Tenga en cuenta que estas opciones corresponden a Dawn; los nombres de los ajustes y las posibilidades de diseño varían en otros temas. Algunos temas de terceros separan la alineación del logo y del menú en campos independientes o utilizan plantillas rígidas. Si su tema no incluye la disposición deseada, consulte la sección sobre qué hacer cuando el tema agota sus opciones.

Step 2: Choose the Header Menu and Build Nested Links

Cambiar la posición visual no servirá de nada si el encabezado está vinculado a una lista equivocada o si las subcategorías no se despliegan. En Shopify, los menús se crean en la administración general y luego se asignan al tema.

Pasos para crear y conectar su menú:

1. En el panel de Shopify, acceda a Contenido > Menús (como se explica en la Ayuda de Shopify).
2. Haga clic en Menú principal (o en Crear menú).
3. Añada las categorías principales como elementos de nivel superior.
4. Para crear submenús, arrastre los elementos secundarios hacia la derecha debajo del elemento principal hasta que aparezca una sangría.
5. Haga clic en Guardar menú.

De acuerdo con las especificaciones de Shopify, el elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados (un total de tres niveles). Todos los temas de Shopify están diseñados para mostrar los elementos anidados como menús desplegables a partir del menú principal.

Una vez guardada la jerarquía, regrese a Tienda online > Temas > Personalizar, haga clic en Encabezado, busque la tarjeta Menú, pulse Cambiar, elija la lista recién creada y guarde los cambios con Guardar. Para ver un paso a paso detallado sobre cómo organizar subcategorías sin errores de arrastre, revise nuestra guía para añadir un submenú a su menú de navegación.

Step 3: Pick Dropdown, Mega Menu, or Drawer

Una vez asignados los enlaces anidados, debe definir cómo se desplegarán las subcategorías en pantallas de escritorio. En Dawn, en la sección Encabezado, encontrará el ajuste Menu type con 3 opciones (las etiquetas varían según el tema):

Figura 1: Ilustración conceptual (Concept illustration) — Step 3: Pick Dropdown, Mega Menu, or Drawer

De acuerdo con las investigaciones de Nielsen Norman Group, los mega menús constituyen «una excelente opción de diseño para albergar un gran número de opciones». El NN/g enfatiza que los mega menús muestran todo de un vistazo, permitiendo descubrir visualmente los productos en lugar de tener que adivinar qué contiene cada título general.

Por el contrario, elegir Drawer en Dawn (controlado por la condición section.settings.menu_type_desktop == 'drawer' en el header.liquid de Dawn) oculta los enlaces horizontales tras un botón de menú en escritorio. Queda limpio, pero con un compromiso real: la investigación de NN/g de 2016 encontró que la capacidad de descubrimiento se reduce casi a la mitad al ocultar la navegación principal de un sitio. Si su tienda tiene un catálogo amplio, reserve el cajón para móvil y use un menú abierto en escritorio. Para diseñar columnas de enlaces, encabezados y mosaicos equilibrados, consulte nuestra guía sobre mejores prácticas de diseño para mega menús.

Show Menu Links Directly in the Header Instead of a Dropdown

Una pregunta habitual, también en un hilo de la Shopify Community sobre el tema Sense, es cómo mostrar los enlaces de primer nivel directamente en el encabezado, sin desplegable.

En Shopify, los menús desplegables no se desactivan con un interruptor del tema; dependen de la jerarquía de los enlaces. La documentación oficial de Shopify aclara que todos los temas muestran los elementos anidados como menús desplegables. Si un elemento tiene enlaces secundarios con sangría en Contenido > Menús, el tema generará automáticamente una lista desplegable.

Para mostrar los enlaces directamente sobre la barra del encabezado:

1. Abra el panel de Shopify y vaya a Contenido > Menús.
2. Seleccione el menú activo del encabezado.
3. Revise la lista. Si algún elemento aparece con sangría bajo otro, arrástrelo hacia la izquierda hasta alinearlo con el nivel superior.
4. Asegúrese de que todos los enlaces queden en el nivel raíz.
5. Haga clic en Guardar menú.

Al previsualizar su tienda, el tema mostrará estos enlaces en fila a lo largo de la barra de navegación horizontal, sin activar ningún cuadro desplegable.

Tenga en cuenta los límites de ancho. NN/g aconseja que, si un sitio tiene 4 enlaces de navegación de primer nivel o menos, se muestren como enlaces visibles. Con muchos enlaces de primer nivel, la fila puede saltar a dos líneas o chocar con el logotipo en portátiles más estrechos, así que previsualice varios anchos. Si su catálogo necesita muchos destinos, agrúpelos bajo encabezados padre, por ejemplo con un mega menú, en lugar de saturar la barra principal.

Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

Un diseño de menú de encabezado que se ve equilibrado en un monitor de escritorio puede romperse fácilmente en un teléfono. Como el espacio móvil es limitado, los temas gestionan la navegación móvil con diseños responsivos específicos.

Figura 2: Ilustración conceptual (Concept illustration) — Mobile Header Menu Layout: Hamburger, Drawer, and Bottom Tab Bar

En la sección Encabezado de Dawn, los comerciantes cuentan con el ajuste Mobile logo position:

• Center: Centra el logotipo en la barra de encabezado móvil.
• Left: Alinea el logotipo a la izquierda de la barra de encabezado móvil.

Las etiquetas varían según el tema. Por ejemplo, en temas de terceros como Stiletto, el menú móvil usa ajustes de la sección Header. En muchos temas, los enlaces de navegación móvil se pliegan en un cajón lateral que se abre al tocar el icono de hamburguesa.

Sin embargo, depender por completo de un cajón de hamburguesa oculto tiene un coste. La investigación de Nielsen Norman Group de 2016 encontró que la capacidad de descubrimiento se reduce casi a la mitad al ocultar la navegación principal de un sitio.

Los cajones ocultos siguen siendo útiles para catálogos grandes, pero también puede mantener visibles algunas páginas clave con una barra de pestañas fija inferior (por ejemplo Home, Shop, Search y Cart) al alcance del pulgar, y dejar las categorías más profundas para el cajón. Para configurar estructuras de enlaces independientes por pantalla, consulte nuestro tutorial sobre cómo crear menús separados para escritorio y móvil.

When Your Theme Runs Out of Options: Code Edits vs a Menu App

Tarde o temprano, cualquier comerciante alcanza el límite de opciones del editor de temas: desear cinco columnas en vez de cuatro en el mega menú, un menú dividido a ambos lados de un logo centrado o banners visuales dentro del cajón móvil. Ante esta situación, se plantean dos caminos: modificar el código Liquid o instalar una aplicación especializada.

Before you edit code: duplicate the theme

Si decide modificar directamente los archivos del tema (como sections/header.liquid o las hojas de estilo CSS), nunca trabaje sobre el tema en vivo. La documentación de Shopify recomienda crear una copia de respaldo para poder descartar los cambios y reiniciar si se produce un error.

Pasos para duplicar su tema con seguridad:

1. En el panel de Shopify, vaya a Tienda online > Temas.
2. Localice su tema actual, abra su menú de acciones y seleccione Duplicate.
3. Renombre la copia indicando que es una versión de prueba de código.
4. Realice y verifique todas las modificaciones en esa copia antes de publicarla.

The hidden cost of custom theme edits

Modificar el código directamente implica un mantenimiento continuo. La documentación de Shopify advierte de que, al actualizar un tema, sus cambios de código pueden eliminarse en la copia actualizada. Si reescribe header.liquid para cambiar la alineación, las media queries de CSS o las animaciones del cajón, prevea revisar y volver a aplicar esos cambios tras cada actualización del tema.

Si sus necesidades de diseño superan los ajustes nativos, puede considerar un tema pensado para navegación más compleja, o una aplicación que funcione junto a su tema.

Common Header Menu Problems and Fixes

Al personalizar el encabezado, pequeños desajustes de configuración pueden hacer que los enlaces no se muestren correctamente. Utilice esta tabla de diagnóstico para solucionar incidencias comunes:

Trade-offs: When Not to Change Your Header Layout

Rediseñar el encabezado no siempre es la decisión más conveniente. Antes de acometer cambios, valore las siguientes implicaciones prácticas:

• Un catálogo pequeño no necesita mega menú: si su tienda solo tiene unas pocas categorías simples, un panel ancho de mega menú puede dejar más espacio del necesario. Un desplegable de una columna o una fila plana de enlaces suele bastar.
• Un cajón en escritorio reduce la visibilidad de la navegación: elegir Drawer en escritorio da un aspecto limpio, pero la investigación de NN/g de 2016 encontró que ocultar la navegación principal reduce casi a la mitad la capacidad de descubrimiento. Resérvelo para tiendas donde el descubrimiento depende del storytelling en la página.
• Las ediciones Liquid personalizadas generan trabajo en cada actualización: según la documentación de Shopify, las modificaciones de header.liquid o de CSS personalizado pueden perderse al actualizar el tema. Si nadie puede mantener las ediciones entre versiones, prefiera los ajustes estándar del tema o una aplicación.
• Instalar apps implica mayor supervisión administrativa: Cada aplicación externa añade un panel de control que debe gestionarse. Incorpore herramientas solo cuando las opciones nativas de su tema no consigan organizar su catálogo.

Where Navi+ Fits

Cuando las opciones de encabezado de su tema alcanzan su límite, Navi+ es una forma de añadir funciones de navegación junto a su tema.

Usted crea el menú en la aplicación Navi+ y lo activa como app embed en el editor de temas. El menú se dibuja en el navegador junto al encabezado propio de su tema, por lo que no necesita editar header.liquid:

• Desktop Mega Menu: muestra un desplegable completo con columnas, imágenes y enlaces destacados.
• Mobile Menu: un menú móvil deslizante que muestra toda su navegación sin salir de la página.
• Tab Bar: una barra de pestañas fija inferior para móvil que mantiene unos pocos destinos clave al alcance del pulgar.

Los menús de Navi+ también llegan hasta tres niveles. Para decidir qué tipo de menú encaja con su catálogo, consulte nuestra guía: elegir el tipo de menú adecuado en Shopify.

If your theme’s Header section stops at a basic dropdown, Navi+ lets you add a Desktop Mega Menu, a Mobile Menu, or a bottom Tab Bar alongside your theme — try it on a duplicate theme first and keep what works.

Action Checklist

Utilice esta lista de 8 puntos operativos para planificar, configurar y auditar el diseño del menú del encabezado:

• Duplicar el tema: Genere una copia de respaldo en Tienda online > Temas antes de modificar el diseño del encabezado.
• Configurar la alineación del logo: En Personalizar > Encabezado, elija la Logo position adecuada (ej. Top center o Middle left en Dawn; los nombres de los ajustes varían según el tema).
• Estructurar la jerarquía de enlaces: En Contenido > Menús, organice la lista de navegación arrastrando los subelementos con sangría (máximo 2 niveles anidados bajo el elemento principal).
• Asignar el menú en el encabezado: Compruebe en Encabezado > Menú que la sección apunte a la lista de enlaces correspondiente.
• Elegir el tipo de menú para escritorio: Seleccione Dropdown, Mega menu o Drawer en función de la extensión de su catálogo.
• Comprobar la alineación móvil: Revise la presentación en dispositivos móviles y ajuste Mobile logo position (Center o Left).
• Auditar la ergonomía táctil: Pruebe el cajón móvil en un teléfono real y valore añadir una barra inferior para mantener visibles las páginas clave.
• Verificar en diferentes resoluciones: Pruebe en ordenadores, portátiles y tabletas para asegurarse de que los enlaces no se corten ni tapen el logo.

FAQ

How many levels can a Shopify header menu have?

El elemento de nivel superior de un menú de Shopify puede tener hasta dos niveles de menús desplegables anidados por debajo, lo que conforma una estructura máxima de tres niveles jerárquicos.

How do I make a dropdown in the Shopify header?

En el panel de Shopify, vaya a Contenido > Menús, elija su lista, arrastre los elementos secundarios hacia la derecha debajo de un elemento principal para que queden con sangría y guarde los cambios.

How do I put the logo in the center with the menu below?

En el tema Dawn, acceda al editor de la sección Encabezado y en Logo position seleccione Top center. Esta opción centra su logotipo y sitúa el menú justo debajo. (Los nombres de los ajustes varían en otros temas).

Can I show menu links in the header instead of a dropdown?

Sí. Los temas de Shopify muestran automáticamente como menú desplegable cualquier elemento con enlaces anidados. Para que los enlaces aparezcan directos en la barra horizontal, coloque todos los elementos en el nivel superior en Contenido > Menús.

Can I change the menu layout only on mobile?

Sí. Dawn ofrece el ajuste específico Mobile logo position (Center o Left) en la sección Encabezado. La versión móvil suele compartir la lista de enlaces del escritorio dentro de un cajón lateral, aunque algunos temas disponen de ajustes móviles propios en el Encabezado.

Should I edit header.liquid?

Edite header.liquid solo después de crear una copia de seguridad de su tema. Tenga en cuenta que sus cambios de código pueden eliminarse al actualizar a una versión más reciente del tema.

Sources

• Shopify Help Center: Drop-down menus — Documentación sobre límites de anidación, asignación de encabezados y gestión en Contenido > Menus.
• Shopify Help Center: Duplicating themes — Directrices oficiales que recomiendan respaldar el tema antes de realizar cambios de código.
• Shopify Help Center: Editing theme code — Advertencia sobre la eliminación de cambios personalizados de código durante actualizaciones del tema.
• Shopify Dawn GitHub Repository: en.default.schema.json — Esquema oficial que define los ajustes nativos Logo position, Menu type y Mobile logo position.
• Shopify Dawn GitHub Repository: sections/header.liquid — Archivo de plantilla que implementa los tipos de menú para escritorio y la lógica de cajones laterales.
• Nielsen Norman Group: Mega Menus Work Well Anywhere Navigation Needs to Go — Estudio sobre la conveniencia de los mega menús para presentar una amplia variedad de opciones.
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation Hurt Metrics (2016) — Investigación que evidencia cómo ocultar la navegación principal reduce su visibilidad casi a la mitad.
• Fluorescent Theme Documentation: Stiletto Header — Documentación técnica que ilustra la configuración de encabezados móviles y de escritorio en temas comerciales.
• Shopify Community: How to change header-menu layout Sense theme — Debate de usuarios sobre cómo colocar enlaces directos en el encabezado sin desplegables.