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

# Modulo annunci

> Scopri come personalizzare la barra degli annunci nel tuo drawer Upcart, inclusi altezza, posizione, timer per il conto alla rovescia, formattazione del testo e colori.

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

L'impostazione Height controlla lo spessore della barra degli annunci. Offre tre opzioni: **Slim**, **Normal** e **Thick**. Slim mantiene il drawer più compatto, lasciando spazio al contenuto del carrello — particolarmente utile sugli schermi più piccoli. Normal si colloca a metà strada. Thick offre maggiore enfasi visiva, aiutando il tuo messaggio a risaltare agli occhi dei clienti.

<div id="position">
  # Posizione
</div>

Usa l'impostazione Position per scegliere se la barra degli annunci deve apparire **Before products** o **After products** all'interno del cart drawer.

* **Before products** posiziona la barra in cima al corpo del carrello, direttamente sotto l'header.
* **After products** la posiziona in fondo al corpo del carrello, appena sopra il footer — sotto i moduli note e upsell se anch'essi sono posizionati lì.

<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="Due carrelli Upcart a confronto con la barra degli annunci posizionata sopra e sotto i prodotti" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## Durata del timer
</div>

Se vuoi che l'annuncio scada dopo un tempo prestabilito, imposta un conto alla rovescia nel campo **Timer duration**. Accetta il formato `MM:SS` — `05:00` per cinque minuti, `00:30` per trenta secondi. I secondi devono essere tra `00` e `59`; il campo rifiuta qualsiasi valore superiore.

Il conto alla rovescia parte solo se il testo dell'annuncio contiene la variabile del timer. Una volta scaduto, l'intera barra degli annunci viene rimossa automaticamente dal carrello.

<Note>
  Il timer per il conto alla rovescia integrato è basato sulla sessione e conta alla rovescia a partire da un numero di minuti prestabilito. Non supporta conti alla rovescia ricorrenti o giornalieri che si azzerano a un'ora specifica (ad esempio, un conto alla rovescia fino alle 14:00 di ogni giorno). Questa funzionalità non è attualmente disponibile in Upcart.
</Note>

<div id="announcement-text">
  ## Testo dell'annuncio
</div>

Questa sezione ti permette di inserire e formattare il messaggio visualizzato nel banner degli annunci. Puoi stilizzare porzioni specifiche del testo usando la barra di formattazione sopra il campo di inserimento, che include opzioni per grassetto, corsivo, sottolineato e colore.

<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="Selettore colore aperto per stilizzare il testo nell'editor del testo dell'annuncio" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  Il campo Announcement Text non supporta i collegamenti ipertestuali — non c'è alcun pulsante per link o URL nella barra di formattazione, e i tag `<a>` o i link Markdown incollati vengono rimossi al salvataggio. Per rendere l'annuncio cliccabile o includere un link, usa invece il modulo **Custom HTML** (vedi sotto).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### Aggiungere un link o un URL all'annuncio
</div>

Poiché il campo Announcement Text integrato non renderizza i collegamenti ipertestuali, puoi sostituire o integrare la barra degli annunci inserendo un link con Custom HTML:

1. Vai su **Upcart > Cart Editor > Settings > Custom HTML**.

2. Imposta **HTML Location** su **Above announcements/rewards** (per apparire sopra la barra degli annunci) o **Below header/announcements/rewards** (per apparire direttamente sotto di essa).

3. Incolla uno snippet con il tuo link, ad esempio:

   ```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. Clicca su **Save**, poi testa nel tuo carrello live.

Per saperne di più sulle posizioni e sullo styling di Custom HTML, consulta [Custom HTML](/it/upcart/custom_html) e [Custom CSS](/it/upcart/custom_css). Il team di supporto di Upcart non scrive né esegue debug di codice personalizzato — rivolgiti a uno Shopify Expert se hai bisogno di aiuto per crearlo.

Se usi la funzione conto alla rovescia, inserisci la variabile del timer direttamente nel tuo messaggio. Usa `{{timer}}` per i carrelli V2 o `{TIMER}` per i carrelli 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 del testo dell'annuncio con la variabile del conto alla rovescia aggiunta al messaggio" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

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

Assicurati di digitare manualmente la variabile del timer (`{{timer}}` per V2, `{TIMER}` per V1) invece di copiarla e incollarla. Questo evita problemi di formattazione nascosti che potrebbero impedire al timer di essere visualizzato correttamente nel tuo carrello live.

<div id="font-size">
  # Dimensione del font
</div>

Puoi controllare la dimensione del testo dell'annuncio usando lo slider, con opzioni che vanno da 10px a 24px. Questo aiuta a garantire la leggibilità sia su mobile che su desktop.

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

Background Color ti permette di definire il colore di riempimento complessivo della barra degli annunci. Border Color ti consente di regolare le linee orizzontali sopra e sotto il banner per un aspetto da contenitore stilizzato.

<div id="advanced-timer-configuration">
  # Configurazione avanzata del timer
</div>

Per funzionalità aggiuntive, è possibile usare JavaScript per personalizzare il timer del conto alla rovescia. Aggiungi il tuo script nella sezione **"Scripts (Before Load)"** anziché nel modulo Custom HTML. Si tratta di un requisito legato ai tempi di caricamento, non di una restrizione di sicurezza — Custom HTML esegue effettivamente gli script, ma vengono eseguiti troppo tardi per agganciarsi in modo affidabile all'evento di caricamento del carrello. La sezione "Scripts (Before Load)" esegue il tuo codice prima del caricamento del carrello, così le callback come `upcartSubscribeCartLoaded` vengono attivate correttamente. Codice di esempio:

```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 legacy: window\.upcartOnCartLoaded funziona ancora ma è deprecato e registra un avviso in console. Usa upcartSubscribeCartLoaded per tutti i nuovi script.

Assicurati di testare attentamente il posizionamento e la sintassi del tuo codice. Alcune restrizioni della piattaforma potrebbero comunque influire su come gli script vengono elaborati.