ℹ️ Note: Dit artikel is automatisch vertaald met behulp van AI en kan onjuistheden bevatten. Als er iets mis is, neem dan contact op met ons ondersteuningsteam.

Wil je je e-maillijst rechtstreeks vanuit je storefront laten groeien? 🚀

De Email Collection Bar (E-mailverzamelingsbalk) in Hoppy Announcement Banner maakt het eenvoudig om e-mailadressen van bezoekers te verzamelen en toevallige browsers om te zetten in abonnees — allemaal zonder je Shopify-winkel te verlaten.

Zodra deze is ingesteld, kunnen klanten zich rechtstreeks vanaf de banner aanmelden, en je kunt ze zelfs belonen met een automatische kortingscode om aanmeldingen te stimuleren ✨

✅ Voordat je begint

Voordat je je Email Collection Bar maakt, controleer je het volgende:

• De Hoppy Announcement Banner-app is geïnstalleerd in je Shopify-winkel
• Je Shopify-thema heeft de Announcement Banner app embed ingeschakeld

Als je de app-embed nog niet hebt ingeschakeld, ga je naar:

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

Schakel vervolgens Announcement Banner IN en klik op Save (Opslaan).

🛠️ Stap 1 — Maak een nieuwe Email Collection Bar

Open de Hoppy Announcement Banner-app vanuit je Shopify Admin.

Vervolgens:

→ Klik op Create New Announcement (Nieuwe aankondiging maken)

→ Selecteer Email Collection Bar

→ Kies een Preset (Voorinstelling) die past bij de stijl van je winkel, of klik op Make your Own (Zelf maken) om vanaf nul te beginnen

Zodra je een keuze hebt gemaakt, opent de instellingenpagina automatisch.

⚙️ Stap 2 — Configureer de inhoud

Nadat de instellingenpagina is geopend, kom je terecht in het tabblad Content (Inhoud).

In dit gedeelte bepaal je wat je bezoekers zien en hoe het e-mailverzamelformulier zich gedraagt.

🏷️ Announcement Name (Naam van aankondiging)

Dit veld is alleen voor intern gebruik.

Klanten zullen deze naam nooit zien.

Gebruik een herkenbare naam, zoals:

• Newsletter Signup Bar
• Welcome Offer Banner
• Email List Builder

💡 Door duidelijke interne namen te gebruiken, kun je instellingen later makkelijker terugvinden, vooral als je winkel meerdere campagnes draait.

📝 Title (Titel) & Subheading (Ondertitel)

Dit zijn de belangrijkste berichten die bezoekers zien.

• Title (Titel) — De kop van je Email Collection Bar. Gebruik de rich text editor om deze naar wens op te maken.
• Subheading (Ondertitel) — Een ondersteunend bericht onder de titel (optioneel).

Voorbeeld

• Title: "Meld je aan voor onze VIP-lijst en krijg 15% KORTING"
• Subheading: "Wees de eerste die op de hoogte is van nieuwe items en exclusieve deals"

💡 Een duidelijke en overtuigende titel helpt om het aanmeldpercentage te verhogen 📈

🔘 Button Text (Tekst van knop)

Dit is de tekst die wordt weergegeven op de aanmeldingsknop naast het e-mailinvoerveld.

Voorbeelden

• "Abonneren"
• "Mijn korting krijgen"
• "Sluit je aan bij de club"
• "Aanbieding claimen"

✉️ Email Placeholder (E-mailplaceholder)

Dit is de hinttekst die wordt weergegeven in het e-mailinvoerveld voordat de bezoeker begint te typen.

Voorbeeld

• "Vul je e-mailadres in"
• "Je e-mailadres"

🎉 Success Message (Succesbericht)

Dit bericht verschijnt nadat een bezoeker succesvol zijn of haar e-mailadres heeft verzonden.

Voorbeeld

• "Welkom aan boord! Controleer je inbox voor je kortingscode 🎉"
• "Bedankt voor je aanmelding!"

⚠️ Als je een kortingscode aanbiedt, is het verstandig om deze te vermelden in het succesbericht, zodat klanten weten wat ze kunnen verwachten.

🏷️ Coupon Code (Kortingscode)

Wil je nieuwe abonnees belonen met een korting? Je kunt een kortingscode toevoegen die verschijnt nadat ze hun e-mailadres hebben verzonden.

→ Vul je Coupon Code in

→ Vink Show copy button (Kopieerknop tonen) aan als je wilt dat klanten de code met één klik eenvoudig kunnen kopiëren

⚠️ Belangrijk:

• De standaard kortingscode "PROMO123" is slechts een tijdelijke aanduiding en werkt niet bij het afrekenen, tenzij er in Shopify een korting met die code bestaat.
• Houd er rekening mee dat het invoeren van een kortingscode in onze app niet automatisch een Shopify-korting aanmaakt.
• Voordat je een kortingscode via onze app toont, moet je eerst de bijbehorende korting aanmaken in Shopify Admin → Discounts. Zodra de korting is aangemaakt, kun je dezelfde code in onze app gebruiken om deze aan klanten te tonen na aanmelding.

❌ Close Icon (Sluiticoon)

Schakel dit in als je wilt dat bezoekers de Email Collection Bar kunnen sluiten.

Als dit is ingeschakeld, kun je ook bepalen hoe snel de banner opnieuw verschijnt:

• Appear again after (Opnieuw verschijnen na) — Stel een getal in
• Unit (Eenheid) — Kies hours (uren) of days (dagen)

Dit helpt je om terugkerende bezoekers niet te irriteren, terwijl nieuwe bezoekers nog steeds de kans krijgen om zich aan te melden.

📋 Copy Button (Kopieerknop)

Schakel dit in als je wilt dat bezoekers de Coupon Code kunnen kopiëren.

Dit helpt bezoekers om de Coupon Code met één klik te kopiëren, in plaats van deze te selecteren.

🎨 Stap 3 — Pas het ontwerp aan

Klik op Continue to design (Doorgaan naar ontwerp) om naar het tabblad Design (Ontwerp) te gaan.

Hier bepaal je hoe je Email Collection Bar eruitziet:

• Positie (top push, bottom, etc.)
• Kleuren en achtergrondstijlen
• Lettergroottes en knopstijlen
• Afronding van hoeken en afstand
• Animaties en sticky-gedrag

💡 Voor een volledig overzicht van alle ontwerpopties, bekijk onze Design & Styling-documentatie.

📍 Stap 4 — Stel placement & targeting in

Open het tabblad Placement (Plaatsing) om te bepalen waar en wanneer je Email Collection Bar verschijnt.

📐 Display Position (Weergavepositie)

Deze instelling bepaalt de fysieke locatie van de banner op de pagina.

• Top Push — Duwt de rest van de pagina-inhoud naar beneden. De banner staat in de normale documentstroom.
• Top Push (Sticky) — Blijft vastzitten aan de bovenkant van het beeldscherm terwijl de klant scrollt. De pagina-inhoud wordt nog steeds naar beneden geduwd.
• Top Overlap — Zweeft over de bovenkant van de pagina zonder de inhoud naar beneden te duwen.
• Top Overlap (Sticky) — Zweeft aan de bovenkant en blijft zichtbaar tijdens het scrollen.
• Bottom Overlap (Sticky) — Verschijnt aan de onderkant van het beeldscherm en blijft daar tijdens het scrollen.
• Manual — Je bepaalt zelf precies waar de banner verschijnt met behulp van een codefragment of app-blok.

---

🌐 Page Targeting (Paginatargeting)

Kies op welke pagina's de Email Collection Bar moet verschijnen:

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

🌍 Geolocation Targeting (Geolocatietargeting)

Standaard wordt de banner weergegeven aan alle bezoekers wereldwijd.

Als je specifieke landen of regio's wilt targeten:

→ Schakel Allow all locations (Alle locaties toestaan) uit

→ Selecteer de landen waar de banner moet verschijnen

👥 Customer Targeting (Klanttargeting)

Bepaal wie de Email Collection Bar ziet op basis van klantgedrag:

• All visitors
• Logged-in customers only
• Logged-out visitors only
• Customers with specific tags
• Customers based on lifetime spend

💡 Je kunt de banner bijvoorbeeld alleen tonen aan nieuwe bezoekers die nog niet zijn ingelogd, wat ideaal is voor het opbouwen van een lijst.

📅 Scheduling (Optioneel)

Stel een Start Date (Startdatum) en End Date (Einddatum) in als je wilt dat de Email Collection Bar wordt weergegeven gedurende een specifieke campagneperiode.

Als er geen datums zijn ingesteld, verschijnt de banner direct na publicatie en blijft deze actief totdat je deze unpubliceert.

🔗 Stap 5 — Schakel Shopify Customer Sync in (optioneel)

Als je wilt dat verzamelde e-mailadressen automatisch worden toegevoegd aan je Shopify Customers-lijst:

→ Ga naar het gedeelte Integrations (Integraties) in de Hoppy Announcement Banner-app

→ Zoek Shopify customer list integration (Shopify-klantenlijstintegratie)

→ Schakel het in en configureer:

• Email Subscription (E-mailabonnement) — Kies of abonnees worden gemarkeerd als Subscribed (Geabonneerd) of Not Subscribed (Niet geabonneerd) voor e-mailmarketing

→ Klik op Save

Zodra dit is ingeschakeld, wordt elk e-mailadres dat via je verzamelingsbanner wordt ingediend, gesynchroniseerd als klantprofiel in Shopify.

Je kunt ook op Sync previous emails (Eerdere e-mails synchroniseren) klikken om e-mailadressen die vóór het inschakelen van deze integratie zijn verzameld, alsnog toe te voegen.

💾 Stap 6 — Save & Publish

Zodra je instellingen compleet zijn:

1. Klik op Save om je configuratie op te slaan
2. Klik op Publish (Publiceren) om de Email Collection Bar live op je storefront te zetten

⚠️ Alleen opslaan maakt de banner niet zichtbaar voor klanten. Je moet deze publiceren.

🎉 Eindresultaat

Zodra alles succesvol is ingesteld:

✅ Bezoekers zien een opvallende Email Collection Bar op je storefront
✅ E-mailadressen worden rechtstreeks vanaf de banner verzameld
✅ Abonnees zien een succesbericht (en optioneel een kortingscode)
✅ E-mailadressen worden automatisch gesynchroniseerd met Shopify Customers (als de integratie is ingeschakeld)
✅ Je e-maillijst groeit terwijl jij je richt op het runnen van je winkel 🚀

Door de Email Collection Bar effectief te gebruiken, kun je een loyaal publiek opbouwen, herhaalaankopen stimuleren en de customer lifetime value verhogen ✨

Bijgewerkt op: 10/09/2026