> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.hoppyapps.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # 🎋 So richtest du eine Announcement Bar ein > ℹ️ **Note:** Dieser Artikel wurde automatisch mit AI übersetzt und kann Ungenauigkeiten enthalten. Wenn etwas falsch aussieht, kontaktieren Sie bitte unser Support-Team. 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: | Typ | Am besten geeignet für | | ----- | ----- | | **Simple** | Eine einzelne statische Nachricht | | **Running** | Eine laufende Laufschrift oder Ticker | | **Multiple** | Rotierende Slides mit mehreren Nachrichten | | **Email** | Sammeln von E-Mail-Adressen | ### **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! 🥂