Cómo hacer que el menú del encabezado y del pie de página sean fijos en Shopify (sin editar código)

Respuesta rápida: cómo hacer que el menú del encabezado y del pie de página sean fijos

Para fijar el encabezado, abre Configuración del tema > Encabezado y elige una opción de Sticky header (Dawn ofrece Ninguno, Al desplazarse hacia arriba, Siempre y Siempre, reducir tamaño del logotipo). Como la mayoría de temas no tienen menú de pie fijo, añade una barra de pestañas abajo mediante CSS o una app, y pruébala en un teléfono real.

Sigue esta secuencia de tres pasos para fijar la navegación en ambos extremos de la pantalla:

1. Activar el ajuste del encabezado: En el panel de control de Shopify, ve a Tienda online > Temas > Personalizar. Abre la sección Encabezado (o Configuración del tema > Encabezado), selecciona el comportamiento deseado de Sticky header y guarda los cambios.
2. Añadir una barra de pestañas inferior para móvil: Dado que los temas estándar consideran el pie de página como el final estático del sitio y no como una barra de navegación, añade un menú inferior fijo mediante CSS o una app de menús.
3. Verificar en dispositivos físicos: Prueba tu tienda en un teléfono inteligente real para cerciorarte de que ni el encabezado ni la barra inferior tapan títulos, botones de compra o zonas de gestos del sistema.

Encabezado fijo frente a menú de pie fijo: qué hace cada uno

Un sticky header (encabezado fijo) permanece anclado en el límite superior de la ventana del navegador mientras el visitante se desplaza por la página. Garantiza que las herramientas esenciales de la tienda—como el logotipo, los enlaces de categorías, el buscador en vivo y el icono del carrito—estén siempre accesibles sin obligar a deslizar de regreso hasta la parte superior de un catálogo extenso.

En cambio, un menú de pie de página fijo no es el pie de página convencional que contiene políticas, enlaces legales y sellos de tarjetas de pago. En el diseño web moderno, este término se refiere a una barra de navegación inferior móvil (bottom tab bar) anclada al borde inferior de la pantalla, que reúne unas pocas acciones prioritarias (Inicio, Buscar, Menú lateral, Favoritos y Carrito) al alcance del pulgar.

Diferencia entre sticky y fixed en CSS

En CSS, position: sticky mantiene un elemento dentro del flujo normal del documento hasta que el usuario se desplaza hasta un umbral establecido. De acuerdo con MDN Web Docs sobre position en CSS, un elemento sticky requiere al menos un umbral direccional (top, bottom, left o right) para activarse. Como preserva su espacio original en el diseño antes de fijarse, no altera el flujo de la página.

Por el contrario, position: fixed extrae por completo al elemento del flujo normal del documento. Como explica MDN Web Docs, no se reserva ningún espacio para él en la maquetación, provocando que los bloques posteriores suban y se oculten detrás del elemento fijo. Además, ambas propiedades generan un nuevo contexto de apilamiento (stacking context), afectando el comportamiento de las capas y valores de z-index.

Método 1: Activar el encabezado fijo en la configuración del tema

Si tu tienda utiliza el tema oficial Dawn de Shopify o un tema moderno de Online Store 2.0, no necesitas modificar código. La función ya viene integrada directamente en el editor visual del tema.

1. En tu panel de administración de Shopify, dirígete a Tienda online > Temas.
2. Localiza el tema que deseas ajustar y pulsa en Personalizar.
3. En la barra lateral izquierda, haz clic en la sección Encabezado (o ingresa en Configuración del tema > Encabezado según la versión).
4. Busca el menú desplegable Sticky header, elige el comportamiento deseado y haz clic en Guardar.

Las cuatro opciones de Sticky header en Dawn

En el tema insignia Dawn de Shopify, la configuración del encabezado ofrece cuatro alternativas fijas definidas en su esquema técnico:

Tal como se constata en el repositorio oficial de Dawn en GitHub, Dawn establece on-scroll-up como valor predeterminado de sticky_header_type y lo construye mediante position: sticky.

Los estudios de usabilidad de Nielsen Norman Group sobre encabezados fijos respaldan este enfoque: los encabezados parcialmente persistentes asumen que cualquier desplazamiento hacia arriba denota la intención de navegar o revisar el carrito. Al ocultar la barra mientras se lee hacia abajo, se maximiza el área de visualización sin perjudicar el acceso.

Otros temas de Online Store 2.0

Otros temas de Online Store 2.0 pueden ofrecer un ajuste similar, pero su nombre y sus opciones pueden diferir de los de Dawn. Revisa siempre los ajustes nativos del encabezado antes de implementar CSS personalizado; si no existe tal ajuste, pasa al método de CSS que aparece más abajo. Si estás construyendo sobre Dawn, consulta nuestro análisis específico de Navi+ en el tema Dawn.

¿Prefieres ver el proceso en vídeo? Esta demostración enseña el ajuste exacto en el editor del tema:

Método 2: Hacer el encabezado fijo con CSS personalizado

En caso de que utilices un tema personalizado o un diseño que carezca del selector nativo para fijar el encabezado, puedes lograrlo usando CSS personalizado sin alterar el archivo theme.liquid.

Duplica tu tema primero

Antes de ajustar estilos, protege tu tienda creando una copia de seguridad. Como subraya el Centro de ayuda de Shopify sobre duplicación de temas: “Before you customize a theme, it’s a good idea to make a backup copy so that you can discard your changes.”

Para duplicar tu tema, ve a Tienda online > Temas, pulsa en los tres puntos (...) junto a tu tema activo y selecciona Duplicar. Realiza todas las pruebas en esta copia antes de publicarla oficialmente.

Dónde pegar el código CSS

Shopify incorpora un campo específico de CSS personalizado en el editor visual. Ve a Tienda online > Temas > Personalizar, haz clic en el icono de engranaje (Configuración del tema) a la izquierda y abre el panel CSS personalizado.

Según la guía de Shopify para añadir CSS personalizado, las reglas que se ingresan en este campo global aplican a toda la tienda y tienen un límite de 1.500 caracteres. Si agregas CSS dentro de una sección específica, Shopify limitará su alcance solo a esa sección, lo que puede impedir que el encabezado se fije globalmente.

/* Ejemplo — adapta los selectores a tu tema y prueba en un tema duplicado */
.section-header {
  position: sticky;
  top: 0;
  z-index: 3;
}

Este bloque aplica position: sticky al contenedor del encabezado. Conforme a MDN Web Docs, un elemento sticky requiere un umbral de orientación—en este caso top: 0 define que debe fijarse en cuanto su borde superior toque la cima del navegador. El valor z-index: 3 asegura que flote por encima del contenido y de las fotos del cuerpo.

Ten cuidado con tutoriales antiguos de foros. Muchas publicaciones de la Comunidad Shopify—como las diseñadas para el antiguo Debut (Shopify Community)—emplean scripts de jQuery y JavaScript manual. El propio hilo indica que es un tutorial avanzado sin soporte de Shopify, así que no copies sus scripts en un tema actual; esta guía solo usa ajustes del tema y CSS.

Solución de problemas comunes con el encabezado fijo

Figura 1: Ilustración de concepto — Resolución de solapamientos de contenido y conflictos de capas con scroll-padding-top.

Fijar una barra de navegación altera la geometría de la página, el renderizado de la ventana y el apilamiento de capas. Cuando surgen inconvenientes, casi siempre se deben a cuatro causas bien catalogadas en CSS.

Contenido oculto debajo del encabezado

La queja más frecuente tras aplicar navegación fija es que las imágenes principales o los títulos de las secciones quedan parcialmente tapados por el encabezado al cargar la página (debate en la Comunidad Shopify).

Esto ocurre cuando se usa position: fixed en lugar de position: sticky. Al suprimir el elemento del flujo habitual (MDN Web Docs), el contenido siguiente sube y ocupa su espacio. Cambiar a position: sticky suele resolver la falla de inmediato, ya que conserva su espacio físico hasta que empieza el desplazamiento.

Si tu diseño exige una posición fija, o si los enlaces ancla internos (como #opiniones o #detalles) caen debajo del encabezado al hacer clic, añade scroll-padding-top en el elemento HTML raíz. Según MDN Web Docs, esta regla descuenta el área superior ocupada por la barra:

/* Ejemplo — adapta los selectores a tu tema y prueba en un tema duplicado */
html {
  scroll-padding-top: 80px; /* valor de ejemplo: sustitúyelo por la altura medida de tu propio encabezado */
}

Mide siempre la altura exacta en píxeles del encabezado de tu propia tienda usando las herramientas de desarrollo del navegador; no copies cifras al azar de foros, ya que las dimensiones varían según cada logotipo.

El encabezado deja de fijarse (problema de overflow)

Un problema muy común es un encabezado sticky que deja de fijarse repentinamente tras instalar una app de carruseles de fotos o una barra promocional externa.

La explicación técnica está descrita en MDN Web Docs: un elemento sticky se ancla a su contenedor ancestro más cercano que tenga un mecanismo de desplazamiento. Si un elemento padre (html, body o un contenedor general) tiene asignado overflow: hidden, overflow: auto o scroll, el encabezado queda atrapado en ese contenedor en lugar de en la ventana del navegador. Si ese contenedor padre no se desplaza, el encabezado no se moverá. Revisa los contenedores superiores y elimina reglas de overflow innecesarias.

El encabezado se desliza bajo otros elementos (z-index)

Al desplazarse frente a vídeos incrustados o módulos de reseñas, el encabezado puede quedar oculto detrás de ellos. A la inversa, los menús desplegables o el carrito lateral pueden verse recortados.

Dado que position: sticky y position: fixed crean un nuevo contexto de apilamiento (MDN Web Docs), los elementos internos se calculan con respecto a la capa del encabezado. Asegúrate de asignar al encabezado un z-index adecuado, garantizando que los modales y el carrito deslizante mantengan un valor superior al del encabezado.

Desactivar la fijación únicamente en dispositivos móviles

En pantallas de smartphones con altura reducida, un encabezado continuo puede restar demasiado espacio de lectura. Puedes limitar el comportamiento fijo a las pantallas de escritorio mediante una consulta de medios:

/* Ejemplo — adapta los selectores y el punto de corte (aquí 750px) a tu tema y prueba en un tema duplicado */
@media (min-width: 750px) {
  .section-header {
    position: sticky;
    top: 0;
    z-index: 3;
  }
}

El campo de CSS personalizado de Shopify admite consultas @media estándar (Centro de ayuda de Shopify). En Dawn, también puedes cambiar la opción a Ninguno o Al desplazarse hacia arriba. Evita usar JavaScript tardío para cambiar clases del encabezado tras la carga, ya que provoca saltos visuales perjudiciales para los Core Web Vitals. Según Google web.dev sobre CLS, los sitios deben aspirar a una puntuación de CLS de 0,1 o inferior.

La siguiente tabla resume los problemas más frecuentes con encabezados fijos y sus soluciones técnicas:

Por qué la mayoría de los temas de Shopify no tienen menú de pie de página fijo

Aunque los encabezados fijos son muy comunes en los temas modernos, la otra parte de la búsqueda—un menú de pie de página fijo—evidencia un gran vacío en la arquitectura de plantillas.

En los temas de Shopify, el ‘pie de página’ está concebido como un bloque estático al final del documento. Suele contener varias columnas de texto con enlaces de ayuda, políticas, créditos legales y sellos de pago. Fijar un pie de página tradicional completo al fondo de un smartphone bloquearía casi toda la pantalla e impediría examinar los productos.

Lo que los comerciantes buscan al solicitar un ‘menú de pie fijo’ es una barra de pestañas inferior para móvil (bottom tab bar)—una franja compacta de navegación anclada al borde inferior. Como la mayoría de temas no la incluyen de serie, las opciones son desarrollarla mediante CSS y secciones Liquid personalizadas, o recurrir a una aplicación de menús.

Crear una barra inferior fija con CSS personalizado

Si prefieres programar tu propio código CSS, la estructura básica requiere una posición fija sujeta al borde inferior de la ventana:

/* Ejemplo — adapta los selectores a tu tema y prueba en un tema duplicado */
.my-bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: #ffffff;
  border-top: 1px solid #e5e7eb;
  z-index: 10;
}

body {
  padding-bottom: 60px;
}

Dado que position: fixed retira la barra del flujo del documento (MDN Web Docs), es obligatorio aplicar un padding-bottom equivalente a la etiqueta body. Sin este margen, la barra tapará permanentemente los enlaces del pie de página real y las ventanas de chat. Considera que tendrás que maquetar el HTML/Liquid de los enlaces y mantenerlo tú mismo en cada actualización del tema.

Considerar el área segura (Safe Area) en iPhone

Los teléfonos inteligentes actuales—en especial los iPhone sin botón de inicio físico—cuentan con una barra horizontal de gestos en el borde inferior. Si la barra de navegación se coloca sin compensar este espacio físico, los iconos chocarán con los gestos del sistema operativo.

Según se detalla en MDN Web Docs sobre env() en CSS, los márgenes de seguridad de hardware pueden solventarse mediante variables de entorno estandarizadas:

/* Ejemplo — adapta los selectores a tu tema y prueba en un tema duplicado */
.my-bottom-bar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}

El uso de env(safe-area-inset-bottom) asegura que los botones inferiores se puedan pulsar con facilidad y no interfieran con las barras del sistema. Para profundizar en la ergonomía táctil en móviles, revisa nuestra guía técnica sobre el diseño de barras de pestañas y navegación inferior en Shopify.

Uso conjunto de encabezado fijo y barra inferior en móviles

Figura 2: Ilustración de concepto — Equilibrio de dos barras permanentes en móviles para evitar colisiones con el proceso de compra.

Habilitar un encabezado fijo y una barra inferior de manera simultánea plantea un reto de diseño: la competencia por la altura vertical de la pantalla.

En pantallas de ordenador suele haber espacio vertical de sobra para un encabezado. En smartphones, en cambio, la superficie es sumamente limitada. Los análisis de Nielsen Norman Group recuerdan que ahorrar espacio visual es crucial en dispositivos móviles debido al tamaño reducido de las pantallas.

Si ambas barras se muestran de forma continua a gran tamaño, al comprador solo le queda una estrecha franja para ver el catálogo. Para mantener una navegación fluida, aplica estos criterios:

1. Mantén el encabezado ligero: Configura en Dawn la opción Al desplazarse hacia arriba, que esconde el encabezado al leer hacia abajo, o Siempre, reducir tamaño del logotipo para mantener más pequeño un encabezado fijo.
2. Evita tapar el botón de compra: En las páginas de producto, algunos temas incorporan un botón fijo de ‘Añadir al carrito’ abajo. Si tu barra de navegación se fija en bottom: 0, puede ocultar por completo el botón de compra. Audita siempre las páginas de producto en smartphones reales.
3. Asegura la visibilidad del foco de teclado (WCAG 2.4.11): La directriz de accesibilidad W3C WCAG 2.4.11 (Focus Not Obscured - Minimum) establece que los elementos con foco de teclado no deben quedar totalmente ocultos por contenido fijo de la página. Definir tanto scroll-padding-top como scroll-padding-bottom (MDN Web Docs) garantiza que el navegador sitúe los campos activos a la vista.
4. Garantiza un tamaño táctil suficiente (WCAG 2.5.8): Bajo el estándar W3C WCAG 2.5.8 (Target Size - Minimum), las zonas de pulsación deben medir al menos 24 por 24 píxeles CSS para prevenir toques involuntarios.

Para conocer más patrones de diseño móvil, revisa nuestros artículos sobre navegación móvil más allá del menú de hamburguesa y la guía de accesibilidad en navegación.

Compromisos: cuándo no conviene fijar los menús

Las barras fijas son herramientas de gran utilidad, pero no encajan en todas las tiendas ni en todos los formatos de página. Como expuso Page Laubheimer en un informe de Nielsen Norman Group: “Sticky headers can be a positive addition to a site, but only if they truly serve a purpose for your users.”

Valora estos factores antes de aplicar barras fijas:

• Tiendas de producto único o páginas cortas: Si comercializas solo uno o dos artículos con páginas narrativas directas, tus clientes no necesitan cambiar de categoría constantemente. Fijar barras solo restará espacio visual sin aportar valor.
• Presencia de múltiples elementos fijos: Si tu tema ya incluye botones flotantes de carrito, cintillos promocionales o burbujas de chat, añadir otra barra inferior creará una sobrecarga visual molesta.
• Mantenimiento ante actualizaciones: Cada línea de CSS personalizado es código que deberás revisar manualmente. Como advierte Shopify en su documentación de CSS, las actualizaciones futuras de los temas pueden alterar clases y obligar a rehacer estilos.

Para determinar el formato de menú que mejor se adapta al tamaño de tu tienda, examina nuestra guía para elegir el tipo de menú adecuado para tu tienda.

Dónde encaja Navi+: una barra de pestañas inferior fija sin código

Conviene aclarar con total transparencia: Navi+ no crea ni controla encabezados fijos. Los ajustes nativos del tema (Método 1) o el CSS personalizado (Método 2) siguen siendo la solución adecuada para la parte superior de la página.

El papel de Navi+ se centra en resolver la mitad inferior del rompecabezas: el menú de pie de página fijo que los temas de Shopify no incluyen. En lugar de programar secciones Liquid complejas y calcular márgenes seguros en CSS, Navi+ proporciona una Tab Bar: una barra de menú fija en la parte inferior de la pantalla que creas a partir de plantillas dentro de la app.

Qué hace la Tab Bar:

• Presencia homogénea en todas las páginas: La Tab Bar de Navi+ permanece visible en todas las páginas de la tienda (Documentación de Navi+), y la estructura de su menú admite hasta 3 niveles.
• Activación sin tocar código: Se integra mediante los bloques de aplicaciones (App embeds) de Shopify. De acuerdo con la guía de activación de Navi+, diseñas tu menú en la app, entras a Tienda online > Temas > Personalizar > Bloques de aplicaciones, activas Store Connector y haces clic en Guardar.
• Reglas de visualización: Los menús pueden mostrarse u ocultarse según el dispositivo (móvil o escritorio), el tipo de página (como inicio, producto o colección) o palabras clave de la URL (Documentación de Navi+). Por ejemplo, puedes mostrar la Tab Bar solo en móvil.

Como con cualquier cambio de diseño, realiza siempre las comprobaciones en una copia duplicada de tu tema (Guía de duplicación de Shopify).

If you’d rather not maintain custom CSS for the bottom bar, Navi+ Tab Bar gives you a sticky bottom menu you can set up from templates and limit to mobile — try it on a duplicate theme first. Para conocer los pasos oficiales, revisa cómo publicar la Tab Bar en Shopify.

Lista de verificación de acciones

• Duplicar el tema: Crear una copia de respaldo en Tienda online > Temas antes de modificar ajustes o añadir código CSS.
• Seleccionar el modo de encabezado fijo: Escoger la alternativa adecuada en los ajustes del tema (‘Al desplazarse hacia arriba’ o ‘Siempre’).
• Probar la fluidez del desplazamiento: Deslizar en páginas de colecciones y productos para comprobar que las transiciones sean suaves.
• Revisar saltos de enlaces ancla: Probar saltos internos (#opiniones, #detalles) para asegurar que no queden tapados; añadir scroll-padding-top si es necesario.
• Inspeccionar capas y menús: Desplegar menús secundarios, paneles de megamenú y el carrito lateral para validar que se sitúen por encima del encabezado.
• Configurar la barra inferior: Añadir la barra de pestañas móvil por CSS o app, comprobando env(safe-area-inset-bottom) y el padding del body.
• Verificar la página de producto: Constatar en móviles que la barra inferior no tape el botón de Añadir al carrito ni las opciones de compra directa.
• Auditar accesibilidad y dispositivos físicos: Comprobar con la tecla Tab la visibilidad del foco y testear en teléfonos iPhone y Android reales.

FAQ

¿Cómo hago que el encabezado y el pie de página sean fijos en Shopify?

Para el encabezado, utiliza el ajuste nativo de Sticky header en tu tema, como ‘Al desplazarse hacia arriba’ en Dawn. Dado que los temas no traen pie de página fijo, añade una barra de pestañas móvil con CSS o una app de menús.

¿Por qué el contenido de mi página se oculta detrás del encabezado fijo?

Suele deberse al uso de position: fixed, que retira el encabezado del flujo del diseño sin reservar espacio. Cambiar a position: sticky o añadir scroll-padding-top a la etiqueta HTML soluciona el solapamiento.

¿Por qué mi sticky header dejó de funcionar de repente?

Un encabezado fijo pierde la adherencia si un elemento contenedor ancestro tiene overflow: hidden, scroll o auto. En CSS, los elementos sticky se sujetan al contenedor con scroll más cercano en vez de a la ventana.

¿Puedo mantener el encabezado fijo en ordenador pero desactivarlo en móvil?

Sí. Si usas CSS personalizado, encierra las reglas dentro de una media query min-width que coincida con el punto de corte de tu tema. Si utilizas una app como Navi+ para la barra inferior, define su regla de visualización por dispositivo para que solo aparezca en móvil.

¿Una barra inferior fija tapará la barra de inicio del iPhone?

Puede solaparse si no se consideran las áreas seguras del teléfono. Agregar env(safe-area-inset-bottom) al padding de tu barra inferior asegura que los botones se ubiquen por encima de los gestos del sistema.

¿Un sticky header es perjudicial para la experiencia de usuario (UX)?

Los estudios de Nielsen Norman Group demuestran que los encabezados fijos son beneficiosos si facilitan funciones clave. Sin embargo, en móviles deben ser delgados o esconderse al deslizar hacia abajo para no restar espacio útil.

Fuentes

1. Esquema de idioma por defecto del tema Dawn (Shopify): locales/en.default.schema.json
2. Código fuente de la sección Header del tema Dawn (Shopify): sections/header.liquid
3. MDN Web Docs — Propiedad CSS position: developer.mozilla.org/en-US/docs/Web/CSS/position
4. MDN Web Docs — Propiedad CSS scroll-padding-top: developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
5. MDN Web Docs — Función CSS env(): developer.mozilla.org/en-US/docs/Web/CSS/env
6. W3C Web Accessibility Initiative — Criterio WCAG 2.4.11 Focus Not Obscured (Minimum): w3.org/WAI/WCAG22/Understanding/focus-not-obscured-minimum.html
7. W3C Web Accessibility Initiative — Criterio WCAG 2.5.8 Target Size (Minimum): w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
8. Nielsen Norman Group — Análisis sobre Sticky Headers (Page Laubheimer): nngroup.com/articles/sticky-headers/
9. Google web.dev — Optimización de Cumulative Layout Shift (CLS): web.dev/articles/cls
10. Centro de ayuda de Shopify — Añadir CSS personalizado al tema: help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
11. Centro de ayuda de Shopify — Duplicación de temas: help.shopify.com/en/manual/online-store/themes/managing-themes/duplicating-themes
12. Comunidad Shopify — Discusión sobre Sticky/Fixed Header Menu: community.shopify.com/t/sticky-fixed-header-menu/308093
13. Comunidad Shopify — Guía de Sticky/Fixed Header para Debut: community.shopify.com/t/sticky-fixed-header-and-navigation-for-debut-theme/3640
14. Centro de ayuda de Navi+ — Publicar la Tab Bar en Shopify: help.naviplus.io/docs/usage/tabbar-bottom-navigation/publishing-on-shopify/
15. Centro de ayuda de Navi+ — Configuración y orientación de la Tab Bar: help.naviplus.io/docs/usage/tabbar-bottom-navigation/how-to-use/