Skip to main content
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.
Painel de Checkout do Aftersell com uma seta apontando para o botão Edit branding 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.
Página de checkout com o cabeçalho do nome da loja destacado no canto superior esquerdo

​
Á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.
Miniatura de produto no resumo do pedido com a borda da imagem destacada
  • 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.