Skip to main content

​
Resumen

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.

​
Configuración del módulo de encabezado

​
General

Height alterna entre Slim y Tall para controlar el espacio vertical. Bottom border puede ser None o Thin. Background color acepta un código hexadecimal o el selector de color integrado, y admite transparencia. Configuración General del módulo Header de Upcart con controles de altura y color de fondo junto a una vista previa del carrito

​
Título

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. Opciones de título del módulo Header de Upcart: heredar los títulos del tema, logotipo de marca o estilos de texto personalizados

​
Heredar de los títulos del tema

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. 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 Logo size, que va de 14 px a 48 px. No hay un límite impuesto para el archivo que subas, pero 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.

​
Definir estilos de texto

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.

​
Botón de cierre

El botón de cierre es personalizable para que coincida con el diseño de tu tienda. Location lo coloca en el lado Left o Right del cajón. Background, Icon y Border aceptan cada uno un color más un color de hover independiente. Icon size es Small, Medium o Large, e Icon thickness es Normal o Thick. Border es None, Thin, Normal o Thick.
Los campos de color del borde y de color de hover del borde están desactivados mientras Border está en None. Elige primero un grosor de borde y luego establece sus colores.
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

​
Plantilla personalizada

En la versión 2.0 del módulo de encabezado, aparece un editor de código Custom template debajo de la configuración, con una única plantilla Full que cubre todo el módulo. Usa JSX basado en React, y primero debes marcar Access custom templates en Settings > Cart settings > Advanced Settings en el Cart Editor. Consulta Configurar una plantilla personalizada.

​
Consejos

  • ¿Quieres un espaciado o tamaño preciso? Usa 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. Si necesitas cambios personalizados, te recomendamos contactar a un Shopify Expert.