> ## 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 personnalisé

> Ajoutez du HTML ou du JavaScript personnalisé à votre panier à l'aide de l'éditeur HTML intégré.

La section **Custom HTML** d'Upcart vous permet d'insérer du code personnalisé dans différentes parties du tiroir de panier.\
Vous pouvez également écrire du JavaScript à l'aide de balises `<script>` et interagir avec le panier via l'[API publique](https://rokt.notion.site/upcart-public-api) d'Upcart (par ex., `upcartOnCartLoaded (deprecated — use upcartSubscribeCartLoaded for new scripts)`).

<div id="where-to-find-it">
  ## **Où le trouver**
</div>

Allez dans : **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **Comment ça fonctionne**
</div>

Le menu déroulant **HTML Location** vous permet de choisir où le code apparaîtra dans la mise en page du panier. Selon votre sélection, le code sera injecté dans la zone correspondante du panier.

Vous pouvez l'utiliser pour ajouter :

* Des messages personnalisés
* Du texte de confiance
* Des intégrations d'applications
* Des extraits d'analytique
* Des points d'ancrage pour le style
* Du contenu promotionnel, comme des bannières avec des offres ou des remises personnalisées
* Des garanties produit qui renforcent la confiance des clients

<div id="dynamic-tokens">
  ## **Jetons dynamiques**
</div>

Vous pouvez utiliser le jeton suivant dans n'importe quel champ Custom HTML pour injecter des données de panier en direct :

| Jeton                 | Ce qu'il affiche                                                         |
| --------------------- | ------------------------------------------------------------------------ |
| `{{UPCART_SUBTOTAL}}` | Le sous-total actuel du panier, formaté dans la devise de votre boutique |

**Exemple :**

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

Ce jeton fonctionne dans tous les champs d'emplacement HTML sauf **Scripts (Before Load)**, où vous devriez plutôt utiliser l'API JavaScript. C'est le seul jeton dynamique disponible dans les champs Custom HTML.

<div id="available-html-locations">
  ## **Emplacements HTML disponibles**
</div>

|                                        |                                                                                                                                                               |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Emplacement                            | Description                                                                                                                                                   |
| **Above announcements/rewards**        | Haut du panier, sous l'en-tête du panier.                                                                                                                     |
| **Below header/announcements/rewards** | Immédiatement sous les annonces ou les barres de récompense.                                                                                                  |
| **Between each line item**             | Injecté sous chaque produit du panier.                                                                                                                        |
| **Below cart items**                   | Directement sous les articles du panier, au-dessus des modules du bas.                                                                                        |
| **Above footer/add-ons**               | Sous les articles du panier et les upsells, au-dessus des add-ons.                                                                                            |
| **Above checkout button**              | À l'intérieur du pied de page, directement au-dessus du bouton de paiement et du sous-total.                                                                  |
| **Below checkout button**              | À l'intérieur du pied de page, directement sous le bouton de paiement.                                                                                        |
| **Bottom of cart**                     | Tout en bas du tiroir (en dehors du pied de page).                                                                                                            |
| **On empty cart screen**               | Affiché à côté du texte « Your cart is empty ».                                                                                                               |
| **Scripts (Before Load)**              | Zone invisible pour exécuter du JavaScript **avant** le chargement du panier. Idéal pour le suivi, la logique conditionnelle ou un comportement personnalisé. |

<div id="custom-css-optional">
  ## **CSS personnalisé (facultatif)**
</div>

Vous pouvez styliser votre HTML à l'aide de l'éditeur **Custom CSS** situé sous :\
**Upcart > Cart Editor > Settings > Custom CSS**

Par exemple, pour ajuster l'alignement du panier vide :

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