ℹ️ Note: Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team.

Hoppy Announcement Bar bietet dir vier unterschiedliche Möglichkeiten, Nachrichten in deinem Shop anzuzeigen. Jeder Typ verhält sich anders, unterstützt unterschiedliche Inhaltskonfigurationen und ist für bestimmte Anwendungsfälle gedacht.

Die richtige Wahl des Typs zu Beginn deiner Einrichtung hilft dir, Nacharbeit zu vermeiden und stellt sicher, dass deine Ankündigung im Live-Shop genau so funktioniert, wie du es erwartest.

⚠️ Before You Begin

Der Ankündigungstyp wird im Content-Tab (Inhalts-Tab) beim Erstellen oder Bearbeiten einer Ankündigung ausgewählt.

Du kannst den Typ jederzeit wechseln, aber beachte:

• Einige Felder werden je nach ausgewähltem Typ ein- oder ausgeblendet
• Inhaltselemente können beim Wechseln zwischen bestimmten Typen gekürzt oder erweitert werden
• Design- und Platzierungseinstellungen bleiben für alle Typen gemeinsam

ℹ️ Der Ankündigungstyp ist nicht dasselbe wie die Platzierung. Die Platzierung steuert, wo die Leiste angezeigt wird. Der Typ steuert, wie sich die Leiste verhält.

📋 The Four Announcement Types

1️⃣ Simple Announcement (Einfache Ankündigung)

Der Simple-Typ zeigt eine einzelne, statische Nachricht an. Er ist das am häufigsten verwendete Format, weil er unkompliziert ist und für fast jeden Anwendungsfall funktioniert.

What it does

• Zeigt eine Ankündigung mit Titel, Untertitel und optionalem Call-to-Action an
• Bleibt statisch auf der Seite, bis der Kunde weiterklickt oder die Leiste schließt
• Unterstützt alle CTA-Typen: Button, Klick auf die gesamte Leiste, Coupon, Trigger-Event oder kein CTA

Content fields available

• Title (Titel) — Die Hauptnachricht. Unterstützt Rich-Text-Formatierung.
• Subheading (Untertitel) — Eine zweite Zeile unter dem Titel.
• Call to action type (Call-to-Action-Typ) — Wähle, wie Kunden mit der Leiste interagieren.

CTA behavior

ℹ️ Wenn Trigger App Event ausgewählt ist, erscheint ein zusätzliches Feld Trigger ID (Auslöser-ID). Diese ID muss mit dem Ereignisnamen übereinstimmen, der in der empfangenden App konfiguriert ist.

Best used for

• Shop-weite Sale-Ankündigungen
• Aktualisierungen der Versandrichtlinie
• Zeitlich begrenzte Angebote
• Allgemeine Promotions

2️⃣ Running Line Announcement (Laufband-Ankündigung)

Der Running-Typ erzeugt einen kontinuierlichen horizontal scrollenden Ticker – ähnlich einer Nachrichten-Laufschrift. Der Titeltext bewegt sich in einer Schleife über die Leiste.

What it does

• Zeigt eine Titelnachricht in einem sanften, endlosen Scrollen an
• Richtung und Geschwindigkeit sind vollständig konfigurierbar
• Das Untertitel-Feld ist ausgeblendet, da das Format auf einer einzelnen scrollenden Zeile basiert

Content fields available

• Title (Titel) — Die Nachricht, die über die Leiste scrollt. Unterstützt Rich-Text.
• Animation speed (Animationsgeschwindigkeit) — Ein Schieberegler von 1 bis 80, der die Geschwindigkeit des Textes steuert.
• Run left to right (Von links nach rechts laufen) — Ein Kontrollkästchen, das die Standard-Scrollrichtung umkehrt.

How animation speed works

• Niedrigere Werte = langsameres, besser lesbares Scrollen
• Höhere Werte = schnellerer Ticker
• Die Geschwindigkeit wird dynamisch anhand der Länge deines Titeltextes berechnet

CTA behavior

Running-Ankündigungen unterstützen Button, Coupon, Trigger und keinen CTA. Die Option Make entire bar clickable umgibt den Scrollbereich mit einem Link.

Wenn ein Button oder Coupon verwendet wird, erscheint dieser statisch neben dem scrollenden Text.

Best used for

• Flash-Sale-Alerts
• Dringende Versandfristen
• Wiederkehrende Marken-Slogans
• Zeit-sensitive Erinnerungen

⚠️ Wichtig: Laufbandleisten funktionieren am besten mit kürzeren Titeln. Sehr lange Nachrichten können auf kleineren Bildschirmen zu ungleichmäßigem Scrolltempo führen.

3️⃣ Multiple Rotating Announcements (Mehrere rotierende Ankündigungen)

Der Multiple-Typ ermöglicht es dir, mehrere Ankündigungen in einer einzigen Leiste zu stapeln, die automatisch durchrotiert. Kunden sehen jeweils eine Nachricht, mit Navigationspfeilen zum manuellen Durchblättern.

What it does

• Wechselt durch mehrere Ankündigungs-Folien
• Jede Folie hat ihren eigenen Titel, Untertitel und CTA
• Schaltet automatisch basierend auf einer konfigurierbaren Anzeigedauer weiter
• Enthält Links-/Rechts-Navigationspfeile

Content fields available

• Announcement display duration (Anzeigedauer der Ankündigung) — Ein Schieberegler von 1 bis 10 Sekunden, der steuert, wie lange jede Folie sichtbar bleibt, bevor sie automatisch wechselt.
• Announcement \#1, \#2, \#3... (Ankündigung \#1, \#2, \#3...) — Jede Folie ist ein unabhängiger Inhaltsblock mit eigenem Titel, Untertitel und CTA.
• Add new announcement (Neue Ankündigung hinzufügen) — Fügt zusätzliche Folien hinzu.

Slide limits

• Minimum: 2 Folien
• Maximum: 20 Folien

Du kannst Folien mit den Auf-/Ab-Pfeilen neu ordnen und Folien entfernen, wenn du mehr als 2\. hast.

CTA behavior

Jede Folie kann ihren eigenen unabhängigen CTA haben. Eine Folie kann einen Button haben, eine andere einen Coupon und eine dritte keinen CTA.

Unterstützte CTA-Typen pro Folie: Button, Klick auf die gesamte Leiste, Coupon, Trigger oder keine.

Animation effects

Der Übergang zwischen Folien wird über die Einstellung Animation im Design-Tab (Design-Tab) gesteuert:

• Slide — Standardmäßiger horizontaler Gleitübergang
• Fade — Sanftes Überblenden zwischen Folien
• Cube — 3D-Würfel-Rotationseffekt
• Flip — Kartenflip-Übergang

Best used for

• Mehrere Promotions gleichzeitig präsentieren
• Unterschiedliche Produktkategorien ankündigen
• Versand-, Rückgabe- und Vertrauensnachrichten rotieren lassen
• Mehrere Coupons hervorheben, ohne die Seite zu überladen

4️⃣ Email Collection Banner (E-Mail-Sammelleiste)

Der Email-Typ verwandelt die Ankündigungsleiste in ein Lead-Formular. Er zeigt ein E-Mail-Eingabefeld und einen Absenden-Button an und zeigt nach dem Absenden einen Erfolgsstatus.

What it does

• Zeigt Titel, Untertitel und ein E-Mail-Eingabefeld an
• Zeigt nach dem Absenden der E-Mail eine Success Message (Erfolgsmeldung) an
• Kann einen Coupon-Code als Belohnung für das Abonnieren enthalten

Content fields available

• Title (Titel) — Die Hauptnachricht, die Kunden zum Abonnieren einlädt.
• Subheading (Untertitel) — Ergänzender Text unter dem Titel.
• Button text (Schaltflächentext) — Die Beschriftung des Absenden-Buttons. Standardmäßig Subscribe, falls leer gelassen.
• Success Message (Erfolgsmeldung) — Der Bestätigungstext, der nach erfolgreichem E-Mail-Versand angezeigt wird.
• Email Placeholder (E-Mail-Platzhalter) — Der Hinweistext im leeren E-Mail-Eingabefeld.

CTA behavior

E-Mail-Sammelleisten unterstützen zwei CTA-Modi:

• Button — Ein standardmäßiger Absenden-Button. Die Leiste sammelt die E-Mail und zeigt den Erfolgsstatus an.
• Coupon — Zeigt einen Coupon-Code neben oder anstelle des Eingabefelds mit optionaler Kopier-Schaltfläche an.

Die Optionen Make entire bar clickable und Trigger App Event sind für diesen Typ nicht verfügbar, da die Leiste auf die Formularabgabe ausgelegt ist.

Success state preview

In der App-Vorschau siehst du zwei Leisten-Zustände übereinander:

1. Das aktive E-Mail-Sammelformular
2. Die Erfolgsmeldungsleiste

Im Live-Shop sehen Kunden den Erfolgsstatus erst, nachdem sie ihre E-Mail abgesendet haben.

Best used for

• Aufbau von Newsletter-Listen
• Anbieten von Rabattcodes im Austausch für E-Mails
• Anmelden für Pre-Launch-Wartelisten
• Bewerbung von VIP- oder Treueprogrammen

🔀 How Type Selection Affects Visible Settings

Die Auswahl eines Ankündigungstyps ändert dynamisch, welche Felder im Content-Tab (Inhalts-Tab) angezeigt werden. Hier ist eine Kurzübersicht:

Fields that appear by type

Content item limits

• Simple, Running, Email — Es wird nur das erste Inhaltselement verwendet. Auch wenn mehrere Elemente im Datenmodell vorhanden sind, wird nur das erste gerendert.
• Multiple — Alle Inhaltselemente werden als einzelne Folien verwendet.

⚠️ Wenn du von Multiple zu Simple wechselst, werden zusätzliche Folien im Hintergrund beibehalten, aber nicht angezeigt. Sie erscheinen wieder, wenn du zurück zu Multiple wechselst.

🎯 Call-to-Action Types Explained

Das CTA-Verhalten ist über alle Ankündigungstypen hinweg weitgehend konsistent, mit einigen typspezifischen Ausnahmen.

No call to action

Die Leiste ist rein informativ. Es werden keine Buttons, Links oder klickbaren Bereiche gerendert.

Button

Ein klickbarer Button erscheint. Du konfigurierst:

• Button text (Schaltflächentext) — Was auf dem Button steht
• Link — Wohin der Button führt

Make entire bar clickable

Der gesamte Ankündigungsbereich wird zum Link. Ein Klick irgendwo auf die Leiste navigiert zur konfigurierten URL.

ℹ️ Wenn deine Leiste verschachtelte klickbare Elemente wie Social Icons enthält, funktionieren diese weiterhin unabhängig. Der Klick auf die gesamte Leiste überschreibt sie nicht.

Coupon

Zeigt eine gestylte Coupon-Code-Box an. Du konfigurierst:

• Coupon Code (Coupon-Code) — Der eigentliche Rabattcode
• Show copy button (Kopieren-Schaltfläche anzeigen) — Fügt ein Symbol zum einmaligen Kopieren neben dem Code hinzu

Trigger App Event

Anstatt zu einer URL zu navigieren, sendet der Button ein CustomEvent im Browser. Du konfigurierst:

• Trigger ID (Auslöser-ID) — Die Zeichenfolge des Ereignisnamens (zum Beispiel, my-app:open-modal)

Andere Apps oder benutzerdefinierte Theme-Skripte, die auf diesen Ereignisnamen hören, können darauf reagieren.

⚠️ Trigger-CTAs sind bei E-Mail-Sammelleisten nicht verfügbar, da die primäre Aktion der Leiste die Formularabgabe ist.

🎨 Design Behavior by Type

Die meisten Design-Einstellungen gelten universell, aber einige verhalten sich je nach Typ unterschiedlich.

Animation setting (Design tab)

• Simple & Email — Animation steuert den Eintrittseffekt, wenn die Leiste zum ersten Mal geladen wird.
• Running — Die Animationsgeschwindigkeit wird im Content-Tab (Inhalts-Tab) gesteuert, nicht im Design-Tab.
• Multiple — Animation steuert den Übergangseffekt zwischen Folien (Slide, Fade, Cube, Flip).

Social icons

Banner-Icons können zu allen Typen hinzugefügt werden. Du steuerst die Sichtbarkeit separat für Desktop und Mobile.

• Icons erscheinen statisch neben dem Inhalt
• Jedes Icon kann zu einer URL verlinken oder nicht klickbar bleiben

Close icon

Alle Typen unterstützen das Schließen-Icon. Wenn aktiviert, kannst du folgendes konfigurieren:

• Appear again after (Erneut anzeigen nach) — Nach wie vielen Stunden oder Tagen die Leiste für einen wiederkehrenden Besucher erneut erscheint

Wenn keine erneute Anzeigezeit festgelegt ist, bleibt die Leiste nach dem Schließen dauerhaft ausgeblendet.

📱 Mobile Behavior

Alle vier Ankündigungstypen sind vollständig responsiv. Allerdings passen sich Layouts automatisch an:

• Email collection bars stapeln sich auf Mobilgeräten vertikal — Eingabefeld und Button erscheinen in separaten Zeilen
• Multiple rotating bars reduzieren den Pfeilabstand und verkleinern Schriftgrößen leicht
• Running line bars behalten die Scrollgeschwindigkeit bei, verkleinern aber die Icon-Größen, wenn Social Icons aktiviert sind
• Simple bars mit Buttons können je nach CTA-Typ den Text auf kleineren Bildschirmen zentrieren

Falls nötig, kannst du das Mobile-Erscheinungsbild über das Custom CSS-Panel (Panel für benutzerdefiniertes CSS) im Design-Tab (Design-Tab) überschreiben.

💡 Use-Case Examples

Example 1 — Simple bar with coupon

• Type: Simple
• Title: "Summer Sale is Live ☀️"
• Subheading: "Use code SUNNY for 20% off"
• CTA: Coupon
• Coupon code: SUNNY
• Result: Eine saubere, statische Leiste mit einem kopierbaren Rabattcode.

Example 2 — Running ticker for urgency

• Type: Running
• Title: "Free shipping ends tonight at midnight ⏰"
• Animation speed: 25
• CTA: None
• Result: Eine kontinuierlich scrollende Dringlichkeitsnachricht am oberen Rand des Shops.

Example 3 — Multiple slides for different collections

• Type: Multiple
• Slide 1: "Up to 50% off Shoes →" mit Button-Link zu /collections/shoes
• Slide 2: "New Arrivals in Accessories →" mit Button-Link zu /collections/accessories
• Slide 3: "Free returns on all orders" ohne CTA
• Display duration: 4 seconds
• Result: Eine Leiste, die automatisch durch drei unterschiedliche Promotions rotiert.

Example 4 — Email collection with coupon reward

• Type: Email
• Title: "Join the VIP list"
• Subheading: "Get 15% off your first order"
• Button text: "Get My Code"
• Success Message: "Welcome! Your code WELCOME15 is ready."
• Email Placeholder: "Enter your email"
• Result: Eine Lead-Capture-Leiste, die Abonnenten sofort mit einem Coupon belohnt.

⚠️ Important Notes & Limitations

Type switching

Das Wechseln zwischen Typen löscht deine Inhalte nicht. Beachte jedoch:

• Der Wechsel von Multiple zu Simple blendet zusätzliche Folien aus
• Der Wechsel von Running zu Simple blendet das Untertitel-Feld wieder ein
• Der Wechsel zu Email blendet Trigger-ID-Felder aus, falls zuvor festgelegt

Überprüfe deine Inhalte immer, nachdem du den Typ geändert hast.

Running line length

Sehr lange Titel in Laufbandleisten können zu ungleichmäßigem Scroll-Timing führen, besonders auf Mobilgeräten. Teste mit deiner tatsächlichen Nachrichtenlänge, bevor du veröffentlichst.

Multiple slide minimum

Du kannst eine Multiple-Ankündigung nicht mit weniger als 2 Folien veröffentlichen. Wenn du nur eine Nachricht benötigst, verwende stattdessen den Simple-Typ.

Email bar success state

Der Erfolgsstatus erscheint erst, nachdem ein Kunde eine E-Mail abgesendet hat. Die Vorschau in der App zeigt beide Zustände übereinander zur Orientierung, aber Live-Kunden sehen zuerst das Formular.

Full-bar click and nested elements

Wenn Make entire bar clickable aktiviert ist, funktionieren Klicks auf Social Icons oder den Kopieren-Button wie erwartet. Der Vollbalken-Klick ignoriert diese verschachtelten interaktiven Elemente.

🎉 Final Result

Das Verständnis der vier Ankündigungsleisten-Typen hilft dir, das richtige Format an dein Ziel anzupassen:

✅ Simple — Am besten für einzelne, statische Promotions
✅ Running — Am besten für Dringlichkeit und wiederholende Ticker-Nachrichten
✅ Multiple — Am besten, um mehrere Angebote an einem Ort zu rotieren
✅ Email — Am besten zum Sammeln von Leads und Aufbau von Abonnentenlisten

Jeder Typ unterstützt dasselbe Designsystem, dieselben Platzierungsregeln, Planungs- und Targeting-Logik. Der Unterschied liegt rein darin, wie Inhalte präsentiert und interagiert werden.

Die richtige Wahl des Typs von Anfang an stellt sicher, dass deine Ankündigung nativ in deinen Shop integriert wirkt und die richtige Nachricht im richtigen Format liefert 🚀

Aktualisiert am: 10/09/2026