Möchtest du Updates, Aktionen oder wichtige Nachrichten mit jedem Besucher teilen, der deinen Shop aufruft? 📢

Eine Announcement Bar ist eine der einfachsten Möglichkeiten, Aufmerksamkeit zu erregen, ohne das Einkaufserlebnis zu stören. Ob Flash Sale, Versandupdate oder Newsletter-Anmeldung – eine gut platzierte Bar informiert Kunden schon beim ersten Besuch.

Diese Anleitung führt dich Schritt für Schritt durch die komplette Einrichtung – von der Erstellung deiner ersten Bar bis zur Veröffentlichung im Shop 🚀

📍 Was du lernst

Am Ende dieser Anleitung weißt du, wie du:

• Eine neue Announcement Bar erstellst
• Die passende Platzierung und Bar-Art wählst
• Deine Nachricht und Call-to-Action hinzufügst
• Ein Design erstellst, das zu deiner Marke passt
• Festlegst, wo und wann sie angezeigt wird
• Sie in deinem Shop veröffentlichst

✅ Bevor du beginnst

Stelle sicher, dass das Hoppy Announcement Bars & Banners App Embed in deinem Theme aktiviert ist. Ohne dies erscheint deine Bar nicht im Shop, egal wie perfekt sie konfiguriert ist.

So aktivierst du es:

1. Gehe zu Shopify Admin → Sales Channels → Online Store → Themes
2. Klicke bei deinem aktiven Theme auf Edit Theme
3. Wähle App Embeds in der linken Seitenleiste
4. Suche nach Announcement Bar/Banner
5. Schalte es auf ON
6. Klicke auf Save (Speichern)

💡 Bereits aktiviert? Dann kann es losgehen!

⚙️ Schritt 1 – Neue Announcement erstellen

Öffne die Hoppy Banners App in deinem Shopify Admin.

Klicke im Dashboard auf Create New Announcement (Neue Announcement erstellen).

Du gelangst zum Bildschirm zur Auswahl der Platzierung.

📌 Schritt 2 – Platzierung wählen

Die Platzierung legt fest, wo deine Announcement Bar im Shop angezeigt wird.

Du siehst sechs Optionen:

• Storefront Page — Erscheint in deinem Haupt-Shop (Startseite, Produkte, Kategorien usw.)
• Email Collection Bar — Eine Bar zur Sammlung von E-Mail-Adressen
• Cart Page — Erscheint auf der separaten Warenkorbseite
• Cart Drawer — Erscheint im ausfahrenden Warenkorb
• Checkout Page — Erscheint während des Checkouts (nur Shopify Plus)
• Custom Position — Manuelle Platzierung auf bestimmten Produkt- oder Kategorieseiten

Wähle die Option, die zu deinem Ziel passt. Für die meisten Händler ist Storefront Page der beste Einstieg.

Wähle anschließend Continue (Weiter).

🎨 Schritt 3 – Preset wählen (oder von Grund auf starten)

Als Nächstes siehst du eine Auswahl an visual presets — vorgefertigte Kombinationen aus Farben, Schriften und Layouts.

Du kannst:

• Ein Preset wählen, um dein Design schnell zu starten
• Oder auf Make your Own (Eigenes erstellen) klicken, um alles manuell zu gestalten

Keine Sorge – du kannst später jedes Design-Detail ändern. Presets sparen einfach Zeit ⏱️

Nach der Auswahl eines Presets (oder dem Start von Grund auf) öffnet sich automatisch der Editor.

📝 Schritt 4 – Inhalte hinzufügen

Du landest im Tab Content (Inhalt). Hier schreibst du deine Nachricht und legst das Verhalten der Bar fest.

🏷️ Announcement Name

Dies ist nur für deine interne Referenz. Kunden sehen ihn nicht.

Verwende etwas Erkennbares wie:

• Summer Sale Banner
• Free Shipping Alert
• Black Friday Header

💡 Gute Namen helfen, wenn du mehrere Bars gleichzeitig nutzt.

📢 Announcement Type

Dies steuert, wie deine Nachricht angezeigt wird. Es gibt vier Typen:

Auswahl eines Typs

• Simple ist perfekt für eine klare Nachricht – wie „Kostenloser Versand ab 50 €“.
• Running eignet sich hervorragend für Dringlichkeit oder Flash Sales. Wenn ausgewählt, siehst du einen Schieberegler Animation Speed und eine Checkbox zur Änderung der Scrollrichtung.
• Multiple ermöglicht es dir, durch bis zu 20 verschiedene Slides zu wechseln. Wenn ausgewählt, erscheint ein Schieberegler Display Duration, um festzulegen, wie lange jeder Slide sichtbar bleibt.
• Email verwandelt die Bar in ein Lead-Generierungstool. Wenn ausgewählt, werden die Standard-CTA-Optionen durch ein Feld Success Message und Email Placeholder ersetzt.

💡 Du kannst jederzeit zurückkehren und den Typ wechseln.

✍️ Title & Subheading

• Title — Dies ist deine Hauptbotschaft. Es werden Rich-Text-Formatierungen unterstützt (fett, kursiv, Links, Farben).
• Subheading — Eine kleinere ergänzende Zeile unter dem Titel.

ℹ️ Das Feld Subheading wird ausgeblendet, wenn du den Typ Running wählst, da Laufschriften in der Regel nur eine Textzeile verwenden.

🔗 Call to Action (CTA)

Deine CTA sagt Kunden, was sie als Nächstes tun sollen.

Wähle einen CTA Type:

• No Call to Action — Kein Button oder Link
• Button — Ein klickbarer Button mit eigenem Text und Link
• Make entire bar clickable — Die gesamte Bar wird klickbar
• Coupon — Zeigt einen Gutscheincode mit Kopieren-in-Zwischenablage-Button
• Trigger App Event — Löst ein benutzerdefiniertes Event für die Nutzung mit anderen Apps aus

Wenn du Button, Make entire bar clickable oder Trigger App Event wählst, erscheinen Felder für den Link oder den Buttontext. Wenn du Coupon wählst, erscheint ein Feld Coupon Code sowie eine Checkbox zum Anzeigen eines Kopier-Symbols.

🚪 Close Icon

Aktiviere diese Option, wenn Kunden die Bar schließen können sollen.

Wenn aktiviert, erscheinen zwei zusätzliche Felder:

• Appear again after — Wie lange die Bar für diesen Besucher ausbleibt
• Unit — Stunden oder Tage

Das ist nützlich, wenn du wiederkehrende Besucher nicht mit derselben Nachricht nerven möchtest.

🎭 Banner Icons

Mit Banner Icons kannst du klickbare Social-Media- oder Branding-Icons direkt in der Announcement Bar hinzufügen, um die Interaktion zu erhöhen und den schnellen Zugriff auf externe Plattformen zu ermöglichen.

Das ist besonders nützlich, um Social-Media-Profile, Communities oder wichtige externe Links zu bewerben, ohne die Bar mit zusätzlichem Text zu überladen.

📌 Maximale Anzahl an Icons

Du kannst bis zu 6 Banner Icons in einer einzigen Announcement Bar hinzufügen.

Das sorgt für ein sauberes und ausgewogenes Layout auf Desktop- und Mobilgeräten.

🖥️ Desktop- & Mobile-Sichtbarkeit

Jedes Icon kann so konfiguriert werden, dass es angezeigt wird auf:

• Desktop-Geräten
• Mobilgeräten
• Oder auf beiden gleichzeitig

Das gibt dir mehr Flexibilität, je nachdem, wie die Announcement Bar auf verschiedenen Bildschirmgrößen erscheinen soll.

🔄 Replace Icon

Icons können jederzeit über die integrierte Icon Library ausgetauscht werden.

Verfügbare Funktion

• Verfügbare Icons in der Icon Library durchsuchen
• Vorhandene Icons sofort ersetzen
• Icons aktualisieren, ohne den Rest der Einrichtung zu beeinträchtigen

⚠️ Wichtig:

Das Hochladen eigener Icons wird derzeit nicht unterstützt. Es können nur Icons verwendet werden, die in der Icon Library verfügbar sind.

🔗 Call to Action (CTA)

Jedes Banner Icon kann optional mit einem eigenen Call-to-Action-Verhalten versehen werden.

Verfügbare Optionen

• No call to action
• Add Link

➕ Add Link

Wenn Add Link ausgewählt ist:

→ Es erscheint ein Feld CTA Link

Damit kann das Icon Besucher zu externen oder internen Seiten weiterleiten.

Beispiele für Anwendungsfälle

• Social-Media-Profile
• WhatsApp-Chats
• Discord-Communities
• Produktkategorien
• Promotion-Landingpages

⚠️ Wichtige Hinweise

• Jedes Icon kann ein eigenständiges CTA-Verhalten haben
• Einige Icons können nicht klickbar sein, während andere Besucher weiterleiten
• Das Entfernen eines Icons betrifft nur dieses eine Icon und nicht die übrigen Icons
• Die Anordnung der Icons kann den Abstand und die Sichtbarkeit auf kleineren Mobilbildschirmen beeinflussen

💡 Für das beste Shop-Erlebnis solltest du die Announcement Bar nicht mit zu vielen Icons und Links gleichzeitig überladen.

🎨 Schritt 5 – Design wählen

Klicke auf den Tab Design, um deine Bar zu gestalten.

Für eine schnelle Einrichtung konzentriere dich auf diese Grundlagen:

• Template — Wähle aus über 20 vorgefertigten Stilen oder bleibe bei deinem Preset
• Visibility — Wähle, ob sie auf Desktop and Mobile (Desktop und Mobil), Desktop Only (nur Desktop) oder Mobile Only (nur Mobil) angezeigt wird
• Background — Wähle Single Color (einfarbig), Gradient (Farbverlauf) oder Pattern (Muster)
• Typography — Wähle eine Schriftart und lege die Titelfarbe fest
• Button — Passe Button-Farbe, Textfarbe und Eckenradius an (wenn du einen Button-CTA verwendest)

💡 Für tiefere Design-Anpassungen – einschließlich Animationen, benutzerdefiniertem CSS, erweiterten Button-Effekten und Social-Icon-Styling – siehe die dedizierte Dokumentation Design & Styling.

📍 Schritt 6 – Position & Sichtbarkeit festlegen

Klicke auf den Tab Placement, um zu steuern, wo und wann deine Bar angezeigt wird.

📐 Display Position

Dies legt die physische Position der Bar fest:

• Top Push — Schiebt den Seiteninhalt nach unten
• Top Push (Sticky) — Bleibt oben fixiert beim Scrollen
• Top Overlap — Schwebt über dem oberen Seitenbereich
• Top Overlap (Sticky) — Schwebt und bleibt beim Scrollen fixiert
• Bottom Overlap (Sticky) — Erscheint am unteren Rand des Viewports
• Manual — Du platzierst sie selbst über einen Code-Snippet oder App Block

ℹ️ Wenn du Manual wählst, ist das Dropdown zur Seitenauswahl deaktiviert und du erhältst ein Code-Snippet, das du in dein Theme einfügst.

🎯 Page Targeting

Lege fest, auf welchen Seiten die Bar angezeigt wird:

• Every page (Jede Seite)
• Home page only (Nur Startseite)
• All products (Alle Produkte)
• Products in specific collections (Produkte in bestimmten Kategorien)
• Specific products (Bestimmte Produkte)
• All collections (Alle Kategorien)
• Specific collections (Bestimmte Kategorien)

Wenn du eine „specific“-Option wählst, erscheint ein Button Select Products oder Select Collections, mit dem du genau festlegen kannst, wo die Bar angezeigt wird.

⏰ Scheduling

Soll die Bar zu einem späteren Zeitpunkt live gehen oder automatisch stoppen? Lege ein Start Date und ein End Date fest.

Wenn diese Felder leer bleiben, erscheint die Bar sofort und bleibt aktiv, bis du sie manuell deaktivierst.

💡 Erweiterte Targeting-Optionen – einschließlich Kunden-Tags, Geolocation, UTM-Quellen und Verzögerungen nach Verweildauer – sind im selben Tab verfügbar. Diese werden ausführlich in der Dokumentation Advanced Targeting behandelt.

🚀 Schritt 7 – Bar veröffentlichen

Wenn alles passt, ist es Zeit, live zu gehen.

Klicke oben rechts auf Publish (Veröffentlichen).

Ein Erfolgsbanner erscheint. Wenn dein App Embed bereits aktiviert ist, bist du fertig! 🎉

Wenn das App Embed nicht aktiviert ist, erinnert dich das Banner daran und bietet einen direkten Link, um es im Theme-Editor zu aktivieren.

⚠️ Wichtig: Das reine Speichern reicht nicht aus, damit die Bar für Kunden sichtbar wird. Du musst auf Publish klicken.

🎉 Endergebnis

Nach erfolgreicher Veröffentlichung:

✅ Deine Announcement Bar erscheint auf den ausgewählten Seiten
✅ Kunden sehen deine Nachricht sofort beim Besuch
✅ Deine CTA generiert Klicks, Anmeldungen oder Verkäufe
✅ Das Design harmoniert nahtlos mit deinem Shop-Branding
✅ Du kannst sie jederzeit im Dashboard bearbeiten, duplizieren oder deaktivieren

📚 Verwandte Dokumentation

Möchtest du mehr? Sieh dir diese speziellen Anleitungen an:

• Design & Styling — Tiefe Anpassung von Farben, Schriften, Animationen und benutzerdefiniertem CSS
• Advanced Targeting — Geolocation, Kunden-Tags, UTM-Filterung und Regeln zur Verweildauer
• Translations — Mehrsprachige Announcement Bars
• Troubleshooting — Was tun, wenn deine Bar nicht angezeigt wird

Happy announcing! 🥂

Aktualisiert am: 01/09/2026