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.

Light Mode

Dodo Pulses in light mode

Dark Mode

Dodo Pulses in dark mode

​

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.

Light Mode

Terminal in light mode

Dark Mode

Terminal in dark mode

​

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.

Light Mode

Bumblebee in light mode

Dark Mode

Bumblebee in dark mode

​

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.

Light Mode

Bubblegum in light mode

Dark Mode

Bubblegum in dark mode

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

Checkout Features

Recursos de checkout incluindo moeda, idioma, impostos, descontos e mais.

Overlay Checkout SDK

Incorpore o checkout como uma sobreposição modal na sua página.

Inline Checkout SDK

Incorpore o checkout diretamente no layout da sua página.

Storefront

Configure e gerencie sua vitrine personalizada.

Customer Portal

Portal de autosserviço para assinaturas e faturamento.

Multi-Brand Setup

Gerencie múltiplas marcas em uma conta com branding separado.