> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# HTML personalizado

> Adicione HTML ou JavaScript personalizado ao seu carrinho usando o editor de HTML integrado.

A seção **Custom HTML** do Upcart permite inserir código personalizado em várias partes do cart drawer.\
Você também pode escrever JavaScript usando tags `<script>` e interagir com o carrinho usando a [API pública](https://rokt.notion.site/upcart-public-api) do Upcart (por exemplo, `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Onde encontrar**
</div>

Acesse: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Como funciona**
</div>

O menu suspenso **HTML Location** permite escolher onde o código aparecerá dentro do layout do carrinho. Com base na sua seleção, o código será injetado na área correspondente do carrinho.

Você pode usar isso para adicionar:

* Mensagens personalizadas
* Textos de confiança
* Integrações de apps
* Snippets de analytics
* Ganchos de estilização
* Conteúdo promocional, como banners com ofertas ou descontos personalizados
* Garantias de produto que aumentam a confiança do cliente

<div id="dynamic-tokens">
  ## **Tokens dinâmicos**
</div>

Você pode usar o seguinte token dentro de qualquer campo de Custom HTML para injetar dados do carrinho em tempo real:

| Token                 | O que ele renderiza                                          |
| --------------------- | ------------------------------------------------------------ |
| `{{UPCART_SUBTOTAL}}` | O subtotal atual do carrinho, formatado na moeda da sua loja |

**Exemplo:**

```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<p>Your current total: <strong>{{UPCART_SUBTOTAL}}</strong></p>
```

Esse token funciona em todos os campos de localização de HTML, exceto **Scripts (Before Load)**, onde você deve usar a API JavaScript. Este é o único token dinâmico disponível nos campos de Custom HTML.

<div id="available-html-locations">
  ## **Localizações de HTML disponíveis**
</div>

|                                        |                                                                                                                                                       |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Localização                            | Descrição                                                                                                                                             |
| **Above announcements/rewards**        | Topo do carrinho, abaixo do cabeçalho do carrinho.                                                                                                    |
| **Below header/announcements/rewards** | Imediatamente abaixo de quaisquer anúncios ou barras de recompensa.                                                                                   |
| **Between each line item**             | Injetado abaixo de cada produto no carrinho.                                                                                                          |
| **Below cart items**                   | Diretamente abaixo dos itens do carrinho, acima dos módulos inferiores.                                                                               |
| **Above footer/add-ons**               | Abaixo dos itens do carrinho e upsells, acima dos add-ons.                                                                                            |
| **Above checkout button**              | Dentro do rodapé, diretamente acima do botão de checkout e do subtotal.                                                                               |
| **Below checkout button**              | Dentro do rodapé, diretamente abaixo do botão de checkout.                                                                                            |
| **Bottom of cart**                     | Bem no final do drawer (fora do rodapé).                                                                                                              |
| **On empty cart screen**               | Exibido ao lado do texto "Your cart is empty".                                                                                                        |
| **Scripts (Before Load)**              | Área invisível para executar JavaScript **antes** de o carrinho carregar. Ideal para rastreamento, lógica condicional ou comportamento personalizado. |

<div id="custom-css-optional">
  ## **CSS personalizado (opcional)**
</div>

Você pode estilizar seu HTML usando o editor **Custom CSS**, disponível em:\
**Upcart > Cart Editor > Settings > Custom CSS**

Por exemplo, para ajustar o alinhamento do carrinho vazio:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }
```