Custom HTML

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 von Upcart mit dem Warenkorb interagieren (z. B. upcartOnCartLoaded (veraltet — verwende upcartSubscribeCartLoaded für neue Skripte)).

Wo du es findest

Gehe zu: Cart Editor > Settings > Custom HTML

So funktioniert es

Ü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

Dynamische Tokens

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:

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

Verfügbare HTML-Positionen


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.

Custom CSS (optional)

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:

[class*="styles_CartPreview__empty__"] { flex-direction: column; } [class*="styles_CartPreview__empty__"] h3 { margin: unset; }

Erste Schritte

Warenkorb-Module

Warenkorb-Einstellungen

Sticky-Warenkorb-Button

Multicart

Anpassungen

Analytics

Integrationen & Kompatibilität

Abrechnung & Konto

Fehlerbehebung

Wo du es findest

So funktioniert es

Dynamische Tokens

Verfügbare HTML-Positionen

Custom CSS (optional)

​Wo du es findest

​So funktioniert es

​Dynamische Tokens

​Verfügbare HTML-Positionen

​Custom CSS (optional)

Wo du es findest

So funktioniert es

Dynamische Tokens

Verfügbare HTML-Positionen

Custom CSS (optional)