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

# Upcart-HTML-Positionsbibliothek

> Erfahre, wo benutzerdefiniertes HTML und JavaScript im Cart Drawer erscheinen.

<div id="overview">
  # Übersicht
</div>

Mit Upcart kannst du HTML oder JavaScript über den **Custom-HTML**-Editor an bestimmten Positionen im Warenkorb einfügen. Das gibt dir volle Kontrolle über Layout, Sichtbarkeit und bedingte Inhalte innerhalb des Warenkorb-Erlebnisses.

Nutze diese Anleitung, um zu verstehen, wie sich jede Position verhält und wo dein Inhalt erscheint.

<div id="available-html-locations">
  ## Verfügbare HTML-Positionen
</div>

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

Wird direkt unter dem Warenkorb-Header gerendert, vor allen Modulen.\
Nutze diese Position für seitenweite Nachrichten, Hinweise oder dynamische Banner.

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

Wird direkt nach den Announcements- und Rewards-Modulen angezeigt, unmittelbar vor der Produktliste.

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

Wiederholt dein HTML nach jedem Produkt im Warenkorb.\
Ideal, um Haftungsausschlüsse oder zusätzliche produktspezifische Informationen anzuzeigen.

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

Wird unter der Produktliste gerendert, nach allen Warenkorbpositionen. Nutze diese Position für Nachrichten, Banner oder eigene Inhalte, die unter den Produkten, aber über Upsells und Add-ons erscheinen sollen.

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

Erscheint unter der Produktliste und den Upsells, aber über dem Add-ons-Bereich.\
Ideal für Nachrichten, die zu Garantie- oder Versandschutz-Angeboten überleiten.

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

Wird im Footer-Bereich angezeigt, direkt über dem Checkout-Button und der Zwischensumme.\
Wird oft für Preisaufschlüsselungen, Versandhinweise oder Bedingungen verwendet.

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

Ebenfalls im Footer, positioniert nach dem Checkout-Button und vor den Express-Payment-Buttons. Add-ons werden ganz oben im Footer gerendert, deutlich darüber.\
Hilfreich für sekundäre CTAs oder rechtliche Hinweise.

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

Wird außerhalb des Footer-Bereichs ganz unten im Cart Drawer angezeigt.\
Erbt nicht die Hintergrundfarbe des Footers.

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

Wird nur angezeigt, wenn der Warenkorb leer ist.\
Erscheint direkt **unter** der Nachricht „Your cart is empty“ und über dem Empfehlungsmodul — nützlich für eine unterstützende Zeile oder einen Link zu einer Kollektion.

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

Unsichtbare Platzierung, um JavaScript **vor** dem Laden des Warenkorbs auszuführen.\
Nutze sie zum Definieren von Variablen, Setzen von Bedingungen oder Ändern des Upcart-Verhaltens.

* Alle Custom-HTML-Platzierungen werden verwaltet unter:\
  **Upcart > Cart Editor > Settings > Custom HTML**

<div id="visual-reference">
  ## Visuelle Referenz
</div>

Um klar zu verstehen, wo jede Position innerhalb des Warenkorbs gerendert wird, sieh dir das beschriftete Layout unten an

<Frame>
  <img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/html-locations-labeled-cart-drawer.gif?s=fd801e149233b51066ee15010556c375" alt="Beschrifteter Upcart-Cart-Drawer, der zeigt, wo jede Custom-HTML-Position gerendert wird" width="700" height="1080" data-path="images/upcart/html-locations-labeled-cart-drawer.gif" />
</Frame>