> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Design & Theme Customization
> Personalize o visual e a experiência do seu checkout, vitrine e portal do cliente em um só lugar. Escolha temas prontos, configure tipografia e cores e aplique ajustes por seção, tudo com visualização ao vivo.
A página de Design é o seu centro de controle para branding de todas as superfícies voltadas ao cliente: checkout, vitrine e portal do cliente. As alterações são aplicadas instantaneamente nas três áreas e são exibidas em tempo real antes de salvar.
## Principais Destaques
1. **Central de Design Unificada** - Configure a aparência do checkout, da vitrine e do portal do cliente em uma única página.
2. **Temas Prontos** - Comece com um tema curado e personalize a partir dele.
3. **Modo Claro e Escuro** - Defina paletas de cores separadas para cada modo.
4. **Visualização ao Vivo** - Veja como suas alterações ficam no checkout, portal do cliente e vitrine antes de salvar.
5. **Substituições por Seção** - Ajuste seções individuais (checkout, vitrine, portal do cliente) sem impactar as demais.
6. **Controle Programático** - Substitua temas no momento do checkout por meio da API ou do Checkout SDK.
## Primeiros Passos
Navegue até **Configurações → Design** no seu Painel de Controle do Comerciante. A página de Design tem quatro abas:
| Aba | Objetivo |
| --------------------- | ---------------------------------------------------------------------------- |
| **Geral** | Nome da empresa, logotipo, seleção de tema e configurações avançadas globais |
| **Checkout** | Substituir configurações de tema especificamente para a página de checkout |
| **Vitrine** | Substituir configurações de tema e configurar o layout da vitrine |
| **Portal do Cliente** | Substituir configurações de tema para o portal do cliente |
## Configurações Gerais
A aba **Geral** controla sua identidade de marca base e o tema global.
### Configuração Básica
| Configuração | Descrição |
| ----------------------- | ------------------------------------------------------------------------ |
| **Nome da Empresa** | O nome exibido no checkout, na vitrine e no portal do cliente |
| **Logotipo da Empresa** | O logotipo da sua marca mostrado em todas as páginas voltadas ao cliente |
| **Tema** | Selecione um tema pronto como ponto de partida |
### Configurações Avançadas
Expanda **Configurações Avançadas** para acessar controles granulares:
#### Tipografia
| Configuração | Opções | Descrição |
| -------------------- | --------------------------------------- | --------------------------------------------------- |
| **Fontes Primária** | Qualquer fonte do Google | Fonte principal para títulos e texto do corpo |
| **Fonte Secundária** | Qualquer fonte do Google | Fonte de destaque para rótulos e textos secundários |
| **Tamanho da Fonte** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | Tamanho base global da fonte |
| **Peso da Fonte** | `normal`, `medium`, `bold`, `extraBold` | Peso padrão da fonte |
#### Configuração de Cores
Defina paletas de cores separadas para **Modo Claro** e **Modo Escuro**. Cada modo oferece suporte às seguintes propriedades:
| Propriedade | Descrição |
| ----------------------------- | ----------------------------------------- |
| **Plano de Fundo Primário** | Cor principal do plano de fundo |
| **Plano de Fundo Secundário** | Plano de fundo secundário (abas, cartões) |
| **Texto Primário** | Cor principal do texto |
| **Texto Secundário** | Cor de texto secundário (menos destacada) |
| **Botão Primário** | Cor de fundo do botão primário |
| **Texto do Botão Primário** | Cor do texto nos botões primários |
| **Botão Secundário** | Cor de fundo do botão secundário |
| **Texto do Botão Secundário** | Cor do texto nos botões secundários |
| **Borda Primária** | Cor principal da borda |
| **Borda Secundária** | Cor de borda de destaque |
#### Borda
| Configuração | Descrição |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Raio da Borda** | Controla o arredondamento de campos, botões, abas e cartões (ex.: `0` para cantos retos, `8px` para cantos arredondados, `16px` para estilo pílula) |
## Temas Prontos
Dodo Payments oferece quatro temas curados. Selecione um no menu suspenso **Tema** na aba Geral para aplicar instantaneamente um design coeso ao checkout, à vitrine e ao portal do cliente.
### Dodo Pulses
O tema padrão da Dodo Payments. Detalhes em verde-limão conferem um visual energético e fresco. Tipografia sans-serif limpa com espaçamento generoso.
### Terminal
Um tema orientado a desenvolvedores com tipografia monoespaçada e detalhes em azul royal. Cantos retos e estética técnica que combinam bem com ferramentas de desenvolvedor e produtos API-first.
### Bumblebee
Detalhes em âmbar e dourado com estilo moderno e cantos arredondados. Visual audacioso e de alto contraste, ideal para produtos voltados ao consumidor que desejam transmitir sofisticação.
### Bubblegum
Detalhes brincalhões em rosa e magenta com cantos totalmente arredondados. Visual moderno e acolhedor, ideal para ferramentas criativas, produtos de design e marcas de lifestyle.
Após selecionar um tema pronto, você pode personalizar ainda mais propriedades individuais nas Configurações Avançadas. Quaisquer propriedades não especificadas retornam aos padrões do tema.
## Substituições por Seção
Cada aba de seção (Checkout, Vitrine, Portal do Cliente) inclui um toggle **Substituir Tema**. Ao habilitar, você pode personalizar a aparência dessa seção de forma independente do tema global.
### Aba Checkout
Substitua tipografia, cores e configurações de borda especificamente para a experiência de checkout. A visualização ao vivo mostra:
* Informações do produto e preços
* Opções de checkout expresso (Apple Pay, Google Pay)
* Seleção de método de pagamento e formulário de cartão
* Campo de código de desconto e detalhamento de preços
### Aba Vitrine
Configure as configurações específicas da vitrine:
| Configuração | Descrição |
| ------------------------ | ----------------------------------------------------------------------- |
| **URL da Loja** | O endereço da sua vitrine (ex.: `store.dodopayments.com/your-store`) |
| **Nome da Loja** | Ative e defina o nome exibido na vitrine |
| **Logotipo da Loja** | Ative e envie um logotipo para o cabeçalho da vitrine |
| **Banner da Loja** | Ative e envie uma imagem de banner |
| **Descrição do Produto** | Ative para mostrar ou ocultar descrições dos produtos nos cartões |
| **Substituir Tema** | Habilite para personalizar tipografia, cores e bordas apenas da vitrine |
### Aba do Portal do Cliente
Substitua o tema do portal do cliente, que inclui:
* Gerenciamento de assinaturas
* Histórico de faturamento
* Métodos de pagamento
* Carteira e créditos
## Recursos Relacionados
Recursos de checkout incluindo moeda, idioma, impostos, descontos e mais.
Incorpore o checkout como uma sobreposição modal na sua página.
Incorpore o checkout diretamente no layout da sua página.
Configure e gerencie sua vitrine personalizada.
Portal de autosserviço para assinaturas e faturamento.
Gerencie múltiplas marcas em uma conta com branding separado.