Skip to main content
Los ajustes de branding te permiten personalizar la apariencia de tu checkout, desde los colores y la tipografía hasta los botones, los campos de formulario y el diseño de la página. Estas herramientas facilitan alinear el diseño de tu checkout con tu identidad de marca.

​
Cómo acceder

Abre el panel Checkout en Aftersell y haz clic en Edit branding en la parte superior de la página.
Editar el branding aquí requiere un plan Shopify Plus. Shopify solo permite que las apps lean y escriban el branding del checkout en Plus, así que en otros planes estos ajustes no se pueden guardar. Si tu tienda no está en Plus, haz los mismos cambios en el editor de checkout de Shopify en su lugar: Settings → Checkout → Customize en tu admin de Shopify.
Panel de Checkout de Aftersell con una flecha señalando el botón Edit branding El editor está organizado en tres grupos: Design system, Customizations y Advanced.

​
Sistema de diseño

Los ajustes del sistema de diseño son la base. Los componentes de todo el checkout los heredan a menos que un ajuste más específico los reemplace.

​
Colores globales

Tus colores de marca y de sistema, utilizados en tu tienda y en las experiencias post-compra. Los componentes usan estos colores cuando no hay ningún esquema de colores definido. Brand colors
  • Brand: tu color de marca principal.
  • Accent: se usa para elementos interactivos y destacados.
  • Decorative: se usa para elementos decorativos de apoyo.
Status and system colors
  • Success: estados de confirmación.
  • Warning: mensajes de precaución.
  • Critical: errores y alertas.
  • Info: mensajes informativos.
Los colores de superficies y botones no se definen aquí. Se encuentran en Advanced > Color schemes.

​
Tipografía

  • Font size: define el Base size y el Scale ratio del que se deriva el resto de la escala tipográfica.
  • Primary font: se usa para la mayoría de los componentes, como el texto regular, los botones y los controles de formulario. Elige una Font family, un Base weight y un Bold weight.
  • Secondary font: se usa para los componentes de encabezado, con los mismos tres controles.

​
Radio de esquinas

Establece los valores compartidos de radio de esquinas a los que hacen referencia los botones, los campos de formulario, los contenedores y otros componentes. Defines tres tamaños: Small, Medium y Large.

​
Personalizaciones

​
Botones

Se configuran por separado para los Primary buttons (la acción principal de una página) y los Secondary buttons (acciones de apoyo). Cada uno tiene:
  • Corner radius: Small, Medium, Large o None (cuadrado).
  • Background: Solid o None.
  • Vertical padding y Horizontal padding.
  • Show border.
Los colores de los botones se heredan de los esquemas de colores. Si no hay ningún valor de esquema definido, se usan los colores globales.

​
Campos de formulario

Se aplica a todos los tipos de campo compatibles:
  • Corner radius
  • Label position: Inside u Outside.
  • Show border
Los Field-specific overrides te permiten apartarte de esos estilos compartidos para tipos de campo concretos: Text field borders, Dropdown borders, Choice list group spacing y Checkbox corner radius.

​
Miniaturas de producto

Controla cómo aparecen las imágenes de producto en la página:
  • Show border
  • Border radius
  • Fit
  • Badge background color: Accent (color de acento del esquema) o Base (color base del esquema).
  • Layout: Placement (Top bar, Left section o Right section) y Alignment (Left, Center o Right).
  • Container: Padding, Color scheme y Show divider.
Página de checkout con el encabezado del nombre de la tienda resaltado en la parte superior izquierda

​
Área de contenido

Controla el Divider entre el área principal y la del resumen del pedido: Show divider, Border style y Border weight.

​
Área principal

  • Section containers: el envoltorio de fondo y borde alrededor de cada sección: Background, Show border, Border style, Border weight.
  • Section dividers: las líneas que se muestran entre secciones.

​
Resumen del pedido

  • Container: el Color scheme aplicado al contenedor general del resumen del pedido.
  • Section dividers: Show divider, Border style, Border weight.
  • Section containers: el fondo y el borde alrededor de cada sección: Show border, Background, Border style, Border weight, Color scheme, Corner radius, Padding y Shadow.
Miniatura de producto del resumen del pedido con un borde de imagen resaltado
  • Layout: Placement y Alignment.
  • Container: Show footer content, Padding, Color scheme y Show divider.

​
Avanzado

​
Esquemas de colores

Los esquemas de colores son conjuntos reutilizables de colores de superficie, texto y botones a los que apuntan otras secciones. Hay dos esquemas disponibles:
  • Scheme 1 - Main area
  • Scheme 2 - Supporting areas
Cada esquema se divide en tres grupos:
  • Buttons: se usan para el botón de pago principal y las acciones secundarias. Primary button y Secondary button se configuran por separado, cada uno con su propio estado predeterminado y de hover.
  • Form controls: se usan para campos de texto, menús desplegables y listas de opciones.
  • Base surfaces: el fondo de la superficie, el texto del cuerpo y los roles de apoyo: borde, acento (enlaces y foco), decorativo (resaltados sutiles) y color de iconos.
Dondequiera que una sección ofrezca un control de Color scheme, puedes apuntarlo a Scheme 1, Scheme 2 o Transparent.