Skip to main content

​
Höhe

Die Höheneinstellung steuert, wie dick die Ankündigungsleiste erscheint. Sie bietet drei Optionen: Slim, Normal und Thick. Slim hält den Drawer kompakter und schafft Platz für den Warenkorbinhalt – besonders hilfreich auf kleineren Bildschirmen. Normal liegt zwischen den beiden. Thick sorgt für stärkere visuelle Betonung und hilft, dass deine Botschaft bei den Kunden auffällt.

​
Position

Verwende die Positionseinstellung, um festzulegen, ob die Ankündigungsleiste Before products oder After products im Cart Drawer erscheint.
  • Before products platziert die Leiste oben im Warenkorb-Körper, direkt unter dem Header.
  • After products platziert sie unten im Warenkorb-Körper, direkt über dem Footer – unterhalb der Notiz- und Upsell-Module, falls diese ebenfalls dort platziert sind.
Zwei Upcart-Warenkörbe im Vergleich mit der Ankündigungsleiste über und unter den Produkten

​
Timer-Dauer

Wenn die Ankündigung nach einer bestimmten Zeit ablaufen soll, lege im Feld Timer duration einen Countdown fest. Es akzeptiert das Format MM:SS – 05:00 für fünf Minuten, 00:30 für dreißig Sekunden. Die Sekunden müssen zwischen 00 und 59 liegen; das Feld lehnt alles Höhere ab. Der Countdown läuft nur, wenn dein Ankündigungstext die Timer-Variable enthält. Sobald er abgelaufen ist, wird die gesamte Ankündigungsleiste automatisch aus dem Warenkorb entfernt.
Der integrierte Countdown-Timer ist sitzungsbasiert und zählt von einer festgelegten Anzahl von Minuten herunter. Er unterstützt keine wiederkehrenden oder täglichen Countdowns, die zu einer bestimmten Uhrzeit zurückgesetzt werden (zum Beispiel ein täglicher Countdown bis 14:00 Uhr). Diese Funktionalität ist in Upcart derzeit nicht verfügbar.

​
Ankündigungstext

In diesem Abschnitt kannst du die im Ankündigungsbanner angezeigte Nachricht eingeben und formatieren. Du kannst bestimmte Textabschnitte über die Formatierungsleiste oberhalb des Eingabefelds gestalten, die Optionen für Fett, Kursiv, Unterstreichung und Farbe enthält. Beim Anwenden einer Farbe kannst du das Farbwähler-Feld verwenden oder einen Hex-Code (zum Beispiel #DDDDDD) in das Textfeld unter dem Farbwähler eingeben oder einfügen. Geöffneter Farbwähler zum Gestalten von Text im Editor für den Ankündigungstext
Das Feld für den Ankündigungstext unterstützt keine Hyperlinks – es gibt keine Link- oder URL-Schaltfläche in der Formatierungsleiste, und eingefügte <a>-Tags oder Markdown-Links werden beim Speichern entfernt. Um die Ankündigung anklickbar zu machen oder einen Link einzufügen, verwende stattdessen das Modul Custom HTML (siehe unten).
Da das integrierte Feld für den Ankündigungstext keine Hyperlinks darstellt, kannst du die Ankündigungsleiste ersetzen oder ergänzen, indem du mit Custom HTML einen Link einfügst:
  1. Gehe zu Upcart > Cart Editor > Settings > Custom HTML.
  2. Setze HTML Location auf Above announcements/rewards (um über der Ankündigungsleiste zu erscheinen) oder Below header/announcements/rewards (um direkt darunter zu erscheinen).
  3. Füge ein Snippet mit deinem Link ein, zum Beispiel:
  4. Klicke auf Save und teste es dann in deinem Live-Warenkorb.
Mehr zu den Custom-HTML-Positionen und zum Styling findest du unter Custom HTML und Custom CSS. Das Support-Team von Upcart schreibt oder debuggt keinen benutzerdefinierten Code – wende dich an einen Shopify Expert, wenn du Hilfe bei der Erstellung brauchst. Wenn du die Countdown-Funktion verwendest, füge die Timer-Variable direkt in deine Nachricht ein. Verwende {{timer}} für V2-Warenkörbe oder {TIMER} für V1-Warenkörbe. Feld für den Ankündigungstext mit der zur Nachricht hinzugefügten Countdown-Timer-Variable

​
Wichtig

Achte darauf, die Timer-Variable ({{timer}} für V2, {TIMER} für V1) manuell einzutippen, statt sie zu kopieren und einzufügen. So vermeidest du versteckte Formatierungsprobleme, die verhindern könnten, dass der Timer in deinem Live-Warenkorb korrekt angezeigt wird.

​
Schriftgröße

Du kannst die Größe des Ankündigungstexts über den Schieberegler steuern, mit Optionen von 10px bis 24px. Das hilft, die Lesbarkeit sowohl auf Mobilgeräten als auch auf dem Desktop sicherzustellen.

​
Farben

Mit Background Color legst du die allgemeine Füllfarbe der Ankündigungsleiste fest. Mit Border Color passt du die horizontalen Linien über und unter dem Banner an, um einen gestalteten Container-Look zu erzielen.

​
Erweiterte Timer-Konfiguration

Für zusätzliche Funktionalität kann JavaScript verwendet werden, um den Countdown-Timer anzupassen. Füge dein Skript im Abschnitt “Scripts (Before Load)” hinzu, nicht im Custom-HTML-Modul. Dies ist eine Anforderung an den Ladezeitpunkt, keine Sicherheitsbeschränkung – Custom HTML führt Skripte durchaus aus, aber sie laufen zu spät, um sich zuverlässig in das Ladeereignis des Warenkorbs einzuklinken. Der Abschnitt “Scripts (Before Load)” führt deinen Code aus, bevor der Warenkorb lädt, sodass Callbacks wie upcartSubscribeCartLoaded korrekt ausgelöst werden. Beispielcode:
Hinweis zu älteren Versionen: window.upcartOnCartLoaded funktioniert weiterhin, ist aber veraltet und protokolliert eine Konsolenwarnung. Verwende upcartSubscribeCartLoaded für alle neuen Skripte. Teste die Platzierung und Syntax deines Codes sorgfältig. Einige Plattformbeschränkungen können weiterhin beeinflussen, wie Skripte verarbeitet werden.