1. O que é o Builder?

2. Primeiros Passos

3. Conhecendo a Interface

4. Modelos de Checkout

5. Personalizando a Aparência

6. Ferramentas de Conversão

7. Configurações de Pagamento

8. Adicionando Elementos

9. Salvando e Publicando

10. Dicas e Boas Práticas

O Builder de Checkout é uma ferramenta visual que permite personalizar completamente o design e comportamento do seu checkout. Com ele, você pode:

- Escolher entre 5 layouts diferentes (temas)

- Personalizar cores, fontes e estilos

- Adicionar elementos visuais (textos, imagens, vídeos, depoimentos, etc.)

- Configurar ferramentas de conversão (brindes, ofertas, exit intent)

- Ajustar configurações de pagamento

- Visualizar em tempo real como ficará no celular, tablet e computador

Tudo isso sem precisar escrever uma linha de código!

1. No seu painel administrativo, acesse a seção de Checkout

2. Clique em "Personalizar Checkout" ou "Builder"

3. Você será direcionado para a interface do builder

Na primeira vez que você acessar o builder, um tour guiado será oferecido automaticamente. Recomendamos que você faça o tour para conhecer todas as funcionalidades disponíveis.

Se você pular o tour, pode acessá-lo novamente clicando no ícone de interrogação (?) no canto superior direito da tela.

A interface do builder é dividida em 3 áreas principais:

1. Barra Superior (Toolbar)

Localizada no topo da tela, contém:

- Botão Voltar: Retorna ao painel administrativo

- Seletores de Dispositivo: Visualize como seu checkout aparece em Mobile (celular), Tablet e Desktop (computador)

- Botão de Ajuda: Acessa o tour guiado

- Salvar Rascunho: Salva suas alterações sem publicar

- Publicar: Torna suas alterações visíveis para os clientes

2. Painel Lateral Esquerdo (Sidebar)

Aqui você encontra todas as opções de personalização, organizadas em abas:

- Modelos: Templates prontos para começar

- Aparência: Cores, fontes e estilos visuais

- Conversão: Ferramentas para aumentar vendas

- Pagamentos: Configurações de métodos de pagamento

- Layout: Cabeçalho, rodapé e estrutura

- Elementos: Componentes que podem ser adicionados

- Efeitos: Animações e efeitos visuais

- Configurações: Opções gerais e avançadas

### 3. Área de Preview (Visualização)

O lado direito mostra uma pré-visualização em tempo real do seu checkout. Todas as alterações que você fizer aparecerão instantaneamente aqui.

---

## Modelos de Checkout

Antes de começar a personalizar, você pode escolher um modelo pré-configurado que já vem com cores, estilos e elementos otimizados.

### Como Aplicar um Modelo

1. Na aba "Modelos", você verá 5 opções disponíveis:

- Solarys: Checkout elegante com foco em conversão

- Valory: Experiência moderna e ultra rápida

- Tokvex: Layout minimalista inspirado no TikTok Shop

- Streamline: Layout horizontal com 3 etapas lado a lado

- CorvexFy: Layout estilo CorvexFy com 2 colunas

2. Clique no modelo desejado para ver uma prévia

3. Clique em "Aplicar Modelo" para usar esse template

Dica: Você pode aplicar um modelo a qualquer momento, mesmo depois de ter feito personalizações. Isso substituirá suas configurações atuais pelas do modelo escolhido.

---

## Personalizando a Aparência

A aba "Aparência" é onde você define o visual geral do seu checkout.

### Layout do Checkout

Aqui você escolhe qual dos 5 temas usar. Cada tema tem um layout diferente. Você pode trocar de tema a qualquer momento. As personalizações de cores e elementos são mantidas ao trocar de tema.

### Esquema de Cores

Personalize as cores principais do seu checkout:

- Cor Principal: Usada em botões, links e elementos destacados

- Cor Secundária: Cor complementar para criar contraste

- Cor de Fundo: Cor de fundo geral do checkout

- Cor do Botão: Cor específica dos botões de ação

- Cor do Lado Direito (Tema 5): Cor de fundo da coluna direita

Dica: O seletor de cores tem uma "memória" das cores que você já usou no tema, facilitando manter a consistência visual.

### Tipografia

Escolha as fontes que serão usadas no checkout:

- Fonte do Corpo: Fonte principal para textos

- Fonte do Título: Fonte para títulos e cabeçalhos

Você pode escolher entre várias opções de fontes, incluindo Inter, Roboto, Open Sans, Poppins e muitas outras.

### Arredondamento

Defina o quanto os elementos terão as bordas arredondadas:

- Botões: Arredondamento dos botões

- Inputs: Arredondamento dos campos de formulário

- Cards: Arredondamento dos cards e containers

Opções disponíveis: Nenhum (bordas retas), Pequeno, Médio, Grande, Extra Grande, Totalmente Arredondado.

---

## Ferramentas de Conversão

A aba "Conversão" contém ferramentas poderosas para aumentar suas vendas.

### Exit Intent

O Exit Intent é um modal que aparece quando o cliente tenta sair da página, oferecendo uma última chance de conversão.

#### Configurações Básicas

- Ativar Exit Intent: Liga ou desliga a funcionalidade

- Tempo de Espera: Quanto tempo o cliente precisa estar na página antes do modal aparecer

#### Níveis de Oferta

Você pode configurar até 3 níveis de oferta:

1. Nível 1: Primeira tentativa de saída

2. Nível 2: Segunda tentativa (se o cliente recusar a primeira)

3. Nível 3: Terceira tentativa (última chance)

Para cada nível, você pode personalizar:

- Título: Texto principal do modal

- Descrição: Texto explicativo

- Desconto: Percentual ou valor do desconto

- Código do Cupom: Código que será gerado

- Botão Principal: Texto e ação do botão principal

- Botão Secundário: Texto e ação do botão de recusa

- Imagem: Imagem opcional para o modal

- Cores: Todas as cores do modal (fundo, texto, botões, etc.)

### Brindes

Configure produtos brinde que aparecem automaticamente no checkout:

- Ativar Brindes: Liga ou desliga a funcionalidade

- Título do Card: Título que aparece no card do brinde

- Descrição: Descrição do brinde

- Imagem: Imagem do produto brinde

- Cores: Personalize todas as cores do card de brinde

- Badge "Brinde": Personalize o badge que identifica o brinde

### Order Bump

O Order Bump é uma oferta adicional que aparece durante o checkout, incentivando o cliente a adicionar mais um produto.

#### Configurações

- Visualizar Order Bump: Ative para ver como ficará no preview

- Tipo de Borda: Escolha entre tracejada, sólida ou pontilhada

- Posição: Onde o order bump aparece:

- Pagamento: Na área de pagamento

- Resumo do Pedido: No resumo do pedido (lado direito)

#### Personalização Visual

- Cores do Card: Borda, fundo, título

- Botão de Ação: Cor, texto, arredondamento

- Produto: Cores do título, preço e descrição do produto

---

## Configurações de Pagamento

Na aba "Pagamentos", você configura como os métodos de pagamento aparecem.

### PIX Gerado

Personalize a página que aparece após o cliente escolher pagar com PIX:

- Aviso de PIX: Exibir ou ocultar aviso informativo sobre o pagamento

- Facilitador de Banco: Mostrar opções de facilitadores de banco

- Comprovante: Permitir upload de comprovante de pagamento

- Aviso do Beneficiário: Exibir informações sobre o beneficiário do PIX

### Configurações de Pagamento

Configure comportamentos gerais dos métodos de pagamento:

- Método Padrão: Qual método aparece selecionado por padrão

- Parcelamento: Configurações de parcelas no cartão

- Documento: Se o CPF/CNPJ é obrigatório

- E muito mais...

---

## Adicionando Elementos

A aba "Elementos" contém todos os componentes que você pode adicionar ao seu checkout para torná-lo mais completo e persuasivo.

### Como Adicionar um Elemento

1. Na aba "Elementos", você verá uma lista de componentes disponíveis

2. Arraste o elemento desejado para a área de preview

3. Solte o elemento na zona onde você quer que ele apareça

4. O elemento será adicionado automaticamente

### Zonas Disponíveis

Dependendo do tema escolhido, você terá diferentes zonas onde pode adicionar elementos:

- Topo: Antes do formulário de checkout

- Antes da Identificação: Antes dos campos de dados pessoais

- Após Identificação: Depois dos dados pessoais

- Antes do Endereço: Antes dos campos de endereço

- Após Endereço: Depois do endereço

- Antes do Pagamento: Antes dos métodos de pagamento

- Após Pagamento: Depois do pagamento

- Antes do Carrinho: Antes do resumo do pedido

- Após Carrinho: Depois do resumo

- Rodapé: No final da página

### Elementos Disponíveis

#### Texto

Adicione textos personalizados com título e conteúdo.

Personalizações:

- Título e conteúdo

- Tamanho da fonte

- Alinhamento (esquerda, centro, direita)

- Cores (texto e fundo)

#### Imagem

Adicione imagens para destacar produtos, ofertas ou informações.

Personalizações:

- Upload de imagem

- Tamanho e proporção

- Arredondamento

- Link (opcional)

#### Vídeo

Incorpore vídeos do YouTube ou Vimeo.

Personalizações:

- URL do vídeo

- Tamanho

- Autoplay (reproduzir automaticamente)

#### Depoimentos (Testimonial)

Mostre avaliações e depoimentos de clientes.

Personalizações:

- Múltiplos depoimentos em um único elemento

- Foto, nome, texto e avaliação (estrelas) para cada depoimento

- Título e descrição opcionais

- Modos de exibição:

- Separado: Cada depoimento em um card individual

- Lista: Todos em uma lista com divisórias

- Carrossel: Depoimentos que rolam horizontalmente

#### Benefícios

Liste os principais benefícios do seu produto ou serviço.

Personalizações:

- Múltiplos itens com ícone, título e descrição

- Layout:

- Empilhado: Itens um abaixo do outro

- Grade: Itens em grid (você escolhe quantas colunas)

- Horizontal: Itens lado a lado

- Espaçamento entre itens

- Alinhamento

- Cores personalizadas

#### Timer (Contador Regressivo)

Crie urgência com um contador regressivo.

Personalizações:

- Título (ex: "Oferta termina em:")

- Data e hora de término

- Cores (título, números, fundo)

#### Barra de Progresso

Mostre o progresso de uma meta (ex: "Faltam 5 vendas para frete grátis").

Personalizações:

- Título

- Valor atual e meta

- Cores (barra, texto, fundo)

#### Contador de Vendas

Exiba quantas pessoas compraram recentemente.

Personalizações:

- Ícone

- Texto (ex: "pessoas compraram")

- Cores (valor, ícone, texto, fundo)

#### Avaliação (Rating)

Mostre a avaliação geral do produto.

Personalizações:

- Número de estrelas

- Número total de avaliações

- Cores (estrelas, texto, fundo)

#### Selo (Seal)

Adicione selos de garantia, certificação ou destaque.

Personalizações:

- Texto do selo

- Ícone ou imagem

- Cores (fundo, texto, borda)

#### Lista

Crie listas com checkmarks (✓).

Personalizações:

- Título

- Múltiplos itens

- Mostrar ou ocultar checkmarks

- Alinhamento

- Tamanhos de fonte

#### Galeria

Exiba múltiplas imagens em uma galeria.

Personalizações:

- Múltiplas imagens

- Layout (grid ou carrossel)

- Tamanho das imagens

#### Garantia

Destaque sua garantia ou política de devolução.

Personalizações:

- Título

- Descrição

- Ícone

- Cores personalizadas

#### FAQ (Perguntas Frequentes)

Adicione perguntas e respostas comuns.

Personalizações:

- Múltiplas perguntas e respostas

- Estilo de expansão (acordeon)

- Cores personalizadas

#### Cabeçalho (Header)

Adicione um cabeçalho personalizado.

Personalizações:

- Logo ou título

- Variante (título, logo, ambos)

- Cores

### Editando um Elemento

Depois de adicionar um elemento:

1. Clique no elemento na área de preview

2. Um painel lateral abrirá com todas as opções de edição

3. Faça suas alterações

4. Clique em "Salvar" para aplicar

### Removendo um Elemento

1. Clique no elemento

2. No painel de edição, clique no botão "Excluir" (ícone de lixeira)

3. Confirme a exclusão

### Reordenando Elementos

1. Clique e segure o elemento

2. Arraste para cima ou para baixo

3. Solte na nova posição

### Visibilidade por Dispositivo

Cada elemento pode ser configurado para aparecer apenas em certos dispositivos:

- Desktop: Apenas em computadores

- Tablet: Apenas em tablets

- Mobile: Apenas em celulares

- Todos: Em todos os dispositivos

Isso permite criar experiências otimizadas para cada tipo de tela.

---

## Salvando e Publicando

### Salvar Rascunho

O botão "Salvar Rascunho" salva suas alterações sem torná-las públicas. Isso é útil para:

- Trabalhar em etapas

- Testar diferentes versões

- Salvar seu progresso antes de publicar

Importante: As alterações só são salvas quando você clica em "Salvar Rascunho". Se você fechar o navegador sem salvar, suas alterações serão perdidas.

### Publicar

O botão "Publicar" torna suas alterações visíveis para todos os clientes que acessarem o checkout.

Antes de publicar:

1. Certifique-se de ter salvo um rascunho primeiro

2. Revise todas as alterações na pré-visualização

3. Teste em diferentes dispositivos (mobile, tablet, desktop)

Após publicar:

- As alterações ficam ativas imediatamente

- Todos os clientes verão a nova versão

- Você pode continuar editando e publicar novas versões a qualquer momento

---

## Dicas e Boas Práticas

### Design e Visual

1. Consistência de Cores: Use uma paleta de cores consistente em todo o checkout

2. Contraste: Certifique-se de que os textos sejam legíveis sobre os fundos escolhidos

3. Hierarquia Visual: Use tamanhos de fonte diferentes para criar hierarquia (títulos maiores, textos menores)

4. Espaçamento: Não sobrecarregue o checkout com muitos elementos. Deixe respiro entre as seções

### Conversão

1. Urgência: Use timers e contadores de vendas para criar urgência

2. Prova Social: Adicione depoimentos e avaliações de clientes

3. Benefícios: Destaque os principais benefícios do seu produto

4. Garantias: Mostre suas garantias e políticas de devolução

5. Exit Intent: Configure ofertas progressivas no exit intent para recuperar clientes que estão saindo

### Elementos

1. Ordem Importante: Coloque os elementos mais importantes no topo

2. Mobile First: Sempre verifique como fica no mobile, pois a maioria dos clientes compra pelo celular

3. Menos é Mais: Não adicione muitos elementos. Foque no que realmente aumenta a conversão

4. Teste: Teste diferentes combinações de elementos para ver o que funciona melhor

### Performance

1. Imagens: Use imagens otimizadas (não muito pesadas)

2. Vídeos: Use vídeos com moderação, pois podem deixar a página mais lenta

3. Elementos: Não adicione muitos elementos pesados na mesma página

### Acessibilidade

1. Cores: Não dependa apenas de cores para transmitir informações

2. Texto: Use tamanhos de fonte legíveis

3. Contraste: Mantenha bom contraste entre texto e fundo

---

## Precisa de Ajuda?

Se você tiver dúvidas ou precisar de suporte:

1. Use a busca no painel lateral (digite palavras-chave como "cores", "botão", etc.)

2. Acesse o tour guiado novamente (ícone de interrogação)

3. Entre em contato com o suporte através do chat ou email

---

## Resumo Rápido

Fluxo Básico de Personalização:

1. Escolha um modelo (ou comece do zero)

2. Personalize cores e fontes na aba Aparência

3. Configure ferramentas de conversão (Exit Intent, Brindes, Order Bump)

4. Adicione elementos nas zonas desejadas

5. Salve um rascunho

6. Revise tudo na pré-visualização

7. Publique quando estiver satisfeito

Lembre-se: Você pode editar e republicar quantas vezes quiser! Experimente, teste e encontre a combinação perfeita para aumentar suas vendas.

---

*Última atualização: Janeiro 2026*