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
- Central de Design Unificada - Configure a aparência do checkout, da vitrine e do portal do cliente em uma única página.
- Temas Prontos - Comece com um tema curado e personalize a partir dele.
- Modo Claro e Escuro - Defina paletas de cores separadas para cada modo.
- Visualização ao Vivo - Veja como suas alterações ficam no checkout, portal do cliente e vitrine antes de salvar.
- Substituições por Seção - Ajuste seções individuais (checkout, vitrine, portal do cliente) sem impactar as demais.
- Controle Programático - Substitua temas no momento do checkout por meio da API ou do Checkout SDK.
Primeiros Passos
Navegue até Design na barra lateral principal do seu Merchant Dashboard. A página de Design possui 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
- 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
- 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
- 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
- Dark Mode
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
- 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
| 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
- 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.