Pular para o conteúdo principal
VENDAS · 10 MIN

Checkout Builder

O Checkout Builder é onde você monta a página de pagamento dos seus produtos. Arraste blocos, personalize cores, adicione order bumps e transforme visitantes em alunos — tudo sem código.

Visão geral do Checkout Builder com tema escuro.

1

Acessando o Builder

No menu lateral, vá em Vendas & Ofertas → Checkout Editor. Você verá o canvas central (preview do checkout) e a sidebar esquerda com os blocos disponíveis.

Tema Escuro Pepper

O builder usa tema Deep Navy (#0f172a) com destaques em verde esmeralda. Se quiser customizar as cores, use o painel de Global Settings no topo direito.
2

Blocos Disponíveis

Cada bloco representa uma seção do checkout:

  • Header: Logo, título e subtítulo do produto
  • Formulário: Campos de nome, email, CPF, telefone
  • Pagamento: Seleção de método (Cartão, Pix, Boleto)
  • Order Bumps: Ofertas adicionais pré-compra
  • Garantia: Selo de garantia com prazo configurável
  • Depoimentos: Provas sociais com fotos e texto
  • Timer: Urgência com contagem regressiva
  • Trust Badges: Selos de segurança e pagamento seguro
3

Drag & Drop de Blocos

Arraste blocos da sidebar esquerda para o canvas central. A ordem dos blocos no canvas é a ordem que aparecerá no checkout final. Use o ícone de arrastar (⠿) para reordenar blocos já adicionados.

Order Bumps

Os Order Bumps podem ser arrastados da sidebar de módulos. Cada bump aparecerá como uma oferta "Adicione por +R$XX" antes do botão de pagamento.
4

Personalização Visual

Clique em qualquer bloco no canvas para abrir o painel de edição. Você pode ajustar:

  • Cores de fundo e texto
  • Bordas e arredondamentos
  • Espaçamentos e padding
  • Ícones e imagens da galeria
5

Conectando ao Produto

No painel Conexão, vincule o checkout a um produto existente (App, Módulo ou Produto da Loja). Defina o gateway de pagamento ativo (Stripe, Mercado Pago, Asaas, etc.) e o método preferido.

Gateway Obrigatório

Se nenhum gateway estiver configurado em Integrações, o checkout não processará pagamentos reais. Configure pelo menos um gateway em Integrações → Pagamento.