HTML personalizado

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 do Upcart (por exemplo, upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)).

Onde encontrar

Acesse: Cart Editor > Settings > Custom HTML

Como funciona

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

Tokens dinâmicos

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:

<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.

Localizações de HTML disponíveis


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.

CSS personalizado (opcional)

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:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

Primeiros passos

Módulos do carrinho

Configurações do carrinho

Botão de carrinho fixo

Multicart

Personalizações

Análises

Integrações e compatibilidade

Faturamento e conta

Solução de problemas

Onde encontrar

Como funciona

Tokens dinâmicos

Localizações de HTML disponíveis

CSS personalizado (opcional)

​Onde encontrar

​Como funciona

​Tokens dinâmicos

​Localizações de HTML disponíveis

​CSS personalizado (opcional)

Onde encontrar

Como funciona

Tokens dinâmicos

Localizações de HTML disponíveis

CSS personalizado (opcional)