> ## 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 platzierst du eine Announcement Bar an einer benutzerdefinierten Position

> ℹ️ **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
   * 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! 🥂