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 visual a todas as superfícies voltadas para o cliente: checkout, storefront e Customer Portal. As alterações são aplicadas instantaneamente nas três superfícies e visualizadas em tempo real antes de serem salvas. O modo de teste e o modo live mantêm designs separados — consulte Copiar design do modo de teste para o modo live.

Principais Destaques

Hub de design unificado — Configure a aparência do checkout, da storefront e do 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é-visualização ao vivo — Veja como suas alterações ficam em todas as superfícies antes de salvar
Substituições por seção — Ajuste individualmente cada seção sem afetar as demais
Controle programático — Substitua os temas no momento do checkout por meio da Checkout Sessions API (customization.theme_config). O theme_config de uma sessão tem precedência sobre o design configurado no dashboard. A opção themeConfig do lado do cliente do Checkout SDK está obsoleta
Copiar design de teste para produção — Transfira um design aperfeiçoado no modo de teste para o modo de produção 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	Finalidade
Geral	Nome da empresa, logotipo, seleção de tema e configurações avançadas globais
Checkout	Substitui as configurações do tema especificamente para a página de checkout
Storefront	Substitui as configurações do tema e configura o layout da storefront
Customer Portal	Substitui as configurações do tema do Customer Portal

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 storefront e no Customer Portal
Logotipo da empresa	O logotipo da sua marca exibido em todas as páginas voltadas para o cliente
Tema	Selecione um tema pré-criado como ponto de partida

Configurações Avançadas

Expanda Configurações Avançadas para acessar controles granulares:

Tipografia

Configuração	Opções	Descrição
Fonte primária	Qualquer Google Font	Fonte principal para títulos e texto do corpo
Fonte secundária	Qualquer Google Font	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 o modo claro e o modo escuro. Cada modo é compatível com:

Propriedade	Descrição
Fundo primário	Cor principal do fundo
Fundo secundário	Fundo secundário (abas, cartões)
Texto primário	Cor principal do texto
Texto secundário	Cor de texto atenuada
Botão primário	Fundo do botão primário
Texto do botão primário	Cor do texto nos botões primários
Botão secundário	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 destaque da borda

Borda

Configuração	Descrição
Raio da borda	Controla o arredondamento de campos de entrada, botões, abas e cartões (por exemplo, `0` para cantos retos, `8px` para cantos arredondados e `16px` para formato de 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

Depois de selecionar um tema pré-criado, personalize propriedades individuais em Configurações avançadas. Todas as propriedades não especificadas usam os 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 configurações de tipografia, cores e bordas especificamente para a experiência de checkout. A visualização em tempo real mostra:

Informações e preços dos produtos
Opções de checkout expresso (Apple Pay, Google Pay)
Seleção do método de pagamento e formulário do cartão
Campo de código de desconto e detalhamento do preço

Aba Storefront

Configure as configurações específicas da storefront:

Configuração	Descrição
URL da loja	O endereço da sua storefront (por exemplo, `store.dodopayments.com/your-store`)
Nome da loja	Ative e defina o nome exibido na sua storefront
Logotipo da loja	Ative e carregue um logotipo para o cabeçalho da storefront
Banner da loja	Ative e carregue uma imagem de banner
Descrição do produto	Ative para mostrar ou ocultar as descrições dos produtos nos cartões
Substituir tema	Ative para personalizar tipografia, cores e bordas apenas para a storefront

Aba Customer Portal

Substitua o tema do Customer Portal, que inclui:

Gerenciamento de assinaturas
Histórico de cobranças
Métodos de pagamento
Carteira e créditos

Copiar design do modo de teste para o modo live

O modo de teste e o modo live mantêm configurações de design separadas. Um tema criado durante os testes não aparece automaticamente para clientes reais. Em vez de recriá-lo manualmente, copie seu design do modo de teste para o modo live em uma única etapa.

Open Design in Test Mode

Mude para o modo de teste e acesse Configurações → Design. Salve primeiro todas as alterações pendentes: somente o design de teste salvo será copiado.

Start the Copy

Clique em Copiar para o modo de produção. O botão aparece quando você tem um tema salvo ou uma storefront de teste publicada, e o modo de produção precisa estar ativado.

Choose What to Copy

Selecione Tema e personalizações (o tema geral, além das substituições do checkout, da storefront e do Customer Portal) e Detalhes da storefront (nome da loja, logotipo e banner). Os detalhes da storefront ficam indisponíveis se nenhuma storefront estiver publicada no modo de teste.

Confirm

Clique em Copiar para o modo de produção na caixa de diálogo.

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

Páginas relacionadas

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 sua storefront com sua identidade visual.

Customer Portal

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

Multi-Brand Setup

Gerencie várias marcas em uma única conta, com identidades visuais separadas.

Getting Started

Features

Integrate

Merchant of Record

Miscellaneous

Principais Destaques

Primeiros Passos