---
title: "Identidade visual e temas: documentação do CheckoutOS"
description: "Personalize a aparência das extensões de checkout para combinar com sua marca"
url: "https://chargezen.com/pt-br/docs/checkoutos/setup/branding"
lang: "pt-BR"
updated: "2025-01-16"
---

Canonical URL: https://chargezen.com/pt-br/docs/checkoutos/setup/branding

# Identidade visual e temas

Personalize a aparência das extensões de checkout para combinar com sua marca

Última atualização: 2025-01-16

As extensões do CheckoutOS herdam automaticamente a identidade visual do checkout da Shopify. Você pode personalizar ainda mais cores, fontes e estilos para criar uma experiência integrada que combine com a sua marca.

Acesse os ajustes de identidade visual em **Dashboard → Settings → Branding**.

Identidade visual do checkout da Shopify

O CheckoutOS respeita os ajustes de identidade visual do checkout da Shopify. Configure primeiro a aparência básica em **Shopify Admin → Settings → Checkout** e depois use os ajustes do CheckoutOS para personalizar as extensões.

## Cores da marca

Defina a paleta de cores da sua marca para todas as extensões de checkout:

### Cor principal

A cor principal da marca é usada em:

*   Botões de chamada para ação (Accept, Add to Order)
*   Preenchimento das barras de progresso
*   Indicadores de estado ativo
*   Texto dos links

Variáveis de cor

```css
/* CheckoutOS automatically generates these CSS variables */
--checkoutos-primary: #4F46E5;
--checkoutos-primary-hover: #4338CA;
--checkoutos-primary-light: #EEF2FF;
--checkoutos-primary-contrast: #FFFFFF;
```

### Cores secundárias

As cores secundárias complementam a principal:

*   **Accent Color** — Selos, destaques e botões secundários
*   **Success Color** — Mensagens de confirmação e marcas de verificação
*   **Warning Color** — Indicadores de urgência e temporizadores

## Tipografia

Por padrão, o CheckoutOS usa a fonte do checkout da Shopify. Você pode substituí-la em elementos específicos:

### Ajustes de fonte

*   **Heading Font** — Usada nos títulos das ofertas adicionais e cabeçalhos das extensões
*   **Body Font** — Usada nas descrições e no corpo do texto
*   **Button Font** — Usada no texto dos botões de chamada para ação

O CheckoutOS aceita Google Fonts e qualquer fonte segura para a web. Fontes personalizadas podem ser carregadas via CSS.

Impacto no desempenho

Carregar fontes personalizadas pode afetar o desempenho do checkout. Recomendamos usar fontes já carregadas pelo tema da Shopify para evitar solicitações de rede adicionais.

## Ajustes do logotipo

Adicione seu logotipo às páginas de ofertas adicionais após a compra para manter a consistência da marca:

1

#### Envie seu logotipo

2

#### Defina a posição do logotipo

3

#### Configure a versão para modo escuro

## Estilos dos botões

Personalize a aparência dos botões de ação:

### Formato dos botões

*   **Rounded** — Cantos suaves e arredondados (raio de 8 px)
*   **Pill** — Extremidades totalmente arredondadas
*   **Square** — Cantos retos (raio de 0 px)
*   **Custom** — Defina seu próprio raio de borda

### Tamanho dos botões

*   **Small** — Botões compactos que ocupam pouco espaço
*   **Medium** — Tamanho equilibrado (recomendado)
*   **Large** — Botões bem visíveis para dar destaque

Configuração dos botões

```json
{
  "primaryButton": {
    "backgroundColor": "#4F46E5",
    "textColor": "#FFFFFF",
    "borderRadius": "8px",
    "fontSize": "16px",
    "padding": "12px 24px",
    "hoverEffect": "darken"
  },
  "secondaryButton": {
    "backgroundColor": "transparent",
    "textColor": "#4F46E5",
    "border": "1px solid #4F46E5",
    "borderRadius": "8px"
  }
}
```

## CSS personalizado

Para personalização avançada, você pode adicionar CSS personalizado aplicado a todas as extensões do CheckoutOS:

Exemplo de CSS personalizado

```css
/* Target upsell offer cards */
.checkoutos-upsell-card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB;
}

/* Customize the accept button */
.checkoutos-accept-btn {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* Style the countdown timer */
.checkoutos-timer {
  background: linear-gradient(90deg, #EF4444, #DC2626);
  color: white;
  padding: 4px 12px;
  border-radius: 999px;
}
```

Especificidade do CSS

O CSS personalizado tem especificidade menor que os estilos do checkout da Shopify. Use `!important` com moderação e teste cuidadosamente em vários dispositivos.

## Visualização e testes

Sempre visualize as alterações de identidade visual antes de publicar:

*   **Live Preview** — Veja as alterações em tempo real durante a edição
*   **Device Preview** — Teste as visualizações para computador, tablet e celular
*   **Test Mode** — Ative o modo de teste para ver as alterações em pedidos reais sem afetar os clientes

1

#### Faça suas alterações

2

#### Visualize em todos os dispositivos

3

#### Ative o modo de teste

4

#### Publique as alterações

## Próximos passos

[

### Crie sua primeira venda adicional

Use a experiência da sua marca em uma oferta adicional após a compra

Saiba mais



](https://chargezen.com/pt-br/docs/checkoutos/one-click-upsells/creating-first-upsell)[

### Extensões de checkout

Adicione selos de confiança e barras de progresso com a identidade visual da sua marca

Saiba mais



](https://chargezen.com/pt-br/docs/checkoutos/checkout-extensions/overview)

Esta página foi útil?

Precisa de mais ajuda? [Fale com o suporte](https://chargezen.com/pt-br/docs/checkoutos/troubleshooting/support)