Como uso o editor de checkout personalizado?
checkout personalizado editor monitor celular layout
O editor de checkout abre em uma nova aba a partir do ícone Editar layout. No topo, você alterna entre os layouts Monitor e Celular, que são separados, e pode copiar um para o outro. No painel da direita, arraste Texto, Imagem ou Cronômetro, ajuste as cores na aba de estilos e clique em Salvar Checkout.
O editor de checkout é a tela em que você monta a aparência da página de pagamento de uma oferta. O desenho da página, com a posição de cada bloco, é chamado de layout. Ele só abre para um checkout personalizado que você já criou: se ainda não criou, veja Como criar um checkout personalizado.
Como abro o editor?
Passo a passo
- No menu lateral, abra Produtos, entre em Meus produtos e abra o produto.
- Na aba Checkout, localize o checkout personalizado na lista.
- Clique no ícone Editar layout. O editor abre em uma nova aba do navegador.
O ícone Editar layout só aparece em telas maiores. Para editar, use o computador.
O que tem na tela do editor?
- Barra do topo: mostra o nome do checkout, os botões Monitor e Celular, o botão Copiar de… e o botão Salvar Checkout.
- Área central: mostra a página que o comprador vê, com o cabeçalho, o bloco principal com o checkout e uma coluna lateral. Os componentes que você arrastar ficam aqui.
- Painel da direita: tem três abas, identificadas por ícones: componentes, estilos e a configuração da janela de saída.
Como uso os componentes?
Na primeira aba do painel da direita estão os componentes Texto, Imagem e Cronômetro. O painel orienta: arraste um deles para a área pontilhada da página. Para editar, passe o mouse sobre o componente na página e clique no ícone de lápis: o painel passa a mostrar o título Editar, com as opções daquele componente. Para apagar, use a opção de excluir; o editor pergunta “Deseja realmente deletar o componente?”.
As opções de cada componente estão em Como mudar cores, textos e imagens do meu checkout; o cronômetro tem um artigo próprio, Como usar o cronômetro de urgência no checkout. Um detalhe do layout principal: se a coluna lateral ficar sem nenhum componente, ela é removida e a página mostra apenas o checkout.
Computador e celular: dois layouts
O editor guarda dois layouts separados: Monitor (computador) e Celular. Os botões do topo alternam entre eles. Quando o comprador abre o checkout, a Celetus mostra o layout de celular em telas estreitas, como as dos celulares, e o layout de monitor nas telas maiores.
Para não montar tudo duas vezes, use o botão Copiar de…, que mostra o nome do outro layout. O botão aparece como Copiar de Mobile (copiar do celular) ou Copiar de Desktop (copiar do computador). Por exemplo, com o layout Monitor aberto, o botão copia o layout do celular. O editor pede confirmação (“Deseja realmente copiar?”). Atenção: a cópia substitui o layout que está aberto no momento.
Como salvo o checkout?
Clique em Salvar Checkout, no topo. O editor confirma com “Concluído com sucesso”. Salve antes de fechar a aba.
O que é a janela de saída?
A terceira aba do painel, chamada Configuração do Exit Popup, define uma janela que aparece quando o comprador tenta sair da página. Você escolhe um modelo (Nenhum, Imagem ou Imagem e Texto) e a ação do clique: Oferecer desconto, Redirecionar para URL ou Apenas Fechar. Na ação Redirecionar para URL, o campo Oferta permite escolher outra oferta do produto. Para oferecer desconto, você escolhe um cupom que já criou no produto. Veja Como criar um cupom de desconto. O passo a passo está em Como criar a janela de saída (exit popup) com desconto.
Perguntas frequentes
O que muda se eu mexer só no layout Monitor?
Só o layout do computador. O layout do celular é separado e continua como estava, até você editá-lo ou copiar o outro layout para ele.
Posso editar o checkout pelo celular?
O ícone Editar layout não aparece em telas pequenas. Use o computador.
Cometi um erro. Como volto atrás?
Para corrigir um componente, passe o mouse sobre ele, clique no ícone de lápis e edite as opções. Exclua apenas o que quiser remover. Copiar de… não desfaz uma edição: substitui o layout aberto pelo outro layout.