> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Módulo de encabezado

> Aprende a actualizar el encabezado de tu cajón de Upcart, incluido el logotipo, los estilos del título, el botón de cierre y el diseño.

<div id="overview">
  # Resumen
</div>

El módulo de encabezado te permite personalizar la sección superior de tu cajón de Upcart con el logotipo de tu marca, el texto del título, el diseño, el color de fondo y el botón de cierre. Los controles visuales facilitan dar estilo a tu encabezado sin necesidad de definir tamaños exactos en píxeles.

<div id="header-module-settings">
  # **Configuración del módulo de encabezado**
</div>

<div id="general">
  ## **General**
</div>

Puedes elegir entre las alturas de encabezado Slim y Tall para controlar el espacio vertical. Se puede agregar o desactivar un borde inferior delgado según sea necesario. El color de fondo se puede establecer usando un código hexadecimal o el selector de color integrado.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-height-and-background.gif?s=982cf4fec081aa2c1b62901e53602b80" alt="Configuración General del módulo Header de Upcart con controles de altura y color de fondo junto a una vista previa del carrito" width="2172" height="1080" data-path="images/upcart/header-module-height-and-background.gif" />

<div id="title">
  # **Título**
</div>

Hay **tres formas** de definir el título del encabezado de tu cajón del carrito: heredar el estilo de título predeterminado de tu tema, mostrar el logotipo de tu tienda o crear estilos de texto totalmente personalizados. Cada método ofrece flexibilidad según tus necesidades de diseño.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-title-options.gif?s=18bfdb000570d453195ba19bd5f0288b" alt="Opciones de título del módulo Header de Upcart: heredar los títulos del tema, logotipo de marca o estilos de texto personalizados" width="1960" height="1080" data-path="images/upcart/header-module-title-options.gif" />

<div id="inherit-from-theme-titles">
  ## Heredar de los títulos del tema
</div>

Esta opción usa los estilos de encabezado predeterminados de tu tema, ayudándote a mantener el diseño visualmente consistente con el resto de tu sitio. Puedes agregar tu propio título usando el campo Text e incluir dinámicamente el número de artículos del carrito usando `{{cart_quantity}}`. La alineación del texto se puede establecer en Side o Center, y puedes seleccionar el nivel de encabezado apropiado, H2, H3 o H4, según la estructura de contenido de tu tienda.

<div id="brand-logo">
  ## Logotipo de marca
</div>

Si prefieres usar un logotipo de marca en lugar de texto, puedes subir el logotipo de tu tienda directamente en esta sección. Elige alinear el logotipo a Side o Center y ajusta su tamaño con el control deslizante visual. Aunque no hay un límite de tamaño de imagen impuesto, se recomienda usar un archivo PNG para una transparencia limpia y bordes nítidos. Los JPEG también son compatibles, pero pueden incluir ruido de fondo o degradar los detalles del logotipo. Para un buen rendimiento, procura mantener los tamaños de archivo optimizados.

* Recomendamos usar un archivo **PNG** para obtener la mejor calidad y compatibilidad con fondos transparentes.
* Los JPEG también funcionan, pero pueden no verse tan limpios, especialmente si tu logotipo tiene un fondo o detalles finos.

<div id="define-text-styles">
  ## Definir estilos de texto
</div>

Seleccionar la opción Text te da control total sobre el estilo del título de forma independiente del tema de tu tienda. Puedes ingresar cualquier título personalizado e incluir `{{cart_quantity}}` para actualizaciones dinámicas. La alineación del texto se puede establecer en Side o Center, con opciones para cambiar el grosor de la fuente a Normal, Semibold o Bold. El tamaño de fuente es ajustable de 14 px a 48 px mediante un control deslizante visual, y opcionalmente puedes aplicar una anulación del color del texto.

<div id="close-button">
  # Botón de cierre
</div>

El botón de cierre es personalizable para que coincida con el diseño de tu tienda. Puedes posicionarlo en el lado Left o Right del cajón. Establece los estados de fondo y hover con colores personalizados, ajusta el tamaño del icono (Small, Medium o Large) y elige entre un grosor de trazo del icono Normal o Thick. El color del icono se puede establecer mediante un código hexadecimal o el selector de color. También puedes agregar un borde alrededor del icono, eligiendo entre None, Thin, Normal o Thick, y definir un color de borde de hover distinto si es necesario.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/header-module-close-button-settings.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=c8f941c774ff6f7029b0833c09ca000d" alt="Configuración del botón de cierre del módulo Header de Upcart para la ubicación, los colores, el tamaño del icono y el borde" width="1170" height="1166" data-path="images/upcart/header-module-close-button-settings.png" />

* **¿Quieres un espaciado o tamaño preciso?** Usa [Custom CSS](/es/upcart/custom_css) para tener control total más allá de los controles deslizantes; ideal para márgenes, padding o escalado del logotipo exactos.
* **Prueba en escritorio y móvil.** Los elementos del encabezado como el texto, el logotipo y los botones pueden mostrarse de forma diferente en distintos tamaños de pantalla.
* **Usa niveles de encabezado adecuados.** Elegir el encabezado correcto (H2, H3, H4) ayuda con la accesibilidad y el SEO. Ajústalo a la estructura del contenido de tu tienda.

Para conocer más formas de personalizar tu carrito, explora nuestros [documentos de ayuda de Upcart](/es). Si necesitas cambios personalizados, te recomendamos contactar a un [Shopify Expert](https://www.shopify.com/ca/partners/directory).