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

# Bibliothèque d'emplacements HTML Upcart

> Découvrez où le HTML et le JavaScript personnalisés apparaîtront dans le tiroir de panier.

<div id="overview">
  # Aperçu
</div>

Upcart vous permet d'insérer du HTML ou du JavaScript à des emplacements spécifiques dans tout le panier à l'aide de l'éditeur **Custom HTML**. Cela vous donne un contrôle total sur la mise en page, la visibilité et le contenu conditionnel au sein de l'expérience du panier.

Utilisez ce guide pour comprendre le comportement de chaque emplacement et savoir où votre contenu apparaîtra.

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

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

S'affiche directement sous l'en-tête du panier, avant tout module.\
Utilisez cet emplacement pour ajouter des messages à l'échelle du site, des indicateurs ou des bannières dynamiques.

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

S'affiche directement après les modules Announcements et Rewards, et juste avant la liste des produits.

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

Répète votre HTML après chaque produit du panier.\
Idéal pour afficher des avertissements ou des informations supplémentaires spécifiques au produit.

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

S'affiche sous la liste des produits, après toutes les lignes d'articles du panier. Utilisez cet emplacement pour des messages, des bannières ou du contenu personnalisé qui doit apparaître sous les produits mais au-dessus des upsells et des compléments.

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

Apparaît sous la liste des produits et les upsells, mais au-dessus de la section Add-ons.\
Parfait pour des messages introduisant des offres de garantie ou de protection d'expédition.

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

S'affiche dans la zone du pied de page, juste au-dessus du bouton de paiement et du sous-total.\
Souvent utilisé pour afficher des détails de prix, des avis d'expédition ou des conditions.

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

Également dans le pied de page, positionné après le bouton de paiement et avant les boutons de paiement express. Les compléments s'affichent en haut du pied de page, bien au-dessus de cet emplacement.\
Utile pour des CTA secondaires ou des mentions légales.

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

S'affiche en dehors de la zone du pied de page, tout en bas du tiroir de panier.\
N'hérite pas de la couleur d'arrière-plan du pied de page.

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

Ne s'affiche que lorsque le panier est vide.\
S'affiche directement **sous** le message "Your cart is empty" et au-dessus du module de recommandations — utile pour une phrase d'accompagnement ou un lien vers une collection.

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

Emplacement invisible utilisé pour exécuter du JavaScript **avant** le chargement du panier.\
Utilisez cet emplacement pour définir des variables, établir des conditions ou modifier le comportement d'Upcart.

* Tous les emplacements de HTML personnalisé sont gérés sous :\
  **Upcart > Cart Editor > Settings > Custom HTML**

<div id="visual-reference">
  ## Référence visuelle
</div>

Pour bien comprendre où chaque emplacement s'affiche dans le panier, référez-vous à la mise en page annotée ci-dessous

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/html-locations-labeled-cart-drawer.gif?s=fd801e149233b51066ee15010556c375" alt="Tiroir de panier Upcart annoté montrant où s'affiche chaque emplacement de HTML personnalisé" width="700" height="1080" data-path="images/upcart/html-locations-labeled-cart-drawer.gif" />
</Frame>