> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.wiapy.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Como personalizar o visual do checkout

# Checkout — Editar visual

As abas **Editar visual** e **Editar visual página de upsell** abrem o **editor visual** da Wiapy, onde você personaliza com blocos:

* **Editar visual** → a página de pagamento (checkout);
* **Editar visual página de upsell** → a página de obrigado/upsell exibida após o pagamento.

## Conhecendo o editor

![Editor visual do checkout com painel de elementos, preview e propriedades](https://storage.crisp.chat/users/helpdesk/website/-/5/f/1/b/5f1b4caec6bf5000/editor-checkout_1u32w6k.png)

O editor tem três áreas:

| Área | O que faz |
| ---- |
| **Elementos** (esquerda) | Blocos disponíveis para adicionar: Imagem, Texto, Banner, Vídeo (YouTube/Vimeo), Garantia, Depoimento, Botão WhatsApp, Cronômetro, Notificação (prova social), Espaçador, HTML livre e Popup Desconto |
| **Preview** (centro) | A página como o cliente verá. Você edita o **Cabeçalho** (acima do formulário) e o **Rodapé** (abaixo); o formulário de pagamento em si é uma **área não editável** |
| **Propriedades** (direita) | Ao clicar em um bloco no preview, aqui aparecem as opções dele (textos, cores, links, imagem etc.) |

E a barra superior:

* **← Voltar** — retorna para a edição do checkout;
* **Desfazer / Refazer** — histórico de alterações (também pelos atalhos de teclado Ctrl/Cmd+Z);
* **Ícones de viewport** — alterna o preview entre desktop, tablet e celular;
* **Preview** — abre uma prévia da página montada;
* **Salvar** — publica as alterações.

## Como usar

1. Abra o checkout (**Checkout → Meus checkouts → ✎**) e clique em **Editar visual**.
2. Clique em um elemento no painel esquerdo (ou no **＋** do cabeçalho/rodapé) para adicionar o bloco.
3. Selecione o bloco no preview e ajuste as opções no painel **Propriedades**. Cada bloco também tem ações rápidas: remover, duplicar e mover para cima/baixo.
4. Confira nos três tamanhos de tela e clique em **Salvar**.

## Página de upsell/obrigado

O fluxo é o mesmo — clique em **Editar visual página de upsell** no menu lateral. O editor abre com o título **"Página de Obrigado"** e os mesmos blocos, aplicados à página exibida após o pagamento.

![Editor visual da página de obrigado/upsell](https://storage.crisp.chat/users/helpdesk/website/-/5/f/1/b/5f1b4caec6bf5000/editor-upsell_1u7pzfw.png)