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

> Aggiungi HTML o JavaScript personalizzato al tuo carrello usando l'editor HTML integrato.

La sezione **Custom HTML** di Upcart ti permette di inserire codice personalizzato in varie parti del cart drawer.\
Puoi anche scrivere JavaScript usando i tag `<script>` e interagire con il carrello tramite la [Public API](https://rokt.notion.site/upcart-public-api) di Upcart (ad es. `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Dove trovarlo**
</div>

Vai a: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Come funziona**
</div>

Il menu a tendina **HTML Location** ti permette di scegliere dove il codice apparirà all'interno del layout del carrello. In base alla tua selezione, il codice verrà iniettato nell'area corrispondente del carrello.

Puoi usarlo per aggiungere:

* Messaggi personalizzati
* Testi di fiducia
* Integrazioni con app
* Snippet di analytics
* Hook di stile
* Contenuti promozionali, come banner con offerte o sconti personalizzati
* Garanzie sui prodotti che rafforzano la fiducia dei clienti

<div id="dynamic-tokens">
  ## **Token dinamici**
</div>

Puoi usare il seguente token in qualsiasi campo Custom HTML per iniettare dati del carrello in tempo reale:

| Token                 | Cosa mostra                                                                |
| --------------------- | -------------------------------------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | Il subtotale attuale del carrello, formattato nella valuta del tuo negozio |

**Esempio:**

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

Questo token funziona in tutti i campi di posizione HTML tranne **Scripts (Before Load)**, dove dovresti invece usare l'API JavaScript. Questo è l'unico token dinamico disponibile nei campi Custom HTML.

<div id="available-html-locations">
  ## **Posizioni HTML disponibili**
</div>

|                                        |                                                                                                                                                                |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Posizione                              | Descrizione                                                                                                                                                    |
| **Above announcements/rewards**        | Parte superiore del carrello, sotto l'intestazione del carrello.                                                                                               |
| **Below header/announcements/rewards** | Immediatamente sotto eventuali annunci o barre dei premi.                                                                                                      |
| **Between each line item**             | Iniettato sotto ogni prodotto nel carrello.                                                                                                                    |
| **Below cart items**                   | Direttamente sotto gli articoli del carrello, sopra i moduli inferiori.                                                                                        |
| **Above footer/add-ons**               | Sotto gli articoli del carrello e gli upsell, sopra gli add-on.                                                                                                |
| **Above checkout button**              | All'interno del footer, direttamente sopra il pulsante di checkout e il subtotale.                                                                             |
| **Below checkout button**              | All'interno del footer, direttamente sotto il pulsante di checkout.                                                                                            |
| **Bottom of cart**                     | In fondo al drawer (fuori dal footer).                                                                                                                         |
| **On empty cart screen**               | Mostrato accanto al testo "Your cart is empty".                                                                                                                |
| **Scripts (Before Load)**              | Area invisibile per eseguire JavaScript **prima** che il carrello venga caricato. Ideale per tracciamento, logica condizionale o comportamenti personalizzati. |

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

Puoi dare stile al tuo HTML usando l'editor **Custom CSS** che si trova in:\
**Upcart > Cart Editor > Settings > Custom CSS**

Ad esempio, per regolare l'allineamento del carrello vuoto:

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