O checkout tem um editor próprio, com pré-visualização ao lado. Por ser a tela em que o comprador digita os dados de pagamento, ele não aceita HTML nem JavaScript: você escolhe entre opções seguras.

Abrir o editor#

Em Templates, abra o Editor de Checkout, ou vá direto para o editor. Clique em Salvar para publicar as alterações.

Aba	O que muda
Cores	Cabeçalho, paleta geral, botões e campos de texto.
Fundo	Cor sólida, gradiente, esferas de luz ou imagem.
Fontes	Família, tamanho, peso, espaçamento e o texto dos botões.
Animações	Entrada da página e hover de botões e cards.
Order Bump	Oferta extra marcada dentro do checkout, com preço e regra próprios. Veja Ofertas.
UpSell	Sugere trocar um produto do carrinho por outro melhor. A oferta depois do pagamento fica em Ofertas.
Opções	Nome da loja, mensagem de segurança, rodapé e popup de campos.

Importar e exportar#

No menu de três pontos ficam Exportar config, Importar config e a opção de restaurar o padrão. Exportar gera um arquivo JSON para reutilizar o visual em outra loja.

Referência do JSON#

Cabeçalho e cores#

Campo	Valores
`header.logo`	URL `https://...`, caminho `/...` ou `null`
`header.alignment`	`left`, `center` ou `right`
`colors.*`	`background`, `container`, `accent`, `border`, `title`, `paragraph`, `error`, `pending`, `success`
`buttons.*`	`background`, `text`, `border`
`inputs.*`	`background`, `border`, `borderFocus`, `text`, `placeholder`

As cores de colors, buttons e inputs aceitam HEX de 3 ou 6 dígitos ou transparent. As cores de background aceitam só HEX.

Tipografia#

Campo	Valores
`typography.headings`, `typography.body`	Uma das 20 fontes abaixo
`typography.sizeGeneral`	-2 a 2
`typography.sizeTitle`	-4 a 4
`typography.sizeBody`	-3 a 3
`typography.titleWeight`	300 a 800
`typography.bodyWeight`	300 a 700
`typography.titleSpacing`, `typography.bodySpacing`	-0.05 a 0.15
`typography.ctaTransform`	`normal`, `uppercase` ou `capitalize`

Fontes: Inter, Roboto, Open Sans, Lato, Montserrat, Poppins, Nunito, Source Sans 3, Raleway, Playfair Display, Merriweather, DM Sans, Oswald, Josefin Sans, Ubuntu, Noto Sans, PT Sans, Quicksand, Rubik e Work Sans.

Animações#

Campo	Valores
`animations.entrance.preset`	`none`, `fade`, `fade-up`, `fade-down`, `scale`, `slide-left`, `slide-right`
`animations.entrance.duration`	150 a 1200
`animations.entrance.easing`	`ease`, `ease-out`, `ease-in-out`, `spring`
`animations.entrance.stagger`	0 a 200
`animations.buttonHover.preset`	`none`, `scale`, `lift`, `glow`, `slide`
`animations.cardHover.preset`	`none`, `lift`, `scale`, `border`, `glow`
`animations.buttonHover.intensity`, `animations.cardHover.intensity`	0 a 100
`animations.buttonHover.duration`, `animations.cardHover.duration`	80 a 600

Fundo#

Campo	Valores
`background.type`	`solid`, `gradient` ou `orbs`
`background.solid`	HEX
`background.gradient.rotation`	0 a 360
`background.gradient.stops`	De 2 a 5 cores HEX
`background.orbs.baseColor`	HEX
`background.orbs.items`	Até 4 esferas com `color`, `position`, `size` e `blur`
Posição da esfera	`top-left`, `top`, `top-right`, `left`, `center`, `right`, `bottom-left`, `bottom`, `bottom-right`
`size` da esfera	20 a 95
`blur` da esfera	0 a 150
`background.image.url`	Como `header.logo`
`background.image.fit`	`cover`, `contain` ou `auto`
`background.image.position`	`center`, `top`, `bottom`, `left` ou `right`
`background.image.repeat`	`true` ou `false`
`background.image.opacity`	0 a 100
`background.image.blur`	0 a 30
`background.overlay`, `background.vignette`	0 a 90
`background.grain`	0 a 100

Opções#

Campo	O que controla
`options.showStoreName`	Mostra o nome da loja
`options.showSecurityMessage`	Mostra a mensagem de segurança
`options.showFooter`	Mostra o rodapé
`options.showFieldsPopup`	Mostra o popup de campos

O que o comprador precisa informar#

Os dados pedidos no checkout não ficam no editor. Eles ficam em Configuração, nas opções de Checkout: Nome, Telefone, CPF/CNPJ, Endereço e Forçar login.