> ## 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.
# Configurações de branding do checkout
> Este artigo apresenta as configurações de Branding do Checkout e como usar cada seção para personalizar seu checkout.
As configurações de branding permitem personalizar a aparência do seu checkout, desde cores e tipografia até botões, campos de formulário e layout da página. Essas ferramentas facilitam o alinhamento do design do seu checkout com a identidade da sua marca.
# Como acessar
Abra o painel **Checkout** no Aftersell e clique em **Edit branding** no topo da página.
Editar o branding aqui requer um plano **Shopify Plus**. A Shopify só permite que apps leiam e gravem o branding do checkout no Plus, então em outros planos essas configurações não podem ser salvas. Se a sua loja não está no Plus, faça as mesmas alterações no editor de checkout da Shopify: **Configurações → Checkout → Personalizar** no seu admin da Shopify.
O editor é organizado em três grupos: **Design system**, **Customizations** e **Advanced**.
***
# Design system
As configurações do design system são a base. Os componentes em todo o checkout herdam delas, a menos que uma configuração mais específica as sobreponha.
## Cores globais
As cores da sua marca e do sistema, usadas em toda a loja e nas experiências pós-compra. Os componentes usam essas cores quando nenhum esquema de cores está definido.
**Cores da marca**
* **Brand** – a cor principal da sua marca.
* **Accent** – usada para elementos interativos e em destaque.
* **Decorative** – usada para elementos decorativos de apoio.
**Cores de status e do sistema**
* **Success** – estados de confirmação.
* **Warning** – mensagens de aviso.
* **Critical** – erros e alertas.
* **Info** – mensagens informativas.
As cores de superfície e de botão não são definidas aqui. Elas ficam em **Advanced > Color schemes**.
## Tipografia
* **Font size** – defina o **Base size** e o **Scale ratio** que deriva o restante da escala tipográfica.
* **Primary font** – usada para a maioria dos componentes, como texto comum, botões e controles de formulário. Escolha uma **Font family**, um **Base weight** e um **Bold weight**.
* **Secondary font** – usada para componentes de título, com os mesmos três controles.
## Raio dos cantos
Define os valores compartilhados de raio dos cantos referenciados por botões, campos de formulário, contêineres e outros componentes. Você define três tamanhos: **Small**, **Medium** e **Large**.
***
# Customizations
## Botões
Configurados separadamente para **Primary buttons** (a ação principal de uma página) e **Secondary buttons** (ações de apoio). Cada um tem:
* **Corner radius** – Small, Medium, Large ou None (quadrado).
* **Background** – Solid ou None.
* **Vertical padding** e **Horizontal padding**.
* **Show border**.
As cores dos botões são herdadas dos esquemas de cores. Se nenhum valor de esquema estiver definido, as cores globais são usadas.
## Campos de formulário
Aplica-se a todos os tipos de campo suportados:
* **Corner radius**
* **Label position** – Inside ou Outside.
* **Show border**
As **substituições específicas por campo** permitem que você se afaste desses estilos compartilhados para tipos de campo específicos: **Text field borders**, **Dropdown borders**, **Choice list group spacing** e **Checkbox corner radius**.
## Miniaturas de produtos
Controla como as imagens dos produtos aparecem na página:
* **Show border**
* **Border radius**
* **Fit**
* **Badge background color** – Accent (cor de destaque do esquema) ou Base (cor base do esquema).
* **Layout** – **Placement** (Top bar, Left section ou Right section) e **Alignment** (Left, Center ou Right).
* **Container** – **Padding**, **Color scheme** e **Show divider**.
## Área de conteúdo
Controla o **Divider** entre a área principal e a área do resumo do pedido: **Show divider**, **Border style** e **Border weight**.
## Área principal
* **Section containers** – o plano de fundo e a borda que envolvem cada seção: **Background**, **Show border**, **Border style**, **Border weight**.
* **Section dividers** – as linhas exibidas entre as seções.
## Resumo do pedido
* **Container** – o **Color scheme** aplicado ao contêiner geral do resumo do pedido.
* **Section dividers** – **Show divider**, **Border style**, **Border weight**.
* **Section containers** – o plano de fundo e a borda ao redor de cada seção: **Show border**, **Background**, **Border style**, **Border weight**, **Color scheme**, **Corner radius**, **Padding** e **Shadow**.
* **Layout** – **Placement** e **Alignment**.
* **Container** – **Show footer content**, **Padding**, **Color scheme** e **Show divider**.
***
# Advanced
## Esquemas de cores
Esquemas de cores são conjuntos reutilizáveis de cores de superfície, texto e botão para os quais outras seções apontam. Dois esquemas estão disponíveis:
* **Scheme 1 - Main area**
* **Scheme 2 - Supporting areas**
Cada esquema é dividido em três grupos:
* **Buttons** – usados para o botão principal de pagamento e ações secundárias. **Primary button** e **Secondary button** são configurados separadamente, cada um com seu próprio estado padrão e de hover.
* **Form controls** – usados para campos de texto, menus suspensos e listas de opções.
* **Base surfaces** – o plano de fundo da superfície, o texto do corpo e as funções de apoio: borda, destaque (links e foco), decorativa (realces sutis) e cor dos ícones.
Sempre que uma seção oferece um controle de **Color scheme**, você pode apontá-lo para **Scheme 1**, **Scheme 2** ou **Transparent**.