ℹ️ 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 deine E-Mail-Liste direkt aus deinem Shop aufbauen? 🚀

Mit der Email Collection Bar in Hoppy Announcement Banner kannst du ganz einfach Besucher-E-Mails erfassen und aus neugierigen Besuchern Abonnenten machen – und das alles, ohne deinen Shopify-Store zu verlassen.

Sobald sie eingerichtet ist, können Kunden sich direkt über die Leiste anmelden. Du kannst sie sogar mit einem automatischen Coupon-Code belohnen, um Anmeldungen zu fördern ✨

✅ Bevor du beginnst

Bevor du deine Email Collection Bar erstellst, stelle sicher, dass:

• Die App Hoppy Announcement Banner in deinem Shopify-Store installiert ist
• Dein Shopify-Theme das Announcement Banner app embed (App-Einbettung) aktiviert hat

Falls du die App-Einbettung noch nicht aktiviert hast, gehe zu:

Shopify Admin → Sales Channels → Online Store → Themes → Edit Theme → App Embeds

Schalte dann Announcement Banner ein und klicke auf Save (Speichern).

🛠️ Schritt 1 — Eine neue Email Collection Bar erstellen

Öffne die App Hoppy Announcement Banner in deinem Shopify Admin.

Gehe dann wie folgt vor:

→ Klicke auf Create New Announcement (Neue Ankündigung erstellen)

→ Wähle Email Collection Bar (E-Mail-Erfassungsleiste)

→ Wähle ein Preset (Voreinstellung), das zum Stil deines Shops passt, oder klicke auf Make your Own (Eigene erstellen), um von Grund auf neu zu starten

Sobald du eine Auswahl getroffen hast, öffnet sich automatisch die Einrichtungsseite.

⚙️ Schritt 2 — Inhalte konfigurieren

Nachdem du die Einrichtungsseite geöffnet hast, befindest du dich im Tab Content (Inhalt).

In diesem Bereich legst du fest, was deine Besucher sehen und wie sich das E-Mail-Erfassungsformular verhält.

🏷️ Announcement Name

Dieses Feld ist nur für den internen Gebrauch bestimmt.

Kunden sehen diesen Namen niemals.

Verwende einen beliebigen erkennbaren Namen, z. B.:

• Newsletter-Anmeldeleiste
• Willkommensangebots-Banner
• E-Mail-List-Builder

💡 Eine sinnvolle interne Benennung erleichtert es dir später, Einrichtungen wiederzuerkennen – besonders wenn dein Shop mehrere Kampagnen parallel laufen lässt.

📝 Title & Subheading

Das sind die Hauptnachrichten, die den Besuchern angezeigt werden.

• Title (Titel) — Die Überschrift deiner Email Collection Bar. Verwende den Rich-Text-Editor, um sie nach Belieben zu formatieren.
• Subheading (Unterüberschrift) — Eine ergänzende Nachricht unter dem Titel (optional).

Beispiel

• Title: „Tritt unserer VIP-Liste bei und erhalte 15 % Rabatt“
• Subheading: „Erfahre als Erster von neuen Artikeln und exklusiven Angeboten“

💡 Ein klarer und überzeugender Titel erhöht die Anmelderate 📈

🔘 Button Text

Das ist der Text auf dem Anmeldebutton neben dem E-Mail-Eingabefeld.

Beispiele

• „Abonnieren“
• „Meinen Rabatt erhalten“
• „Mitmachen“
• „Angebot einlösen“

✉️ Email Placeholder

Das ist der Hinweistext im E-Mail-Eingabefeld, bevor der Besucher mit der Eingabe beginnt.

Beispiel

• „E-Mail eingeben“
• „Deine E-Mail-Adresse“

🎉 Success Message

Diese Nachricht erscheint, nachdem ein Besucher seine E-Mail erfolgreich eingereicht hat.

Beispiel

• „Willkommen an Bord! Schau in deinen Posteingang für deinen Rabattcode 🎉"
• „Danke fürs Abonnieren!"

⚠️ Wenn du einen Coupon-Code anbietest, empfiehlt es sich, ihn in der Erfolgsmeldung zu erwähnen, damit Kunden wissen, was sie erwartet.

🏷️ Coupon Code

Möchtest du neue Abonnenten mit einem Rabatt belohnen? Du kannst einen Coupon-Code hinzufügen, der erscheint, nachdem sie ihre E-Mail eingereicht haben.

→ Gib deinen Coupon Code (Coupon-Code) ein

→ Aktiviere Show copy button (Kopieren-Button anzeigen), wenn Kunden den Code per Klick einfach kopieren sollen

⚠️ Wichtig:

• Der Standard-Coupon-Code „PROMO123“ ist nur ein Platzhalter und funktioniert an der Kasse nur, wenn in Shopify ein Rabatt mit diesem Code existiert.
• Bitte beachte: Die Eingabe eines Coupon-Codes in unserer App erstellt nicht automatisch einen Shopify-Rabatt.
• Bevor du einen Coupon-Code über unsere App anzeigst, musst du den entsprechenden Rabatt zuerst unter Shopify Admin → Discounts erstellen. Sobald der Rabatt erstellt ist, kannst du denselben Code in unserer App verwenden, um ihn Kunden nach der Anmeldung anzuzeigen.

❌ Close Icon

Aktiviere diese Option, wenn Besucher die Email Collection Bar schließen können sollen.

Wenn sie aktiviert ist, kannst du außerdem festlegen, wann die Leiste wieder erscheint:

• Appear again after (Erneut erscheinen nach) — Gib eine Zahl ein
• Unit (Einheit) — Wähle hours (Stunden) oder days (Tage)

So vermeidest du, wiederkehrende Besucher zu nerven, und gibst neuen Besuchern dennoch die Möglichkeit, sich anzumelden.

📋 Copy Button

Aktiviere diese Option, wenn Besucher den Coupon-Code kopieren können sollen.

So können Besucher den Coupon-Code mit einem Klick kopieren, ohne ihn manuell auswählen zu müssen.

🎨 Schritt 3 — Design anpassen

Klicke auf Continue to design (Weiter zum Design), um zum Tab Design zu gelangen.

Hier legst du fest, wie deine Email Collection Bar aussieht:

• Position (z. B. Top Push, Bottom usw.)
• Farben und Hintergrundstile
• Schriftgrößen und Button-Styling
• Abgerundete Ecken (Border Radius) und Abstände
• Animationen und Sticky-Verhalten

💡 Eine vollständige Übersicht aller Design-Optionen findest du in unserer Design & Styling-Dokumentation.

📍 Schritt 4 — Platzierung und Targeting einrichten

Öffne den Tab Placement (Platzierung), um festzulegen, wo und wann deine Email Collection Bar angezeigt wird.

📐 Display Position

Diese Einstellung legt die physische Position der Leiste auf der Seite fest.

• Top Push — Schiebt den restlichen Seiteninhalt nach unten. Die Leiste befindet sich im normalen Dokumentenfluss.
• Top Push (Sticky) — Bleibt beim Scrollen oben im sichtbaren Bereich fixiert. Der Seiteninhalt wird weiterhin nach unten geschoben.
• Top Overlap — Schwebt über dem oberen Seitenbereich, ohne den Inhalt nach unten zu schieben.
• Top Overlap (Sticky) — Schwebt oben und bleibt beim Scrollen sichtbar.
• Bottom Overlap (Sticky) — Erscheint unten im sichtbaren Bereich und bleibt dort beim Scrollen.
• Manual (Manuell) — Du legst die Position genau fest, indem du einen Code-Snippet oder einen App-Block verwendest.

🌐 Page Targeting

Wähle aus, auf welchen Seiten die Email Collection Bar angezeigt werden soll:

• All pages
• Homepage only
• All product pages
• All collection pages
• Specific products
• Specific collections
• Custom pages

🌍 Geolocation Targeting

Standardmäßig wird die Leiste allen Besuchern weltweit angezeigt.

Wenn du bestimmte Länder oder Regionen ansprechen möchtest:

→ Deaktiviere Allow all locations (Alle Standorte zulassen)

→ Wähle die Länder aus, in denen die Leiste angezeigt werden soll

👥 Customer Targeting

Bestimme, wer die Email Collection Bar auf Grundlage des Kundenverhaltens sieht:

• All visitors (Alle Besucher)
• Logged-in customers only (Nur eingeloggte Kunden)
• Logged-out visitors only (Nur nicht eingeloggte Besucher)
• Customers with specific tags (Kunden mit bestimmten Tags)
• Customers based on lifetime spend (Kunden basierend auf Lifetime-Ausgaben)

💡 Du kannst die Leiste beispielsweise nur neuen Besuchern anzeigen, die noch nicht eingeloggt sind – ideal, um deine Liste aufzubauen.

📅 Scheduling (Optional)

Lege ein Start Date (Startdatum) und ein End Date (Enddatum) fest, wenn die Email Collection Bar nur während eines bestimmten Kampagnenzeitraums laufen soll.

Wenn keine Daten festgelegt sind, erscheint die Leiste sofort nach der Veröffentlichung und bleibt aktiv, bis du sie zurückziehst.

🔗 Schritt 5 — Shopify Customer Sync aktivieren (Optional)

Wenn erfasste E-Mails automatisch zu deiner Shopify Customers-Liste hinzugefügt werden sollen:

→ Gehe im Hoppy Announcement Banner App zum Bereich Integrations (Integrationen)

→ Suche nach Shopify customer list integration (Shopify-Kundenlisten-Integration)

→ Aktiviere sie und konfiguriere:

• Email Subscription (E-Mail-Abonnement) — Wähle aus, ob Abonnenten für E-Mail-Marketing als Subscribed (Abonniert) oder Not Subscribed (Nicht abonniert) markiert werden

→ Klicke auf Save (Speichern)

Sobald die Integration aktiviert ist, wird jede über deine Collection Bar eingereichte E-Mail als Kundenprofil in Shopify synchronisiert.

Du kannst auch auf Sync previous emails (Vorherige E-Mails synchronisieren) klicken, um E-Mails, die vor der Aktivierung dieser Integration erfasst wurden, nachträglich zu synchronisieren.

💾 Schritt 6 — Speichern und veröffentlichen

Sobald deine Einrichtung abgeschlossen ist:

1. Klicke auf Save (Speichern), um deine Konfiguration zu speichern
2. Klicke auf Publish (Veröffentlichen), um die Email Collection Bar in deinem Shop live zu schalten

⚠️ Alleiniges Speichern macht die Leiste noch nicht für Kunden sichtbar. Du musst sie veröffentlichen.

🎉 Endergebnis

Sobald alles erfolgreich eingerichtet ist:

✅ Besucher sehen eine auffällige Email Collection Bar in deinem Shop
✅ E-Mails werden direkt über das Banner erfasst
✅ Abonnenten sehen eine Erfolgsmeldung (und optional einen Coupon-Code)
✅ E-Mails werden automatisch mit Shopify Customers synchronisiert (falls die Integration aktiviert ist)
✅ Deine E-Mail-Liste wächst, während du dich um deinen Store kümmerst 🚀

Die effektive Nutzung der Email Collection Bar hilft dir, eine treue Zielgruppe aufzubauen, wiederkehrende Käufe zu fördern und den Customer-Lifetime-Value zu steigern ✨

Aktualisiert am: 10/09/2026