ℹ️ 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, dass deine Announcement Bar an einer bestimmten Stelle erscheint, die von der automatischen Positionierung nicht abgedeckt wird? 🎯

Custom placement (benutzerdefinierte Platzierung) gibt dir die volle Kontrolle darüber, wo deine Leiste angezeigt wird – ob innerhalb eines bestimmten Theme-Bereichs, unterhalb deiner Navigation, im Produktbeschreibungsbereich oder überall dort, wo du einen Code-Snippet oder App-Block einfügen kannst.

Diese Anleitung führt dich Schritt für Schritt durch die Einrichtung einer Announcement Bar mit manueller Platzierung, damit sie genau dort gerendert wird, wo du es möchtest ✨

✅ Bevor du beginnst

Stelle sicher, dass der Hoppy Announcement Bar-App-Embed in deinem Theme aktiviert ist. Auch bei benutzerdefinierter Platzierung lädt der Embed die erforderlichen Skripte und Styles.

So aktivierst du ihn:

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

💡 Bereits aktiviert? Dann kannst du loslegen!

⚙️ Schritt 1 – Neue Ankündigung erstellen

Öffne die Hoppy Announcement Bar-App in deinem Shopify-Admin.

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

Du gelangst zum Bildschirm zur Auswahl der Platzierung.

📌 Schritt 2 – Benutzerdefinierte Position auswählen

Wähle aus den Platzierungsoptionen Custom Position (Benutzerdefinierte Position).

Damit teilst du der App mit, dass du – nicht der automatische Injector – entscheidest, wo die Leiste in deinem Shop angezeigt wird.

Wenn du sie ausgewählt hast, klicke auf Continue (Weiter).

🎨 Schritt 3 – Leiste gestalten

Gestalte deine Announcement Bar ganz nach deinen Wünschen:

• Füge deinen Titel, Untertitel und CTA hinzu
• Wähle einen Announcement-Typ (Simple, Running, Multiple oder Email)
• Gestalte sie im Tab Design (Design)

💡 Detaillierte Hinweise zum Design – einschließlich Vorlagen, Farben, Animationen und individuellem CSS – findest du in der Dokumentation Design & Styling.

📍 Schritt 4 – Anzeigeposition auf Manuell setzen

Klicke auf den Tab Placement (Platzierung).

Wähle im Dropdown Display Position (Anzeigeposition) die Option Manual (Manuell).

Wenn du das tust:

• Das Dropdown Page Targeting (Seiten-Targeting) wird automatisch deaktiviert und auf Custom (Benutzerdefiniert) gesetzt
• Die Leiste fügt sich nicht mehr automatisch in die Seite ein
• Stattdessen wartet sie darauf, dass du sie über einen Code-Snippet oder App-Block platzierst

Genau das ermöglicht die benutzerdefinierte Platzierung 🛠️

📋 Schritt 5 – Platzierungs-Snippet kopieren

Sobald die Leiste gespeichert ist, zeigt der Tab Placement (Platzierung) einen kopierbaren Code-Snippet an:

\<div class="futureblink-announcement-block" id="{announcementId}"\>\</div\>

Jede Ankündigung hat eine eindeutige ID. Der Snippet teilt der App mit, welche Leiste in diesem Container gerendert werden soll.

Klicke auf die copy (Kopieren)-Schaltfläche, um ihn in deine Zwischenablage zu speichern 📋

🧩 Schritt 6 – Snippet in deinem Theme einfügen

Es gibt zwei Möglichkeiten, den Snippet zu platzieren:

Option A – App-Block verwenden (Empfohlen)

Dies ist die einfachste Methode und funktioniert mit Online-Store-2.0-Themes.

1. Gehe zu Shopify Admin → Sales Channels → Online Store → Themes
2. Klicke auf Edit Theme in deinem aktiven Theme
3. Navigiere zur Seite oder zum Abschnitt, in dem die Leiste erscheinen soll
4. Klicke auf Add Section (Abschnitt hinzufügen) oder Add Block (Block hinzufügen)
5. Gehe zum Tab Apps
6. Wähle Hoppy Announcement Bar
7. Füge deine Announcement ID (Ankündigungs-ID) in den Blockeinstellungen ein
8. Ziehe den Block an die gewünschte Position
9. Klicke auf Save

Option B – Benutzerdefinierter Liquid-Snippet

Verwende diese Methode, wenn du die Leiste in einer bestimmten Liquid-Datei oder in einem Nicht-OS-2.0-Theme platzieren möchtest.

1. Gehe zu Shopify Admin → Sales Channels → Online Store → Themes
2. Klicke auf das ...-Menü in deinem aktiven Theme → Edit Code (Code bearbeiten)
3. Öffne die Liquid-Datei, in der die Leiste erscheinen soll
4. • Typische Beispiele: theme.liquid, product.liquid, header.liquid
4. Füge den Snippet an der Stelle ein, an der er gerendert werden soll
5. Klicke auf Save

⚠️ Wichtig:

• Füge den Snippet nur einmal pro Leiste ein
• Wenn dieselbe ID mehrmals auf derselben Seite vorkommt, kann die Leiste in jedem passenden Container gerendert werden
• Stelle sicher, dass der Container innerhalb des <body>-Tags und nicht innerhalb von <head> liegt

🚀 Schritt 7 – Speichern und veröffentlichen

Kehre zum Hoppy Announcement Bar-Editor zurück und klicke auf Save.

Klicke dann auf Publish (Veröffentlichen), um sie live zu schalten.

⚠️ Wichtig: Alleiniges Speichern macht die Leiste noch nicht für Kunden sichtbar. Du musst auf Publish klicken.

Sobald sie veröffentlicht ist, besuche die Seite, auf der du den Snippet platziert hast, um zu prüfen, ob die Leiste an der richtigen Stelle angezeigt wird 👀

🎯 Wann die benutzerdefinierte Platzierung sinnvoll ist

Die benutzerdefinierte Platzierung ist besonders nützlich, wenn:

• du die Leiste in einem bestimmten Theme-Abschnitt und nicht global oben oder unten anzeigen möchtest
• das Layout deines Themes mit der automatischen Positionierung oben/unten kollidiert
• du mehrere Leisten gleichzeitig verwendest und genau steuern möchtest, wo jede einzelne sitzt
• du die Leiste in einem Page-Builder-Abschnitt, einer benutzerdefinierten Landing Page oder einem bestimmten Produkt-Template platzieren möchtest
• du die Leiste zwischen bestehenden Content-Blöcken anzeigen möchtest und nicht oberhalb oder unterhalb davon

⚠️ Nützliche Tipps

Leiste verschieben oder entfernen

Da die Leiste an einen manuellen Container gebunden ist, kannst du:

• den App-Block oder Liquid-Snippet jederzeit an eine neue Position verschieben
• den Block oder Snippet entfernen, damit die Leiste auf dieser Seite nicht mehr gerendert wird
• denselben Snippet bei Bedarf in mehreren Templates wiederverwenden

Mit Targeting kombinieren

Auch bei benutzerdefinierter Platzierung kannst du weiterhin verwenden:

• Scheduling (Zeitplanung) – Start- und Enddaten festlegen
• Geolocation (Geolokalisierung) – Nur Besuchern aus bestimmten Ländern anzeigen
• Customer Targeting (Kunden-Targeting) – Nach Login-Status, Tags oder Lifetime-Spend filtern
• UTM Source Filtering (UTM-Quellenfilter) – Nur Besuchern bestimmter Traffic-Quellen anzeigen
• Time-on-Site Delay (Verzögerung nach Verweildauer) – Erscheinen der Leiste verzögern

💡 Diese Optionen werden im selben Tab Placement konfiguriert. Eine vollständige Übersicht findest du in der Dokumentation Advanced Targeting.

Benutzerdefinierte Platzierung im Warenkorb und Checkout

• Die Platzierungen Cart Page (Warenkorbseite) und Cart Drawer (Warenkorb-Drawer) unterstützen ebenfalls die Option Manual, wenn du präzise Kontrolle im Warenkorb-Bereich möchtest
• Die Platzierung Checkout Page (Checkout-Seite) (nur Shopify Plus) verwendet das Checkout-UI-Extension-Block-System anstelle eines Liquid-Snippets

🎉 Endergebnis

Wenn alles erfolgreich konfiguriert ist:

✅ Deine Announcement Bar erscheint genau dort, wo du sie in deinem Theme platziert hast
✅ Sie beachtet alle aktiven Targeting-Regeln (Zeitplan, Geolokalisierung, Kundensegmente usw.)
✅ Du kannst sie jederzeit verschieben oder entfernen, ohne Inhalt oder Design der Leiste zu ändern
✅ Mehrere benutzerdefinierte Leisten können auf derselben Seite in verschiedenen Abschnitten nebeneinander existieren
✅ Das Layout deines Shops bleibt sauber und durchdacht ✨

📚 Verwandte Dokumentation

• How to Set Up an Announcement Bar (Anleitung zum Einrichten einer Announcement Bar) – Vollständige Anleitung zum Erstellen und Veröffentlichen aller Leistentypen
• Design & Styling – Tiefe Anpassung von Farben, Schriften, Animationen und individuellem CSS
• Advanced Targeting – Zeitplanung, Geolokalisierung, Kunden-Tags, UTM-Filter und Regeln nach Verweildauer
• Announcement Bar Types Explained (Erklärung der Announcement-Bar-Typen) – Unterschiede zwischen Simple, Running, Multiple und Email-Leisten

Viel Erfolg beim Platzieren! 🥂

Aktualisiert am: 10/09/2026