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

# Módulo de anúncios

> Aprenda a personalizar a barra de anúncios no seu drawer do Upcart, incluindo altura, posição, cronômetro de contagem regressiva, formatação de texto e cores.

<div id="height">
  # Altura
</div>

A configuração de Altura controla a espessura da barra de anúncios. Ela oferece três opções: **Slim**, **Normal** e **Thick**. Slim mantém o drawer mais compacto, abrindo espaço para o conteúdo do carrinho — especialmente útil em telas menores. Normal fica entre as duas. Thick oferece maior destaque visual, ajudando sua mensagem a chamar a atenção dos clientes.

<div id="position">
  # Posição
</div>

Use a configuração de Posição para escolher se a barra de anúncios aparece **Antes dos produtos** ou **Depois dos produtos** dentro do cart drawer.

* **Antes dos produtos** coloca a barra no topo do corpo do carrinho, logo abaixo do cabeçalho.
* **Depois dos produtos** a coloca na parte inferior do corpo do carrinho, logo acima do rodapé — abaixo dos módulos de notas e upsells, se eles também estiverem posicionados ali.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="Dois carrinhos do Upcart comparando a barra de anúncios posicionada acima e abaixo dos produtos" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## Duração do cronômetro
</div>

Se você quiser que o anúncio expire após um tempo determinado, defina uma contagem regressiva no campo **Timer duration**. Ele usa o formato `MM:SS` — `05:00` para cinco minutos, `00:30` para trinta segundos. Os segundos devem estar entre `00` e `59`; o campo rejeita qualquer valor acima disso.

A contagem regressiva só é executada se o texto do seu anúncio contiver a variável do cronômetro. Quando ela termina, toda a barra de anúncios é removida automaticamente do carrinho.

<Note>
  O cronômetro de contagem regressiva integrado é baseado na sessão e faz a contagem a partir de um número definido de minutos. Ele não oferece suporte a contagens recorrentes ou diárias que reiniciam em um horário específico (por exemplo, contar até as 14h todos os dias). Essa funcionalidade não está disponível atualmente no Upcart.
</Note>

<div id="announcement-text">
  ## Texto do anúncio
</div>

Esta seção permite inserir e formatar a mensagem exibida no banner de anúncio. Você pode estilizar partes específicas do texto usando a barra de formatação acima do campo de entrada, que inclui opções de negrito, itálico, sublinhado e cor.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="Seletor de cores aberto para estilizar o texto no editor de texto do anúncio" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  O campo Announcement Text não oferece suporte a hiperlinks — não há botão de link ou URL na barra de formatação, e tags `<a>` coladas ou links em Markdown são removidos ao salvar. Para tornar o anúncio clicável ou incluir um link, use o módulo **Custom HTML** (veja abaixo).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### Adicionar um link ou URL ao anúncio
</div>

Como o campo Announcement Text integrado não renderiza hiperlinks, você pode substituir ou complementar a barra de anúncios injetando um link com Custom HTML:

1. Vá em **Upcart > Cart Editor > Settings > Custom HTML**.

2. Defina **HTML Location** como **Above announcements/rewards** (para aparecer acima da barra de anúncios) ou **Below header/announcements/rewards** (para aparecer logo abaixo dela).

3. Cole um snippet com o seu link, por exemplo:

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

4. Clique em **Save** e depois teste no seu carrinho ativo.

Para mais informações sobre as localizações e a estilização do Custom HTML, veja [Custom HTML](/pt/upcart/custom_html) e [Custom CSS](/pt/upcart/custom_css). A equipe de suporte do Upcart não escreve nem depura código personalizado — procure um Shopify Expert se precisar de ajuda para criá-lo.

Se você estiver usando o recurso de contagem regressiva, insira a variável do cronômetro diretamente na sua mensagem. Use `{{timer}}` para carrinhos V2 ou `{TIMER}` para carrinhos V1.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="Campo de texto do anúncio com a variável de contagem regressiva do cronômetro adicionada à mensagem" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## Importante
</div>

Certifique-se de digitar manualmente a variável do cronômetro (`{{timer}}` para V2, `{TIMER}` para V1) em vez de copiá-la e colá-la. Isso evita problemas de formatação ocultos que poderiam impedir o cronômetro de ser exibido corretamente no seu carrinho ativo.

<div id="font-size">
  # Tamanho da fonte
</div>

Você pode controlar o tamanho do texto do anúncio usando o controle deslizante, com opções que vão de 10px a 24px. Isso ajuda a garantir a legibilidade tanto no mobile quanto no desktop.

<div id="colors">
  # Cores
</div>

Background Color permite definir a cor de preenchimento geral da barra de anúncios. Border Color permite ajustar as linhas horizontais acima e abaixo do banner para um visual de contêiner estilizado.

<div id="advanced-timer-configuration">
  # Configuração avançada do cronômetro
</div>

Para funcionalidades adicionais, é possível usar JavaScript para personalizar o cronômetro de contagem regressiva. Adicione seu script na seção **"Scripts (Before Load)"**, e não no módulo Custom HTML. Isso é um requisito de tempo de carregamento, não uma restrição de segurança — o Custom HTML executa scripts, mas eles rodam tarde demais para se conectar de forma confiável ao evento de carregamento do carrinho. A seção "Scripts (Before Load)" executa seu código antes de o carrinho carregar, então callbacks como `upcartSubscribeCartLoaded` disparam corretamente. Código de exemplo:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeCartLoaded(function(event) {
    // Your countdown timer code here
    // event.cart contains the cart object with .items[], .total, .currency
  });
</script>
```

Nota sobre versões antigas: window\.upcartOnCartLoaded ainda funciona, mas está obsoleto e registra um aviso no console. Use upcartSubscribeCartLoaded para todos os scripts novos.

Teste com cuidado o posicionamento e a sintaxe do seu código. Algumas restrições da plataforma ainda podem afetar como os scripts são processados.