> ## 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.

# Ajustes de branding del checkout

> Este artículo te guía por los ajustes de branding del checkout y cómo usar cada función para personalizar tu checkout.

Los ajustes de branding te permiten personalizar la apariencia de tu experiencia de checkout, desde colores y botones hasta encabezados y diseños de campos. Estas herramientas facilitan alinear el diseño de tu checkout con tu identidad de marca.

<div id="how-to-access-it">
  # Cómo acceder
</div>

Puedes acceder a los ajustes haciendo clic en "Edit Branding" en la parte superior de tu editor de Checkout:

<Note>
  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.
</Note>

/

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-dashboard-arrow-edit-button-1.gif?s=a6cf34d429205a46f8c78d987442ff9a" alt="Encabezado de nombre de tienda de branding del checkout" title="Checkout Branding Store Name Header" lightAlt="Encabezado de nombre de tienda de branding del checkout" darkAlt="Encabezado de nombre de tienda de branding del checkout" className="dark:hidden" width="1432" height="1080" data-path="images/checkout-branding-dashboard-arrow-edit-button-1.gif" />

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-dashboard-arrow-edit-button-2.gif?s=b5db486ea8dab31563b64af7d38fc190" alt="Encabezado de nombre de tienda de branding del checkout" title="Checkout Branding Store Name Header" lightAlt="Encabezado de nombre de tienda de branding del checkout" darkAlt="Encabezado de nombre de tienda de branding del checkout" className="hidden dark:block" width="1432" height="1080" data-path="images/checkout-branding-dashboard-arrow-edit-button-2.gif" />

***

<div id="design-system">
  # Sistema de diseño
</div>

<div id="color-palette">
  ## Paleta de colores
</div>

Esta sección te permite ajustar los colores utilizados en todo tu checkout, incluidos fondos, botones y texto. Puedes modificar las siguientes áreas:

* **Primary Buttons**: controla el color de los botones de acción principales (por ejemplo, "Pay Now" o "Add").

* **Interactive**: controla los elementos con los que los clientes pueden interactuar, como enlaces y campos de entrada.

* **Main Body**: establece el color del **lado izquierdo** de la página de checkout.

* **Secondary Body**: establece el color del **lado derecho** (sección del resumen del pedido).

* **Loading Screens**: define el color que se muestra cuando los clientes realizan una acción que activa una pantalla de carga.

* **Critical**: controla el color de los mensajes de error o alertas que se muestran durante el checkout.

<div id="variables">
  ## Variables
</div>

Esta sección te permite controlar el **radio de las esquinas** de los elementos en todo tu checkout. El radio de las esquinas es, en esencia, qué tan redondeadas se ven las esquinas.

Puedes ajustar el radio para:

* **Elementos pequeños** (p. ej., casillas de verificación)
* **Elementos medianos** (p. ej., campos de texto o de entrada)
* **Elementos grandes** (p. ej., botones o tarjetas)

***

<div id="customizations">
  # Personalizaciones
</div>

<div id="buttons">
  ## Botones
</div>

Esta sección te permite personalizar opciones de estilo adicionales para tus botones principales y secundarios más allá del color:

* **Variables**: define si el botón usa el ajuste de radio pequeño, mediano o grande de la sección Variables
* **Background**: elige entre un fondo de color sólido o uno transparente.
* **Border**: habilita o deshabilita un borde alrededor del botón.
* **Horizontal & Vertical Padding**: ajusta el espaciado alrededor de los botones.
  * *Horizontal* = espaciado izquierdo y derecho
  * *Vertical* = espaciado superior e inferior

<div id="fields">
  ## Campos
</div>

Esta sección te permite controlar el estilo de todos los campos de formulario, incluidos los campos de texto, los menús desplegables y las casillas de verificación:

* **Variables**: asigna el tamaño del campo (pequeño, mediano o grande) en la sección Variables.
* **Border**: activa o desactiva los bordes.
* **Label Position**: elige si la etiqueta del campo aparece dentro o encima del campo de entrada.
* **Corner Radius**: ajusta qué tan redondeadas se ven las esquinas del campo.

<div id="header">
  ## **Encabezado**
</div>

En esta sección, puedes personalizar la posición y alineación del encabezado de tu checkout:

* Posiciona el encabezado en el lado izquierdo o derecho de la página.
* Alinea el texto del encabezado a la izquierda, al centro o a la derecha.

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-store-name-header-1.gif?s=ca0a308a994bdd36ad77b6ed4feab68e" alt="Encabezado de nombre de tienda de branding del checkout 1" width="1872" height="1080" data-path="images/checkout-branding-store-name-header-1.gif" />

<div id="order-summary">
  ## Resumen del pedido
</div>

Esta sección te da control sobre la apariencia de las imágenes de producto en el resumen del pedido:

* Agrega o quita un **borde** de imagen.
* Ajusta el **radio de las esquinas** para hacer las esquinas de la imagen más redondeadas o cuadradas.

<img src="https://mintcdn.com/aftersell/YlZ1q43-dCG5ignq/images/checkout-branding-order-summary-product-thumbnail.gif?s=6f27bbf3a0dff0cc83bf07b39eeae36b" alt="Miniatura de producto del resumen del pedido de branding del checkout" width="1264" height="1080" data-path="images/checkout-branding-order-summary-product-thumbnail.gif" />

***

<div id="coming-soon">
  # Próximamente
</div>

Tenemos opciones de personalización adicionales que llegarán pronto, incluidas:

* **Typography**: controla los estilos y pesos de las fuentes.
* **Main & Global Settings**: opciones ampliadas para la consistencia general del diseño.

Habrá más detalles disponibles cuando se lancen estas funciones.