> For the complete documentation index, see [llms.txt](https://ereemby.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ereemby.gitbook.io/docs/sistema-de-temas/checkout.md).

# Checkout

Personalize o checkout da sua loja com o Editor de Checkout da Ereemby.

## Customização do checkout

Deixe o checkout com a cara da sua marca usando o **Editor de Checkout** da Ereemby.

Tudo é feito no modo visual, sem escrever código. Você ajusta cores, fundo, fontes, animações e ofertas, e vê o resultado na hora em um preview ao vivo da sua loja.

{% hint style="info" %}
O editor é **100% no-code**.

Você não precisa, e não deve, inserir HTML, CSS ou JavaScript próprio no checkout. Isso mantém o fluxo de pagamento padronizado, seguro e em conformidade.
{% endhint %}

### Como abrir o editor

{% stepper %}
{% step %}

#### Acesse o dashboard

Entre no painel da Ereemby com sua conta de **Administrador**.
{% endstep %}

{% step %}

#### Abra o Editor de Checkout

Vá em **Templates** e abra o editor do checkout, ou acesse direto:

`https://ereemby.com/dashboard/editor/checkout`
{% endstep %}

{% step %}

#### Personalize e salve

Ajuste pelo painel da esquerda, acompanhe no preview e clique em **Salvar**.
{% endstep %}
{% endstepper %}

***

### Como o editor funciona

O editor tem três áreas:

* **Painel de edição:** abas com as opções **Cores**, **Fundo**, **Fontes**, **Animações**, **Order Bump**, **Upsell** e **Opções**.
* **Preview ao vivo:** o checkout real da sua loja, atualizado em tempo real.
* **Barra superior:** botão **Salvar** e menu `⋮` com **Importar config**, **Exportar config** e **Restaurar padrão**.

{% hint style="warning" %}
As mudanças só entram no ar depois de clicar em **Salvar**.

Use o preview para validar antes.
{% endhint %}

***

### Cores

A aba **Cores** controla o cabeçalho e a paleta geral do checkout.

#### Cabeçalho

* **Logo:** clique em **Escolher** para enviar o logo a partir da **Galeria**, ou deixe **Sem logo**.
* **Alinhamento:** **Esquerda**, **Centro** ou **Direita**.

#### Paleta geral

Cada cor abre um seletor com campo **HEX** e uma paleta **Em uso no momento**. Ela acelera o uso das cores já aplicadas no tema.

| Cor             | Onde aparece                             |
| --------------- | ---------------------------------------- |
| Fundo da página | Cor de fundo geral do checkout           |
| Principal       | Cor dos contêineres e cartões            |
| Destaque        | Cor de ênfase, links, detalhes e seleção |
| Borda           | Linhas e contornos dos blocos            |
| Título          | Cor dos títulos                          |
| Sub título      | Textos secundários e parágrafos          |
| Erro            | Mensagens e estados de erro              |
| Pendente        | Estado de pagamento pendente             |
| Sucesso         | Estado de pagamento aprovado             |

#### Botões

Cores dos botões de ação, como **Gerar pagamento**:

* **Background**
* **Texto**
* **Border**, que pode ser **Transparente**

#### Campo de texto

Cores dos campos de formulário:

* **Background**
* **Border**
* **Border Focus**, usada quando o campo está selecionado
* **Texto**
* **Placeholder**

***

### Fundo

A aba **Fundo** controla o plano de fundo da página do checkout.

#### Imagem de fundo

Clique em **Escolher** para abrir a **Galeria**. Ela usa a biblioteca de imagens da loja, com busca e upload.

Depois de definir uma imagem, aparecem estes controles:

* **Ajuste:** **Preencher**, **Conter** ou **Auto**
* **Posição:** **Centro**, **Topo**, **Base**, **Esquerda** ou **Direita**
* **Repetir:** liga ou desliga a repetição da imagem
* **Opacidade:** de `0%` a `100%`
* **Desfoque:** de `0px` a `30px`
* **Trocar** ou **Remover** a imagem

{% hint style="info" %}
Use imagens leves. Arquivos pesados deixam o checkout mais lento e podem reduzir a conversão.
{% endhint %}

#### Estilo do fundo

Você pode escolher entre três estilos:

* **Sólido:** uma única cor
* **Gradiente:** com **Rotação** de `0°` a `360°` e de **2 a 5 cores**
* **Blur Orbs:** esferas de luz desfocadas sobre uma **Cor base**

No modo **Blur Orbs**, cada esfera aceita:

* **Cor**
* **Posição** em grade `3x3`
* **Tamanho** de `20%` a `95%`
* **Desfoque** de `0px` a `150px`

Você pode usar até **4 orbs**.

#### Acabamento

As camadas finais do fundo são:

* **Escurecer:** de `0%` a `90%`
* **Vinheta:** de `0%` a `90%`
* **Grão:** de `0%` a `100%`

***

### Fontes

A aba **Fontes** controla a tipografia de títulos e corpo.

* **Famílias:** fonte dos **Títulos** e do **Corpo**. Veja a lista abaixo.
* **Tamanho:** ajuste fino em **Geral**, **Títulos** e **Corpo**
* **Título:** **Peso** e **Espaçamento**
* **Corpo:** **Peso** e **Espaçamento**
* **Botão CTA:** **Normal**, **Maiúsculo** ou **Inicial**

#### Fontes disponíveis

As 20 famílias disponíveis são:

`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`, `Work Sans`.

***

### Animações

A aba **Animações** controla os efeitos visuais do checkout.

Use **Reproduzir entrada** para testar a animação de carregamento.

#### Entrada

Define como os elementos aparecem ao carregar a página.

* **Estilo:** **Nenhum**, **Fade**, **Fade cima**, **Fade baixo**, **Escala**, **Slide esq.** ou **Slide dir.**
* **Duração:** de `150ms` a `1200ms`
* **Cascata:** de `0ms` a `200ms`
* **Suavização:** **Padrão**, **Saída**, **Suave** ou **Mola**

#### Hover de botões

Define o efeito ao passar o mouse nos botões.

* **Estilo:** **Nenhum**, **Escala**, **Elevar**, **Brilho** ou **Deslizar**
* **Intensidade:** de `0%` a `100%`
* **Duração:** de `80ms` a `600ms`

#### Hover de cards

Define o efeito ao passar o mouse nos cards.

* **Estilo:** **Nenhum**, **Elevar**, **Escala**, **Borda** ou **Brilho**
* **Intensidade:** de `0%` a `100%`
* **Duração:** de `80ms` a `600ms`

***

### Order Bump

A aba **Order Bump** oferece um produto extra dentro do carrinho quando o cliente já tem um produto específico.

Clique em **+ Novo Order Bump** e configure:

* **Identificação:** nome interno gerado automaticamente, com edição manual
* **Título:** chamada exibida ao cliente
* **Descrição:** texto de apoio
* **Status:** ativa ou desativa a oferta
* **Cores personalizadas:** destaque e texto exclusivos para este order bump
* **Produto do carrinho:** produto de referência que dispara a oferta
* **Produto Sugerido:** produto oferecido ao cliente

{% hint style="info" %}
Quando o cliente tem o **produto de referência** no carrinho, o **produto sugerido** aparece como oferta extra.
{% endhint %}

***

### Upsell

A aba **Upsell** permite recomendar a substituição de um produto que já está no carrinho por outro produto configurado por você.

Clique em **+ Novo Upsell** e configure:

* **Identificação:** nome interno gerado automaticamente, com edição manual
* **Status:** ativa ou desativa a oferta
* **Produto de Referência:** produto presente no carrinho que dispara a oferta
* **Produto Recomendado:** produto que será sugerido como substituição

{% hint style="warning" %}
Cada produto pode ser usado como **Produto de Referência** apenas uma vez.

Se quiser mudar a recomendação, edite o upsell existente.
{% endhint %}

{% hint style="info" %}
Quando o cliente tem o **produto de referência** no carrinho, o **produto recomendado** aparece como alternativa de substituição durante o checkout.
{% endhint %}

***

### Opções

A aba **Opções** mostra ou oculta elementos do checkout.

* **Nome da loja no topo:** mostra o nome ao lado do logo
* **Mensagem de segurança:** mostra o aviso "Seus dados ficam seguros"
* **Rodapé:** mostra o rodapé "Powered by"
* **Pop-up de preenchimento:** abre um modal obrigatório com os campos pendentes

***

### Salvar, importar e exportar

No topo do editor, você encontra estas ações:

* **Salvar:** aplica as mudanças no checkout ao vivo
* **Exportar config:** baixa um arquivo `.json` com a configuração atual
* **Importar config:** carrega uma configuração a partir de um `.json`
* **Restaurar padrão:** volta para a configuração original

{% hint style="info" %}
Use **Exportar config** e **Importar config** para backup e para replicar o mesmo visual entre lojas.
{% endhint %}

***

### Referência do JSON

Esta é a estrutura completa do arquivo gerado em **Exportar config** e aceito em **Importar config**.

Use esta seção como referência quando precisar editar o checkout por arquivo, em vez da interface.

#### Exemplo completo

```json
{
  "header": {
    "logo": null,
    "alignment": "left"
  },
  "colors": {
    "background": "#08090B",
    "container": "#0D0E11",
    "accent": "#ffba09",
    "border": "#1B1B20",
    "title": "#f1f5f9",
    "paragraph": "#8A8A8A",
    "error": "#ff493f",
    "pending": "#ffba09",
    "success": "#21c985"
  },
  "buttons": {
    "background": "#f1f5f9",
    "text": "#070707",
    "border": "transparent"
  },
  "inputs": {
    "background": "#0D0E11",
    "border": "#1B1B20",
    "borderFocus": "#ffba09",
    "text": "#f1f5f9",
    "placeholder": "#8A8A8A"
  },
  "typography": {
    "headings": "Inter",
    "body": "Inter",
    "sizeGeneral": 0,
    "sizeTitle": 0,
    "sizeBody": 0,
    "titleWeight": 500,
    "titleSpacing": 0,
    "bodyWeight": 400,
    "bodySpacing": 0,
    "ctaTransform": "normal"
  },
  "animations": {
    "entrance": {
      "preset": "none",
      "duration": 500,
      "easing": "ease-out",
      "stagger": 60
    },
    "buttonHover": {
      "preset": "none",
      "intensity": 50,
      "duration": 200
    },
    "cardHover": {
      "preset": "none",
      "intensity": 50,
      "duration": 200
    }
  },
  "background": {
    "type": "solid",
    "solid": "#08090B",
    "gradient": {
      "rotation": 135,
      "stops": ["#08090B", "#1B1B20"]
    },
    "orbs": {
      "baseColor": "#08090B",
      "items": [
        { "color": "#ffba09", "position": "top-left", "size": 55, "blur": 70 },
        { "color": "#3e81ed", "position": "bottom-right", "size": 55, "blur": 70 }
      ]
    },
    "image": {
      "url": null,
      "fit": "cover",
      "position": "center",
      "repeat": false,
      "opacity": 100,
      "blur": 0
    },
    "overlay": 0,
    "vignette": 0,
    "grain": 0
  },
  "options": {
    "showStoreName": true,
    "showSecurityMessage": false,
    "showFooter": false,
    "showFieldsPopup": true
  }
}
```

#### `header`

| Campo       | Tipo               | Valores / intervalo       | Padrão |
| ----------- | ------------------ | ------------------------- | ------ |
| `logo`      | `string` ou `null` | URL da imagem via Galeria | `null` |
| `alignment` | `string`           | `left`, `center`, `right` | `left` |

#### `colors`

Todos os campos são cores. O formato aceito é **HEX de 3 ou 6 dígitos**, `#fff` ou `#ffffff`, ou a palavra `transparent`.

Outros formatos, como HEX com alfa de 8 dígitos, `rgb()`, `hsl()` e nomes de cor, não são reconhecidos e voltam ao padrão na importação.

Padrões:

* `background`: `#08090B`
* `container`: `#0D0E11`
* `accent`: `#ffba09`
* `border`: `#1B1B20`
* `title`: `#f1f5f9`
* `paragraph`: `#8A8A8A`
* `error`: `#ff493f`
* `pending`: `#ffba09`
* `success`: `#21c985`

#### `buttons` e `inputs`

As cores seguem o mesmo formato acima. O valor `transparent` é aceito em qualquer um destes campos.

* `buttons`: `background`, `text`, `border`
* `inputs`: `background`, `border`, `borderFocus`, `text`, `placeholder`

#### `typography`

| Campo          | Tipo             | Valores / intervalo                 | Padrão   |
| -------------- | ---------------- | ----------------------------------- | -------- |
| `headings`     | `string`         | Uma das 20 fontes                   | `Inter`  |
| `body`         | `string`         | Uma das 20 fontes                   | `Inter`  |
| `sizeGeneral`  | `number`         | `-2` a `2`                          | `0`      |
| `sizeTitle`    | `number`         | `-4` a `4`                          | `0`      |
| `sizeBody`     | `number`         | `-3` a `3`                          | `0`      |
| `titleWeight`  | `number`         | `300` a `800`                       | `500`    |
| `titleSpacing` | `number` em `em` | `-0.05` a `0.15`                    | `0`      |
| `bodyWeight`   | `number`         | `300` a `700`                       | `400`    |
| `bodySpacing`  | `number` em `em` | `-0.05` a `0.15`                    | `0`      |
| `ctaTransform` | `string`         | `normal`, `uppercase`, `capitalize` | `normal` |

#### `animations.entrance`

| Campo      | Tipo           | Valores / intervalo                                                          | Padrão     |
| ---------- | -------------- | ---------------------------------------------------------------------------- | ---------- |
| `preset`   | `string`       | `none`, `fade`, `fade-up`, `fade-down`, `scale`, `slide-left`, `slide-right` | `none`     |
| `duration` | `number` em ms | `150` a `1200`                                                               | `500`      |
| `easing`   | `string`       | `ease` `Padrão`, `ease-out` `Saída`, `ease-in-out` `Suave`, `spring` `Mola`  | `ease-out` |
| `stagger`  | `number` em ms | `0` a `200`                                                                  | `60`       |

Mapa dos estilos:

* `fade` = Fade
* `fade-up` = Fade cima
* `fade-down` = Fade baixo
* `scale` = Escala
* `slide-left` = Slide esq.
* `slide-right` = Slide dir.

#### `animations.buttonHover`

| Campo       | Tipo           | Valores / intervalo                      | Padrão |
| ----------- | -------------- | ---------------------------------------- | ------ |
| `preset`    | `string`       | `none`, `scale`, `lift`, `glow`, `slide` | `none` |
| `intensity` | `number`       | `0` a `100`                              | `50`   |
| `duration`  | `number` em ms | `80` a `600`                             | `200`  |

#### `animations.cardHover`

| Campo       | Tipo           | Valores / intervalo                       | Padrão |
| ----------- | -------------- | ----------------------------------------- | ------ |
| `preset`    | `string`       | `none`, `lift`, `scale`, `border`, `glow` | `none` |
| `intensity` | `number`       | `0` a `100`                               | `50`   |
| `duration`  | `number` em ms | `80` a `600`                              | `200`  |

#### `background`

| Campo      | Tipo     | Valores / intervalo         | Padrão    |
| ---------- | -------- | --------------------------- | --------- |
| `type`     | `string` | `solid`, `gradient`, `orbs` | `solid`   |
| `solid`    | `string` | Cor HEX                     | `#08090B` |
| `overlay`  | `number` | `0` a `90`                  | `0`       |
| `vignette` | `number` | `0` a `90`                  | `0`       |
| `grain`    | `number` | `0` a `100`                 | `0`       |

#### `background.gradient`

| Campo      | Tipo              | Valores / intervalo | Padrão                   |
| ---------- | ----------------- | ------------------- | ------------------------ |
| `rotation` | `number` em graus | `0` a `360`         | `135`                    |
| `stops`    | `array` de HEX    | De `2` a `5` cores  | `["#08090B", "#1B1B20"]` |

#### `background.orbs`

`baseColor` aceita uma cor **HEX**.

`items` aceita de `1` a `4` esferas.

Cada item aceita:

| Campo      | Tipo             | Valores / intervalo                                                                                | Padrão |
| ---------- | ---------------- | -------------------------------------------------------------------------------------------------- | ------ |
| `color`    | `string`         | Cor HEX                                                                                            | —      |
| `position` | `string`         | `top-left`, `top`, `top-right`, `left`, `center`, `right`, `bottom-left`, `bottom`, `bottom-right` | —      |
| `size`     | `number` em `%`  | `20` a `95`                                                                                        | `55`   |
| `blur`     | `number` em `px` | `0` a `150`                                                                                        | `70`   |

Ao adicionar esferas pelo editor, as cores padrão seguem esta sequência:

* `#ffba09`
* `#3e81ed`
* `#21c985`
* `#ff493f`

#### `background.image`

| Campo      | Tipo               | Valores / intervalo                                    | Padrão   |
| ---------- | ------------------ | ------------------------------------------------------ | -------- |
| `url`      | `string` ou `null` | URL da imagem via Galeria                              | `null`   |
| `fit`      | `string`           | `cover` `Preencher`, `contain` `Conter`, `auto` `Auto` | `cover`  |
| `position` | `string`           | `center`, `top`, `bottom`, `left`, `right`             | `center` |
| `repeat`   | `boolean`          | `true` ou `false`                                      | `false`  |
| `opacity`  | `number` em `%`    | `0` a `100`                                            | `100`    |
| `blur`     | `number` em `px`   | `0` a `30`                                             | `0`      |

{% hint style="info" %}
`background.type` decide qual estilo é aplicado, `solid`, `gradient` ou `orbs`.

`background.image` é uma camada que fica sobre o estilo escolhido, independente do `type`.
{% endhint %}

#### `options`

Todos os campos são booleanos.

| Campo                 | O que faz                                         | Padrão  |
| --------------------- | ------------------------------------------------- | ------- |
| `showStoreName`       | Nome da loja ao lado do logo no topo              | `true`  |
| `showSecurityMessage` | Aviso "Seus dados ficam seguros" no formulário    | `false` |
| `showFooter`          | Rodapé "Powered by" no fim da página              | `false` |
| `showFieldsPopup`     | Modal obrigatório para preencher campos pendentes | `true`  |

#### Comportamento da importação

A importação é **tolerante**. Valores inválidos não geram erro. Eles são corrigidos automaticamente.

* **Campos ausentes** assumem o valor padrão.
* **`null`** em qualquer campo equivale a ausente e assume o padrão.
* **Números fora da faixa** são ajustados para o limite mais próximo.
* **Textos inválidos** em campos de lista caem no padrão.
* **Cores inválidas** caem na cor padrão do campo.
* **`gradient.stops`** com menos de 2 cores volta ao padrão. Com mais de 5, é cortado em 5.
* **`orbs.items`** com mais de 4 itens é cortado em 4. Lista vazia volta ao padrão.

{% hint style="info" %}
Importar um JSON incompleto ou com erros é seguro. O que estiver válido é aplicado. O resto volta ao padrão.
{% endhint %}

#### Incrementos no editor

No editor, os controles deslizantes seguem passos fixos. Ao editar o JSON direto, qualquer número dentro da faixa é aceito.

* `sizeGeneral`, `sizeTitle`, `sizeBody`: passo `1`
* `titleWeight`, `bodyWeight`: passo `100`
* `titleSpacing`, `bodySpacing`: passo `0,01`
* `entrance.duration`: passo `50` · `entrance.stagger`: passo `10`
* `buttonHover` e `cardHover`: `duration` passo `20` · `intensity` passo `5`
* `gradient.rotation`: passo `5`
* `orbs.size` e `orbs.blur`: passo `5`
* `image.opacity`: passo `5` · `image.blur`: passo `1`
* `overlay`, `vignette`, `grain`: passo `5`

***

### Conferir no checkout

Depois de salvar, abra sua loja em outra aba, vá até o carrinho e valide o resultado.

Se algo não aparecer, atualize a página ou teste em uma aba anônima.

#### Se você não achar a opção

* Confirme se sua conta tem permissão de **Administrador**
* Confirme se você está na aba correta do editor, **Cores**, **Fundo**, **Fontes**, **Animações**, **Order Bump**, **Upsell** ou **Opções**