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

# Custom HTML

> Füge deinem Warenkorb mit dem integrierten HTML-Editor benutzerdefiniertes HTML oder JavaScript hinzu.

Der Bereich **Custom HTML** in Upcart ermöglicht es dir, benutzerdefinierten Code in verschiedene Teile des Cart Drawers einzufügen.\
Du kannst auch JavaScript mit `<script>`-Tags schreiben und über die [Public API](https://rokt.notion.site/upcart-public-api) von Upcart mit dem Warenkorb interagieren (z. B. `upcartOnCartLoaded (veraltet — verwende upcartSubscribeCartLoaded für neue Skripte)`).

<div id="where-to-find-it">
  ## **Wo du es findest**
</div>

Gehe zu: **Cart Editor > Settings > Custom HTML**

<div id="how-it-works">
  ## **So funktioniert es**
</div>

Über das Dropdown **HTML Location** wählst du, wo der Code innerhalb des Warenkorb-Layouts erscheinen soll. Basierend auf deiner Auswahl wird der Code in den entsprechenden Warenkorbbereich eingefügt.

Damit kannst du Folgendes hinzufügen:

* Benutzerdefinierte Nachrichten
* Vertrauensbildende Texte
* App-Integrationen
* Analytics-Snippets
* Styling-Hooks
* Werbeinhalte, etwa Banner mit personalisierten Angeboten oder Rabatten
* Produktgarantien, die das Vertrauen der Kunden stärken

<div id="dynamic-tokens">
  ## **Dynamische Tokens**
</div>

Du kannst das folgende Token in jedem Custom-HTML-Feld verwenden, um Live-Warenkorbdaten einzufügen:

| Token                 | Was es darstellt                                                                   |
| --------------------- | ---------------------------------------------------------------------------------- |
| `{{UPCART_SUBTOTAL}}` | Die aktuelle Zwischensumme des Warenkorbs, formatiert in der Währung deines Stores |

**Beispiel:**

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

Dieses Token funktioniert in allen HTML-Positionsfeldern außer **Scripts (Before Load)**, wo du stattdessen die JavaScript-API verwenden solltest. Es ist das einzige dynamische Token, das in Custom-HTML-Feldern verfügbar ist.

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

|                                        |                                                                                                                                                          |
| -------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Position                               | Beschreibung                                                                                                                                             |
| **Above announcements/rewards**        | Oben im Warenkorb, unter dem Warenkorb-Header.                                                                                                           |
| **Below header/announcements/rewards** | Direkt unter allen Ankündigungen oder Rewards-Leisten.                                                                                                   |
| **Between each line item**             | Wird unter jedem Produkt im Warenkorb eingefügt.                                                                                                         |
| **Below cart items**                   | Direkt unter den Warenkorb-Positionen, über den unteren Modulen.                                                                                         |
| **Above footer/add-ons**               | Unter den Warenkorbartikeln und Upsells, über den Add-ons.                                                                                               |
| **Above checkout button**              | Im Footer, direkt über dem Checkout-Button und der Zwischensumme.                                                                                        |
| **Below checkout button**              | Im Footer, direkt unter dem Checkout-Button.                                                                                                             |
| **Bottom of cart**                     | Ganz unten im Drawer (außerhalb des Footers).                                                                                                            |
| **On empty cart screen**               | Wird neben dem Text „Your cart is empty“ angezeigt.                                                                                                      |
| **Scripts (Before Load)**              | Unsichtbarer Bereich, um JavaScript **vor** dem Laden des Warenkorbs auszuführen. Ideal für Tracking, bedingte Logik oder benutzerdefiniertes Verhalten. |

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

Du kannst dein HTML mit dem **Custom-CSS**-Editor gestalten, den du hier findest:\
**Upcart > Cart Editor > Settings > Custom CSS**

Um zum Beispiel die Ausrichtung des leeren Warenkorbs anzupassen:

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