Cómo adaptar un menú de navegación al tema de tu tienda Shopify (Colores, Fuentes, Menú móvil)

Un menú de navegación nunca debe parecer un parche añadido a última hora. Cuando los clientes exploran tus colecciones, la tipografía, los colores, el espaciado y los bordes redondeados de los enlaces deben integrarse de forma natural con el resto de tu tienda. Sin embargo, muchos comerciantes de Shopify notan que, mientras sus imágenes principales lucen cuidadas, la barra de navegación desentona: muestra fuentes genéricas, colores de fondo discordantes, bordes toscos o un menú móvil sin ningún tipo de estilo.

El principio fundamental es directo: un menú coincide con tu tema cuando reutiliza los valores que tu tema ya utiliza. En lugar de inventar nuevos códigos hexadecimales o elegir fuentes sobre la marcha, revisa primero los tokens de diseño de tu tema, anótalos en una hoja de referencia y aplica esa misma información al encabezado de escritorio, al cajón móvil y a los menús de aplicaciones de terceros.

Quick Answer: How to Match a Navigation Menu to Your Store Theme

Para que un menú de navegación encaje con el tema de tu tienda, copia los valores que tu tema ya usa: su esquema de color, sus fuentes, el radio de esquina y el espaciado. Aplícalos primero con los ajustes del encabezado, luego cubre las diferencias con un poco de CSS personalizado en un tema duplicado, y revisa también el cajón móvil.

Sigue estos cinco pasos prácticos:

1. Lee los tokens de diseño del tema: Revisa la Configuración del tema para anotar los esquemas de color activos, las familias tipográficas y los radios de esquina de los botones.
2. Aprovecha los ajustes nativos del encabezado: Elige tu menú, asigna el esquema de color correspondiente y prueba las opciones de diseño integradas.
3. Cierra brechas con CSS usando variables del tema: Añade reglas breves en la sección Encabezado haciendo referencia a variables nativas en lugar de valores fijos.
4. Armoniza el cajón móvil: Asegúrate de que el panel deslizante, el icono de hamburguesa, las fuentes y los divisores sigan la misma paleta que el escritorio.
5. Sincroniza los menús de aplicaciones: Introduce los valores de tu hoja de referencia en los ajustes de diseño de tus aplicaciones de menús externos.

Ten en cuenta que los cambios realizados en la Configuración global del tema se aplican a toda tu tienda online. Por ello, modificar únicamente el menú de navegación requiere CSS personalizado a nivel de sección o la configuración de una app especializada.

What “Matching Your Theme” Means: The Theme Match Sheet

La cohesión visual hace que una tienda se perciba como terminada. Nuestra guía sobre diseño de menús e identidad de marca recoge los principios de marca que hay detrás; la guía que estás leyendo es la parte práctica y técnica. Un menú bien adaptado no solo funciona bien; se siente como una extensión natural de la tienda.

Para conseguir esta integración sin depender del ensayo y error, elabora una Hoja de coincidencia del tema (Theme Match Sheet). Esta tabla recopila las siete propiedades visuales clave de tu tema, indicando dónde localizarlas y cómo trasladarlas a tu menú:

Al contrastar tu navegación con esta guía, concéntrate en cuatro acciones concretas:

• Copy theme colors: Extrae el esquema de color exacto asignado a la sección del encabezado en lugar de elegir tonos al azar.
• Reuse theme fonts: Asigna la familia tipográfica principal de tu tienda directamente a tus elementos de navegación.
• Match corner radius: Asegúrate de que los contenedores desplegables y botones compartan la misma curvatura que los botones del storefront.
• Mobile menu match: Traslada tu esquema de color, tipografía y divisores al cajón móvil para que los usuarios de smartphones disfruten del mismo diseño.

Step 1: Read Your Theme’s Design Tokens

Un «token de diseño» es simplemente una decisión de diseño con nombre propio: un valor guardado para un color, tipografía, margen o radio determinado. Al recopilar estos valores directamente desde tu tema de Shopify, evitas discrepancias estéticas.

Colors and color schemes

En el panel de administración de Shopify, ve a Tienda online > Temas, haz clic en Personalizar y abre la pestaña Configuración del tema. Abre el panel Colores.

Los temas de Shopify organizan sus paletas mediante un Color scheme (esquema de color): un conjunto predeterminado de colores para fondo, texto y botones. En el editor de temas de Shopify, puedes gestionar hasta 21 esquemas de color. Identifica qué esquema está asignado a tu sección Encabezado y anota los tonos de fondo y de texto.

Fonts and text size

A continuación, abre Configuración del tema > Tipografía. Aquí verás las familias de fuentes seleccionadas para Encabezados y Cuerpo, además de sus grosores.

Apunta estas opciones. La documentación oficial del Centro de ayuda de Shopify aclara que los cambios que realizas en la sección Configuración del tema se aplican a toda tu tienda online. Si modificas las fuentes aquí, cambiarán también todos los títulos y párrafos de tu tienda. Además, la documentación de Shopify sugiere considerar las fuentes del sistema para tu tipografía.

Corner radius and spacing

Revisa los ajustes de botones, tarjetas y campos de entrada en la Configuración del tema. Muchos temas incluyen un ajuste de redondeo de esquinas, llamado con frecuencia Button radius; el nombre exacto varía según el tema.

Comprueba si tus botones tienen esquinas rectas, un redondeo suave o una forma de píldora totalmente redondeada. Cuando los menús desplegables y las insignias comparten esta misma curvatura, la navegación se percibe pulida. Fíjate también en el espacio alrededor de tus botones y secciones para decidir si el espaciado de los enlaces debe ser compacto o amplio.

Reading CSS variables in your browser

Para comprobar cómo almacena tu tema estas decisiones en el código, utiliza las herramientas para desarrolladores de tu navegador:

1. Abre tu tienda online en Chrome, Firefox o Safari.
2. Haz clic derecho sobre el encabezado y selecciona Inspeccionar.
3. Selecciona el elemento <html> o <body> y revisa el panel Styles.

Los temas modernos de Shopify como Dawn declaran los ajustes del personalizador como variables CSS directamente en theme.liquid. Dawn asigna variables como:

• --font-body-family: refleja la fuente elegida para el texto del cuerpo.
• --font-heading-family: representa la fuente de los títulos principales.
• --color-foreground: contiene el color del texto activo, guardado como tres números (rojo, verde y azul), por lo que se usa así: rgb(var(--color-foreground)).
• --buttons-radius: traslada el valor de redondeo de botones definido en el tema.

Al identificar los tokens de Color scheme, Typography y Button radius, puedes apoyarte en el propio motor del tema en lugar de escribir códigos fijos. Como los nombres de variables varían según el tema, verifica siempre tus selectores en DevTools.

Concept illustration: Panel de configuración del tema junto a una hoja de coincidencia que recopila esquema de color, tipografía y radio de botones para el menú.

Step 2: Use the Header Settings Your Theme Already Has

Antes de escribir código personalizado o instalar aplicaciones complementarias, exprime al máximo los ajustes nativos disponibles en el personalizador de tu tema de Shopify.

Connecting your menu and color scheme

1. En el editor de temas, abre la sección Encabezado.
2. Busca el ajuste del menú (su etiqueta varía según el tema) y comprueba que tu lista de enlaces está seleccionada. Los menús se crean en Tienda online > Navegación, donde puedes anidar enlaces hasta tres niveles de profundidad.
3. Busca un ajuste de esquema de color en los controles de la sección Encabezado (su etiqueta varía según el tema) y elige el que anotaste en tu hoja de referencia.
4. Comprueba la vista previa: según tu tema, el encabezado y el menú pueden adoptar ahora los colores de fondo y de texto de ese esquema.

Evaluating header menu layouts

Los temas de Shopify disponen de varios formatos de presentación. Según la documentación de Shopify, el menú principal y los menús desplegables se muestran en diferentes ubicaciones según el tema, y un elemento de nivel superior puede tener hasta dos niveles de menús desplegables anidados.

Dependiendo de tu tema, podrás ajustar:

• Tipo de menú: Lista desplegable tradicional, mega menú en columnas o cajón lateral.
• Posición en escritorio: Arriba a la izquierda, centrado sobre el logotipo o junto al buscador.
• Encabezado fijo (Sticky): Barra de navegación fija en la parte superior mientras el cliente se desplaza por la página.

Native customizer boundaries

Los controles nativos son prácticos pero tienen límites claros:

• Los nombres de las opciones varían entre temas; algunos ofrecen control de espaciado para enlaces y otros no incluyen ninguno.
• Dado que la tipografía de la Configuración del tema afecta a toda la tienda, no es posible cambiar únicamente la fuente de los enlaces del menú mediante ajustes estándar sin alterar el resto de textos.

Cuando las opciones predeterminadas no cubren tu hoja de coincidencia, es momento de recurrir a CSS personalizado.

Step 3: Close the Gaps with Custom CSS That Reuses Theme Variables

El CSS personalizado te permite afinar la apariencia de tu menú sin necesidad de alterar los archivos de plantilla Liquid. Redactar reglas breves y seguras garantiza un mantenimiento sencillo a largo plazo.

Duplicate the theme first

Antes de añadir CSS personalizado, crea siempre una copia de seguridad de tu tema.

La documentación oficial del Centro de ayuda de Shopify sobre duplicar temas recuerda que es una buena práctica hacer una copia de seguridad para poder descartar los cambios y volver a empezar si es necesario. En el panel de Shopify, ve a Tienda online > Temas, abre el menú de acciones junto a tu tema activo y selecciona Duplicar. Haz primero tus ajustes de estilo en esta copia, comprueba el resultado y publícala cuando estés listo.

Where custom CSS goes and its limits

Shopify dispone de dos espacios para ingresar CSS personalizado en el editor:

1. CSS global del tema: En Configuración del tema > CSS personalizado, afectando a toda la tienda.
2. CSS de sección: Al final del panel de propiedades de la sección, en CSS personalizado (por ejemplo, en la sección Encabezado).

Ten en cuenta las restricciones de caracteres de Shopify:

• Las reglas CSS que afectan a todo el tema tienen un límite de 1500 caracteres.
• Las reglas CSS que afectan a una sección específica tienen un límite de 500 caracteres.
• Cuando agregas CSS a una sección, su ámbito queda limitado automáticamente a esa sección.
• El CSS global del tema no se aplica a la pantalla de pago (checkout).

Dado que el menú reside dentro del encabezado, colocar reglas cortas en el campo de CSS de la sección Encabezado es la opción más limpia y segura.

Use var() instead of hard-coded values

Evita ingresar códigos hexadecimales fijos o nombres de fuentes estáticos en el CSS. Si más adelante cambias de imagen corporativa, esas reglas quedarán desfasadas. En su lugar, lee las variables CSS del tema con la función var(), tal como documenta MDN:

.header__menu-item {
  font-family: var(--font-heading-family);
  color: rgb(var(--color-foreground));
}

(Nota: las clases y variables anteriores corresponden al tema Dawn; comprueba las tuyas en DevTools).

Al emplear var(--font-heading-family) y rgb(var(--color-foreground)), los enlaces del menú siguen a tu tema cuando modificas colores o tipografías en la configuración del tema. Para revertir los cambios, solo debes borrar el bloque de código CSS o volver a tu copia de seguridad.

Step 4: Make the Mobile Menu Match, Not Just the Desktop Menu

Un error frecuente consiste en perfeccionar el encabezado de escritorio y dejar el cajón móvil sin estilo o desentonado.

Why mobile drawers diverge

En muchos temas de Shopify, los menús de escritorio y móvil no comparten la misma estructura HTML. Los enlaces de escritorio suelen disponerse en una fila horizontal en el encabezado, mientras que la navegación móvil se genera dentro de un panel lateral deslizante o una capa oculta.

Al ser a menudo un elemento independiente, el CSS escrito para los enlaces de escritorio puede no llegar al cajón móvil. Además, el color del icono de hamburguesa suele heredar el color del texto del encabezado, así que el propio cajón puede necesitar su fondo, color de texto y divisores propios.

Aligning drawer styling

Para asegurar una experiencia coordinada en dispositivos móviles, revisa que tu menú móvil incluya:

• Same font family: Los enlaces del cajón deben usar la misma fuente que el encabezado de escritorio.
• Same text color: Las categorías y subenlaces deben reflejar el color de texto del esquema del encabezado.
• Same divider style: Las líneas que separan los elementos móviles deben coincidir con el tono de los bordes de tus tarjetas de producto.

Estudios de usabilidad de Nielsen Norman Group (Pernice & Budiu, 2016) demuestran que la navegación oculta (como los menús de hamburguesa) es menos localizable que la navegación visible. Puesto que los usuarios móviles deben tocar un botón para ver los destinos, los elementos visibles y la superficie del panel deben ser claros, legibles y coherentes con la marca.

Para profundizar en la jerarquía en pantallas pequeñas, consulta nuestra guía sobre mejores prácticas para menús móviles tipo cajón. Prueba siempre tu menú en un teléfono físico.

Concept illustration: El encabezado de escritorio y el cajón móvil usan la misma familia tipográfica, color de texto y estilo de divisores del tema.

Step 5: Match a Menu Added by an App (Tab Bar, Mobile Menu, Mega Menu)

Cuando tu catálogo supera la capacidad de los menús desplegables estándar, puedes instalar una aplicación de navegación para añadir una barra de pestañas fija inferior, un mega menú o un botón flotante.

Dado que los menús de apps se añaden a tu tienda por separado de tu tema, es posible que no sigan automáticamente los ajustes de color y fuente del tema. Si no se configuran, un menú de app puede verse distinto del resto de tu tienda.

Applying your theme match sheet to app settings

Usa tu hoja de referencia para trasladar los parámetros al panel de control de la app:

1. Tipografía: Selecciona la familia y grosor que coincidan con los títulos o el texto de tu tema.
2. Colores: Introduce los códigos hexadecimales del encabezado para fondos, textos y estados activos.
3. Radio de esquina: Ajusta el redondeo de los paneles y botones en sintonía con el radio de botones del tema.
4. Divisores: Iguala los grosores y tonos de bordes con los de las tarjetas de producto de tu tienda.

Keeping custom CSS inside the app

Si el menú de la app requiere ajustes de CSS, introduce esas reglas directamente en el campo de CSS de la propia aplicación, no en los archivos de tu tema.

Si la app guarda su CSS fuera de los archivos de tu tema, actualizar el tema o cambiarlo por otro no elimina ese estilo. Comprueba cómo gestiona esto tu app antes de confiar en ello.

Si estás configurando navegación con apps por primera vez, lee nuestra guía paso a paso sobre cómo comenzar con una aplicación de creación de menús.

Common Mismatches and How to Fix Them

Utiliza esta tabla de diagnóstico para identificar inconsistencias visuales habituales y aplicar su solución:

Trade-offs: When Not to Restyle the Menu

Cuidar la presentación es imprescindible, pero retocar el estilo no siempre es la respuesta adecuada:

Problemas estructurales del catálogo

Si tus visitantes no encuentran los productos debido a una categorización confusa o sobrecargada, cambiar colores o tipografías no solucionará nada. Un buen aspecto no arregla una mala arquitectura de información. Consulta los límites de los menús de temas de Shopify para evaluar si tu catálogo requiere reorganizar colecciones antes de hacer cambios estéticos.

Mantenimiento y límites de caracteres del CSS del tema

Introducir CSS en el tema añade deuda técnica. Dado que el CSS global está limitado a 1500 caracteres y el de sección a 500 caracteres, las reglas complejas agotan el espacio con rapidez. En cada actualización importante del tema, el código deberá revisarse y migrarse manualmente.

Efectos colaterales en la tipografía global

Cambiar la tipografía en la Configuración del tema altera las fuentes de todas las fichas de producto, títulos de colección y párrafos de tu tienda. La documentación de Shopify sugiere considerar las fuentes del sistema, así que conviene pensarlo dos veces antes de añadir una fuente aparte solo para los enlaces del menú.

Where Navi+ Fits

Si tu tema actual de Shopify no incluye formatos avanzados—como una barra de pestañas para móviles, un mega menú en columnas, un cajón móvil deslizante, un menú de iconos o botones flotantes—Navi+ ofrece un conjunto de herramientas específico para crearlos.

En el panel de Navi+, la pestaña Design proporciona controles visuales para ajustar colores de fondo, tipografía (familia y tamaño) e iconos o imágenes. Los comerciantes pueden introducir directamente los datos de su hoja de referencia.

Asimismo, Navi+ incorpora un editor de CSS personalizado donde cada regla recibe un prefijo automático por menú y se almacena fuera de los archivos del tema de Shopify. Así, actualizar tu tema o cambiarlo por otro nunca afectará a los estilos de tus menús creados en Navi+.

Ten presentes los límites técnicos de nuestra herramienta:

• Los menús de Navi+ admiten jerarquías de hasta 3 niveles.
• La pestaña Design ofrece controles visuales nativos para los primeros 2 niveles.
• Asignar tamaños de fuente o dimensiones de iconos independientes para los niveles 2 y 3 requiere añadir pequeñas reglas en el panel de CSS de la app.

If your theme doesn’t have the menu type you need, such as a bottom Tab Bar or a mega menu, Navi+ lets you build one and set its fonts and colors from your theme match sheet in the Design tab — you can try it on a duplicate theme first.

Action Checklist Before You Publish

Repasa estos 10 puntos antes de publicar los cambios de tu menú:

• Tema duplicado: Copia de respaldo creada para poder revertir cambios fácilmente si hace falta.
• Hoja de referencia completada: Datos de esquema de color, fuentes, grosores y radios de botones debidamente registrados.
• Esquema de encabezado asignado: Verificado que la sección Encabezado aplica el esquema de color corporativo correcto.
• Fuentes coordinadas: Confirmado que los enlaces del menú usan la fuente de Títulos o Cuerpo configurada en el tema.
• Contraste WCAG comprobado: Verificado que la relación de contraste alcanza al menos 4.5:1 en texto normal y 3:1 en texto grande.
• Bordes redondeados alineados: Contenedores desplegables, insignias y botones coordinados con la curvatura de botones de la tienda.
• Comportamiento en hover y foco revisado: Respuesta visual clara al pasar el ratón y anillo de enfoque visible para teclado.
• Cajón móvil probado en teléfono real: Comprobada la visibilidad del icono, fondo del cajón, líneas y respuesta táctil en un móvil físico.
• Menús de apps sincronizados: Valores de la hoja de referencia trasladados a barras de pestañas, mega menús o paneles de apps externas.
• CSS conciso y seguro: Reglas breves (dentro de los límites de 500/1500 caracteres) que aprovechan variables del tema mediante var().

FAQ

Can I change only the menu font without changing my whole store’s font?

Los ajustes de tipografía del tema se aplican a toda la tienda. Para cambiar únicamente la fuente del menú, añade una regla CSS acotada en la sección Encabezado del editor o define la fuente en una aplicación de menú dedicada.

Where do I add custom CSS in Shopify?

En el editor de temas puedes ingresar CSS personalizado para todo el tema (límite de 1500 caracteres) o para una sección específica como el Encabezado (límite de 500 caracteres). El CSS de sección solo actúa en esa parte y el global no afecta a la pantalla de pago.

Why does my mobile menu look different from my desktop menu?

Los temas construyen el cajón móvil como un elemento HTML independiente al que no suelen llegar los estilos de escritorio. Aunque el icono de hamburguesa suele heredar el color del texto del encabezado, el fondo y la tipografía del cajón deben configurarse por separado.

How do I keep my menu matching after I change theme colors later?

Haz referencia a las variables CSS del tema con la función var() (como var(--font-heading-family) o var(--font-body-family)) en lugar de usar códigos fijos. De este modo, el menú sigue tus ajustes cuando cambies colores o fuentes en el tema.

What contrast should menu text have?

De acuerdo con las Pautas de Accesibilidad para el Contenido Web (WCAG 2.1), el texto del menú debe mantener una relación de contraste mínima de 4.5:1 para texto estándar y de 3:1 para texto de gran tamaño respecto al fondo.

Should I edit CSS or use an app?

Comienza siempre con los ajustes nativos del encabezado y utiliza pequeñas reglas CSS para detalles puntuales. Si tu tienda requiere formatos que el tema no incluye—como barras de pestañas móviles o mega menús avanzados—utiliza una aplicación y comprueba que guarde sus estilos fuera de los archivos del tema para que sobrevivan a los cambios de tema.

Sources

• Shopify Help Center: Customizing Theme Settings
• Shopify Help Center: Adding Custom CSS to Your Theme
• Shopify Help Center: Duplicating Themes
• Shopify Help Center: Set up Drop-Down Menus in Your Online Store
• Shopify Developer Documentation: Navigation and Search Architecture
• W3C Web Accessibility Initiative: WCAG 2.1 Understanding Contrast (Minimum)
• MDN Web Docs: Using CSS Custom Properties (Variables)
• Nielsen Norman Group: Hamburger Menus and Hidden Navigation (Pernice & Budiu, 2016)
• Shopify Dawn Theme Repository: theme.liquid layout configuration
• Navi+ Help Center: Using Built-in Settings or Custom CSS
• Fudge: How to Change the Mobile Menu in Shopify