Design & Theme Customization

Página de configurações de design com visualização ao vivo do checkout, portal do cliente e vitrine

A página Design é o seu hub central para aplicar a identidade da marca a todas as superfícies voltadas para o cliente: checkout, storefront e Customer Portal. As alterações são aplicadas instantaneamente nas três e exibidas em uma prévia em tempo real antes de serem salvas. O modo de teste e o modo live mantêm designs separados — consulte Copiar o design do modo de teste para o modo live.

Principais Destaques

Hub de Design Unificado - Configure a aparência do checkout, storefront e Customer Portal em uma única página.
Temas pré-criados - Comece com um tema selecionado e personalize-o a partir daí.
Modo claro e escuro - Defina paletas de cores separadas para cada modo.
Prévia em tempo real - Veja como suas alterações ficam no checkout, Customer Portal e storefront antes de salvar.
Substituições por seção - Ajuste individualmente seções específicas (checkout, storefront, Customer Portal) sem afetar as outras.
Controle programático - Substitua os temas no momento do checkout por meio da API ou do Checkout SDK.
Copiar o design de teste para o live - Transfira um design aperfeiçoado no modo de teste para o modo live em uma única etapa.

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.

Aba Geral mostrando configurações avançadas com tipografia, cores e configuração de bordas

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

Tema Dodo Pulses no modo claro mostrando checkout, portal do cliente e vitrine — Dodo Pulses in light 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

Tema Terminal no modo claro mostrando checkout com acentos azuis e fonte monoespaçada — Terminal in light 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

Tema Bumblebee no modo claro mostrando checkout com acentos âmbar — Bumblebee in light 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

Tema Bubblegum no modo claro mostrando checkout, portal do cliente e vitrine com acentos rosa — Bubblegum in light 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

Aba de checkout mostrando visualização completa do checkout com detalhes do produto e formulário de pagamento

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

Aba de vitrine mostrando URL da loja, controles de branding e visualização da 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

Copiar o design do modo de teste para o modo live

O modo de teste e o modo live mantêm configurações de design separadas, portanto um tema criado durante os testes não aparece automaticamente para os clientes reais. Em vez de recriá-lo manualmente, copie seu design do modo de teste para o modo live em uma única etapa. A cópia inclui todas as superfícies de design — configurações gerais, checkout, Customer Portal e substituições do storefront — juntamente com a identidade da sua marca no storefront.

A cópia substitui o design existente no modo live. Revise seu checkout e storefront no modo live após a cópia para confirmar que tudo está como esperado.

Recursos relacionados

Checkout Features

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

Overlay Checkout SDK

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

Inline Checkout SDK

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

Storefront

Configure e gerencie seu storefront com a identidade da sua marca.

Customer Portal

Portal de autoatendimento do cliente para assinaturas e cobrança.

Multi-Brand Setup

Gerencie várias marcas em uma única conta, cada uma com sua própria identidade.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Principais Destaques

Primeiros Passos