Índice
- O que é o Builder?
- Primeiros Passos
- Conhecendo a Interface
- Modelos de Checkout
- Personalizando a Aparência
- Ferramentas de Conversão
- Configurações de Pagamento
- Adicionando Elementos
- Salvando e Publicando
- Dicas e Boas Práticas
O que é o Builder?
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!
Primeiros Passos
Acessando o Builder
1. No seu painel administrativo, acesse a seção de Checkout
- Clique em "Personalizar Checkout" ou "Builder"
- Você será direcionado para a interface do builder
Tour Guiado
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.
Conhecendo a Interface
A interface do builder é dividida em 3 áreas principais:
- 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
- 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
- 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
- Clique no modelo desejado para ver uma prévia
- 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:
- Nível 1: Primeira tentativa de saída
- Nível 2: Segunda tentativa (se o cliente recusar a primeira)
- 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
- Na aba "Elementos", você verá uma lista de componentes disponíveis
- Arraste o elemento desejado para a área de preview
- Solte o elemento na zona onde você quer que ele apareça
- 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:
- Clique no elemento na área de preview
- Um painel lateral abrirá com todas as opções de edição
- Faça suas alterações
- Clique em "Salvar" para aplicar
Removendo um Elemento
- Clique no elemento
- No painel de edição, clique no botão "Excluir" (ícone de lixeira)
- Confirme a exclusão
Reordenando Elementos
- Clique e segure o elemento
- Arraste para cima ou para baixo
- 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:
- Certifique-se de ter salvo um rascunho primeiro
- Revise todas as alterações na pré-visualização
- 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
- Consistência de Cores: Use uma paleta de cores consistente em todo o checkout
- Contraste: Certifique-se de que os textos sejam legíveis sobre os fundos escolhidos
- Hierarquia Visual: Use tamanhos de fonte diferentes para criar hierarquia (títulos maiores, textos menores)
- Espaçamento: Não sobrecarregue o checkout com muitos elementos. Deixe respiro entre as seções
Conversão
- Urgência: Use timers e contadores de vendas para criar urgência
- Prova Social: Adicione depoimentos e avaliações de clientes
- Benefícios: Destaque os principais benefícios do seu produto
- Garantias: Mostre suas garantias e políticas de devolução
- Exit Intent: Configure ofertas progressivas no exit intent para recuperar clientes que estão saindo
Elementos
- Ordem Importante: Coloque os elementos mais importantes no topo
- Mobile First: Sempre verifique como fica no mobile, pois a maioria dos clientes compra pelo celular
- Menos é Mais: Não adicione muitos elementos. Foque no que realmente aumenta a conversão
- Teste: Teste diferentes combinações de elementos para ver o que funciona melhor
Performance
- Imagens: Use imagens otimizadas (não muito pesadas)
- Vídeos: Use vídeos com moderação, pois podem deixar a página mais lenta
- Elementos: Não adicione muitos elementos pesados na mesma página
Acessibilidade
- Cores: Não dependa apenas de cores para transmitir informações
- Texto: Use tamanhos de fonte legíveis
- Contraste: Mantenha bom contraste entre texto e fundo
Precisa de Ajuda?
Se você tiver dúvidas ou precisar de suporte:
- Use a busca no painel lateral (digite palavras-chave como "cores", "botão", etc.)
- Acesse o tour guiado novamente (ícone de interrogação)
- Entre em contato com o suporte através do chat ou email
Resumo Rápido
Fluxo Básico de Personalização:
- Escolha um modelo (ou comece do zero)
- Personalize cores e fontes na aba Aparência
- Configure ferramentas de conversão (Exit Intent, Brindes, Order Bump)
- Adicione elementos nas zonas desejadas
- Salve um rascunho
- Revise tudo na pré-visualização
- 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