Temas com as cores da sua marca para aplicar no checkout
O Branding é onde você cria temas com as cores da marca para aplicar no checkout. Além das cores, o tema também define a aparência do order bump, do timer e a ordem dos métodos de pagamento.O Branding ainda não está liberado para todo mundo — pode ser que ele ainda não apareça no seu menu.
A lista de temas do projeto, com o modo de cada um e as ações Editar, Tornar padrão e Excluir.
Crie temas com as cores da marca para aplicar no checkout. O tema marcado como padrão vale para todos os funis; cada funil pode usar um tema próprio. Os campos não preenchidos usam as cores padrão do checkout automaticamente.
Na prática, são três camadas:
Camada
O que acontece
Tema padrão do projeto
Vale para todos os funis que não tiverem um tema próprio
Tema aplicado a funis específicos
Sobrepõe o padrão naqueles funis
Campo deixado em branco
Cai nas cores padrão do checkout, automaticamente
Você pode ter mais de um tema no projeto. Cada card da lista mostra o nome e o modo (Modo claro ou Modo escuro), com as ações Editar, Tornar padrão e Excluir.
No menu do projeto, entre em Branding. A tela lista os temas que já existem.
Clique em Novo tema
O botão fica no topo, à direita, e abre o editor. O editor tem quatro seções na navegação: Tema, Order Bump, Timer e Métodos de pagamento.
O editor de tema aberto em Novo tema: a navegação com as quatro seções à esquerda e, na coluna central, Tema, Order Bump, Timer e Métodos de pagamento, cada um com sua pré-visualização.
Dê um nome e escolha o modo do checkout
Nome do tema e Modo do checkout (Claro ou Escuro). O modo escolhido também comanda as pré-visualizações do editor.
Defina a cor principal
As demais cores são derivadas dela automaticamente. Se quiser, sobrescreva qualquer uma em Editar manualmente.
Ajuste order bump, timer e métodos de pagamento
As outras três seções do editor.
Escolha onde o tema se aplica
Marque Definir como tema padrão do projeto e/ou selecione funis em Aplicar a funis específicos. Pode deixar vazio e aplicar depois.
Crie o tema
Clique em Criar tema. Os outros botões do editor são Voltar para temas, Restaurar padrão Assiny e Cancelar.
Escolha a cor principal da marca. As demais cores são derivadas automaticamente — você pode editá-las manualmente se quiser.
Você não precisa preencher cor por cor: escolhe a Cor principal e o resto sai dela — e continua editável, se você quiser fugir do resultado calculado.
Campo
O que ele faz
Nome do tema (obrigatório)
Como o tema aparece na lista. Placeholder: “Ex.: Marca principal”
Modo do checkout
Claro ou Escuro
Cor principal (obrigatório)
A cor de onde as demais são derivadas
Cor do botão de compra
Vem em Automático; pode ser trocada em Editar manualmente
Texto do botão de compra
Vem em Automático — nesse modo ele se ajusta por contraste
Logo (URL)
O endereço da imagem do logo
Sobre o botão de compra, a tela explica:
Cor do botão “Comprar” no checkout. Em automático usa a cor principal, e o texto ajusta por contraste. Defina cores próprias para destacar o CTA.
O Modo do checkout não é uma preferência do editor: o checkout é exibido só nesse modo, claro ou escuro. Escolher Escuro significa que todo mundo vê o checkout escuro.
O bloco Cores complementares reúne o que foi calculado a partir da cor principal — “para manter o equilíbrio”, nas palavras da tela. Todas aceitam edição manual:
Cor complementar
Valor exibido no editor
Texto sobre a cor principal
#ffffff
Cor de destaque
#4c13e8
Texto sobre o destaque
#ffffff
Anel de foco
#6938ef
O editor traz uma pré-visualização das cores ao vivo: você mexe no campo e vê o resultado ali mesmo, sem precisar abrir um checkout para conferir.
Esta seção controla a “aparência e comportamento da oferta adicional” — ou seja, como o order bump se apresenta dentro do checkout.
Campo
O que a tela diz
Modelo
Clássico ou Moldura
Exibir seta
”Seta de chamada apontando para a oferta.”
Exibir título
”Cabeçalho de destaque (ex.: ‘SIM, EU ACEITO…’).”
Animação
”Seta/destaque com animação para chamar atenção.”
Permitir marcar todos
”Exibe a opção de aceitar todos os order bumps de uma vez.”
Modelo do “aceitar todas”
Clássico, Flutuante ou Moldura
O Modelo do “aceitar todas” depende do interruptor anterior: “Ligue ‘Permitir marcar todos’ para escolher o modelo.”Duas cores fecham a seção: Cor de destaque (#7b50f1 no editor) e Cor da seta/nome (#d92d20).
O timer é a barra de contagem regressiva do checkout. Aqui você define só a aparência dela:
Barra de contagem regressiva. Você ajusta o fundo e o texto (título e rótulos); os cartões e os números são fixos do componente.
Campo
Valor exibido no editor
Modelo
Clássico
Fundo
#27272b
Texto
#ffffff
A pré-visualização repete o limite para não restar dúvida: “Cartões brancos e números em vermelho são fixos do componente”. Não adianta procurar o campo da cor dos números — ele não existe.Quem liga o timer é a oferta, no interruptor Adicionar timer de escassez — veja Oferta. O tema só diz como ele fica.