Skip to main content
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.

​
Cómo acceder

Puedes acceder a los ajustes haciendo clic en “Edit Branding” en la parte superior de tu editor de Checkout:
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.
/

​
Sistema de diseño

​
Paleta de colores

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.

​
Variables

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)

​
Personalizaciones

​
Botones

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

​
Campos

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

​
Resumen del pedido

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.

​
Próximamente

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.