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

# Biblioteca de locais de HTML do Upcart

> Saiba onde o HTML e o JavaScript personalizados aparecerão no cart drawer.

<div id="overview">
  # Visão geral
</div>

O Upcart permite inserir HTML ou JavaScript em locais específicos do carrinho usando o editor de **Custom HTML**. Isso dá controle total sobre layout, visibilidade e conteúdo condicional dentro da experiência do carrinho.

Use este guia para entender como cada local se comporta e onde seu conteúdo aparecerá.

<div id="available-html-locations">
  ## Locais de HTML disponíveis
</div>

<div id="above-announcementsrewards">
  #### **Above announcements/rewards**
</div>

Renderiza diretamente abaixo do cabeçalho do carrinho, antes de qualquer módulo.\
Use para adicionar mensagens para todo o site, avisos ou banners dinâmicos.

<div id="below-headerannouncementsrewards">
  #### **Below header/announcements/rewards**
</div>

Exibe diretamente após os módulos de Anúncios e Recompensas, e logo antes da lista de produtos.

<div id="between-each-line-item">
  #### **Between each line item**
</div>

Repete seu HTML após cada produto no carrinho.\
Ideal para exibir avisos legais ou informações adicionais específicas de produto.

<div id="below-cart-items">
  #### **Below cart items**
</div>

Renderiza abaixo da lista de produtos, depois de todos os itens de linha do carrinho. Use para mensagens, banners ou conteúdo personalizado que deve aparecer abaixo dos produtos, mas acima dos upsells e add-ons.

<div id="above-footeradd-ons">
  #### **Above footer/add-ons**
</div>

Aparece abaixo da lista de produtos e dos upsells, mas acima da seção de Add-ons.\
Ótimo para mensagens que introduzem ofertas de garantia ou proteção de envio.

<div id="above-checkout-button">
  #### **Above checkout button**
</div>

Exibe na área do rodapé, logo acima do botão de checkout e do subtotal.\
Frequentemente usado para mostrar detalhamento de preços, avisos de frete ou termos.

<div id="below-checkout-button">
  #### **Below checkout button**
</div>

Também no rodapé, posicionado depois do botão de checkout e antes dos botões de pagamento expresso. Os add-ons renderizam no topo do rodapé, bem acima disto.\
Útil para CTAs secundários ou avisos legais.

<div id="bottom-of-cart">
  #### **Bottom of cart**
</div>

Exibe fora da área do rodapé, na parte mais inferior do cart drawer.\
Não herda a cor de fundo do rodapé.

<div id="on-empty-cart-screen">
  #### **On empty cart screen**
</div>

Aparece apenas quando o carrinho está vazio.\
Exibe diretamente **abaixo** da mensagem "Your cart is empty" e acima do módulo de recomendações — útil para uma linha de apoio ou um link para uma coleção.

<div id="scripts-before-load">
  #### **Scripts (Before Load)**
</div>

Posicionamento invisível usado para executar JavaScript **antes** de o carrinho carregar.\
Use para definir variáveis, estabelecer condições ou modificar o comportamento do Upcart.

* Todos os posicionamentos de HTML personalizado são gerenciados em:\
  **Upcart > Cart Editor > Settings > Custom HTML**

<div id="visual-reference">
  ## Referência visual
</div>

Para entender claramente onde cada local renderiza dentro do carrinho, consulte o layout com rótulos abaixo

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/html-locations-labeled-cart-drawer.gif?s=fd801e149233b51066ee15010556c375" alt="Cart drawer do Upcart com rótulos mostrando onde cada local de HTML personalizado renderiza" width="700" height="1080" data-path="images/upcart/html-locations-labeled-cart-drawer.gif" />
</Frame>