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

# Ankündigungsmodul

> Erfahre, wie du die Ankündigungsleiste in deinem Upcart-Drawer anpasst, einschließlich Höhe, Position, Countdown-Timer, Textformatierung und Farben.

<div id="height">
  # Höhe
</div>

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.

<div id="position">
  # Position
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-bar-position-comparison.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=10c93ddb37a1b682ee6ffd8c22ca0365" alt="Zwei Upcart-Warenkörbe im Vergleich mit der Ankündigungsleiste über und unter den Produkten" width="1845" height="1380" data-path="images/upcart/announcements-bar-position-comparison.png" />

<div id="timer-duration">
  ## Timer-Dauer
</div>

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.

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

<div id="announcement-text">
  ## Ankündigungstext
</div>

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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-color-picker-open-styling.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=b5cf7eef319675ff522346102babd4ff" alt="Geöffneter Farbwähler zum Gestalten von Text im Editor für den Ankündigungstext" width="990" height="758" data-path="images/upcart/announcements-color-picker-open-styling.png" />

<Note>
  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).
</Note>

<div id="adding-a-link-or-url-to-the-announcement">
  ### Einen Link oder eine URL zur Ankündigung hinzufügen
</div>

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:

   ```html theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
   <div style="text-align: center; padding: 8px;">
     <a href="https://yourstore.com/sale" style="color: #ffffff; text-decoration: underline;">
       Shop the sale →
     </a>
   </div>
   ```

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](/de/upcart/custom_html) und [Custom CSS](/de/upcart/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.

<img src="https://mintcdn.com/aftersell/uxKAdY-e0h16xa48/images/upcart/announcements-announcement-text-field-timer.png?fit=max&auto=format&n=uxKAdY-e0h16xa48&q=85&s=4ba5a19c53cfefb36cc37c1d560c6b3e" alt="Feld für den Ankündigungstext mit der zur Nachricht hinzugefügten Countdown-Timer-Variable" width="1094" height="462" data-path="images/upcart/announcements-announcement-text-field-timer.png" />

<div id="important">
  ## Wichtig
</div>

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.

<div id="font-size">
  # Schriftgröße
</div>

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.

<div id="colors">
  # Farben
</div>

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.

<div id="advanced-timer-configuration">
  # Erweiterte Timer-Konfiguration
</div>

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:

```text theme={"theme":{"light":"snazzy-light","dark":"github-dark"}}
<script>
  window.upcartSubscribeCartLoaded(function(event) {
    // Your countdown timer code here
    // event.cart contains the cart object with .items[], .total, .currency
  });
</script>
```

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.