> ## 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).

# 🎨 Aangepaste PopUps instellen

> ℹ️ **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 volledige controle over waar en hoe je popup verschijnt? 🛠️

Aangepaste PopUps zijn gebouwd voor geavanceerde use cases. Ze zijn standaard **handmatige plaatsing**, wat betekent dat u precies bepaalt waar de popup woont in uw thema en u krijgt toegang tot een **aangepaste CSS** veld en a **drijvende actieknop** voor maximale flexibiliteit.

Deze gids brengt u door de hele setup zodat u uw eerste Custom PopUp in minuten kunt starten.

---

# **✅ Voordat u begint met het inschakelen van de App Embed**

Voor elke popup te verschijnen op uw storefront, de app embed moet worden ingeschakeld in uw Shopify thema.

Ga naar:

**Shopify Admin → Sales Channels → Online Store → Thema's → Thema bewerken → App Embedden**

Dan:

*   Zoeken **Hoppy Popups**
*   Schakelen **AAN**
*   Klik **Opslaan**

ℹ️ Zonder deze stap, zal uw popup niet renderen op de storefront zelfs na het publiceren.

---

# **⚙️ Stap 1 Maak een nieuwe aangepaste PopUp**

Open de **Hoppy PopUps** App.

Dan:

→ Klik **Nieuwe PopUp aanmaken**

→ selecteren **Aangepaste PopUp** van de lijst van popup types.

De instellingenpagina wordt automatisch geopend met **handmatige plaatsing** Standaard geselecteerd.

---

# **📝 Stap 2 Configureer de inhoud**

Na het openen van de setup pagina, je landt binnen de **Inhoud** tab.

Deze sectie bepaalt wat uw bezoekers zien en hoe ze omgaan met de popup.

---

## **🏷️ PopUp naam**

Dit veld wordt uitsluitend voor interne doeleinden gebruikt. Klanten zullen deze naam nooit zien.

U kunt elke herkenbare naam gebruiken, zoals:

*   Aangepaste aankondiging
*   Thema-geplaatste Banner
*   Aangepaste popup voor ontwikkelaar
*   Hard gecodeerd Promo

💡 Met behulp van de juiste interne naamgeving maakt het gemakkelijker om setups later te identificeren, vooral als uw winkel meerdere campagnes draait.

---

## **💬 Titel & Omschrijving**

Deze verschijnen bovenaan uw popup en moeten duidelijk uw bericht communiceren.

### **Voorbeeld**

*   **Titel:** "Speciale aankondiging"
*   **Beschrijving:** "Bekijk onze nieuwste collectie"

U kunt deze aanpassen aan uw campagnestem.

---

## **📧 E-mail en telefooncollectie**

Kies welke velden u wilt tonen in uw popup:

*   **E-mailverzamelingsveld tonen** Vangt bezoeker e-mails
*   **Telefoonnummerveld tonen** Vangt telefoonnummers met land-code selectie

Je kunt beide tonen, slechts één, of geen van beide als je alleen een aankondiging toont.

---

## **🔗 Knopkoppeling**

Als u geen e-mails of telefoonnummers verzamelt, wordt de popup een eenvoudige call-to-action knop. Stel de **Verband** naar de pagina die u wilt dat bezoekers bezoeken, bijvoorbeeld een verzamelpagina, productpagina of externe URL.

---

## **⚙️ Extra instellingen voor collectie en Coupon**

Deze sectie geeft u extra controle over hoe bezoekersinformatie wordt verzameld en hoe kortingen worden gepresenteerd in de popup.

---

### **📩 E-mail Verzameling Veld Plaatshouder**

Pas de plaatshouder tekst weergegeven in het invoerveld e-mail.

### **Voorbeeld**

*   "Voer je e-mail in"
*   "Je beste e-mailadres"

Dit helpt bezoekers te begeleiden over welke informatie ze moeten invoeren.

---

### **❌ E-mailfoutbericht**

Stel het getoonde validatiebericht in wanneer een bezoeker een ongeldig e-mailadres invoert.

### **Voorbeeld**

*   "Voer een geldig e-mailadres in"

Dit verschijnt automatisch als het ingevoerde e-mailformaat onjuist is.

---

### **📱 Standaard landcode**

Kies de standaard landcode voor het telefoonnummerveld.

### **Voorbeeld**

*   Verenigde Staten (+1)
*   Verenigd Koninkrijk (+44)
*   India (+91)

Bezoekers kunnen het land nog steeds handmatig veranderen, tenzij beperkt.

---

### **📞 Telefoonnummer Plaatshouder**

Pas de plaatshouder tekst weergegeven in het telefoonnummer veld.

### **Voorbeeld**

*   "Voer je telefoonnummer in"
*   "Mobiel nummer"

Dit verbetert de duidelijkheid en bevordert een goede opmaak.

---

### **⚠️ Fout in telefoonnummerbericht**

Stel het weergegeven bericht in wanneer een ongeldig telefoonnummer wordt ingevoerd.

### **Voorbeeld**

*   "Voer een geldig telefoonnummer in"

Dit helpt bezoekers begrijpen waarom onderwerping mislukt.

---

### **🔘 Knoptekst**

Pas de call-to-action-knoptekst aan die in de popup getoond wordt.

### **Voorbeeld**

*   "Shop Now"
*   "Claim Discount"
*   "Unlock Offer"

Het gebruik van actiegerichte tekst kan conversies verbeteren.

---

### **🏷️ Couponcode tonen**

Kies of de couponcode in de popup moet verschijnen na succesvolle e-mailopname.

Beschikbare opties:

*   **Ja.** Het toont de couponcode voor bezoekers
*   **Nee** Verbergt de afdeling couponcode

Dit is handig als kortingen automatisch of extern worden toegepast.

ℹ️ De couponcode kan alleen worden weergegeven als de e-mail wordt gevangen.

---

### **🎟️ Couponcode**

ℹ️ Dit veld is eenmaal beschikbaar **Couponcode tonen** is aangeschakeld naar **JA**.

Om een couponcode weer te geven, kunt u:

1.  Selecteer een van de Coupon Codes die u hebt gemaakt in Shopify Beheerder → Kortingen door te klikken op Selecteren / wijzigen Korting.
2.  U kunt een nieuwe maken door te klikken op **Nieuwe korting aanmaken**.

### **Voorbeeld**

*   SAVE10
*   Welkom20
*   COUPON123

### **💸 Kortingsaanvraag**

Deze optie bepaalt hoe de korting wordt toegepast. Het heeft twee opties:

1.  **Klant zal moeten toepassen korting handmatig** De klant moet de couponcode invoeren tijdens de kassa om de korting te ontvangen.
2.  **Korting automatisch toepassen** De korting wordt automatisch toegepast tijdens de kassa zonder dat de klant de couponcode hoeft in te voeren.

⚠️ **Belangrijk:**

*   Onze app maakt of beheert geen couponcodes/kortingen. Je moet ze creëren in Shopify Beheerder → Kortingen voor het gebruik ervan in de popup.

---

### **☑️ Opt-in selectievak toevoegen**

Kies of er een extra opt-in selectievakje getoond wordt in de popup.

Dit kan worden gebruikt voor:

*   Vergunning voor het in de handel brengen
*   SMS-toestemming
*   Abonnementen op de nieuwsbrief
*   Voorwaarden

Beschikbare opties:

*   **Ja.** Het selectievakje tonen
*   **Nee** Verbergt het selectievakje

---

### **❎ Pictogram sluiten**

Activeer of schakel het pictogram van de popup uit.

*   **Ingeschakeld** Bezoekers kunnen de popup handmatig sluiten
*   **Uitgeschakeld** Verwijdert het pictogram van de popup

Dit helpt controleren hoe afwijsbaar de popup ervaring moet zijn.

---

## **✉️ Succesberichten**

Nadat een bezoeker hun gegevens heeft ingediend, verschijnt er een succesboodschap.

*   **Succesbericht:** Welkom in onze winkel.

U kunt ook een beschrijving onder het bericht toevoegen met volgende stappen of instructies.

---

## **🖱️ Knop Klik op gedrag**

ℹ️ Deze optie is alleen beschikbaar wanneer "E-mailveld tonen" & "Telefonisch nummerveld tonen" niet aangevinkt is.

Hiermee kunt u bepalen wat er gebeurt wanneer een bezoeker klikt op de CTA-knop in de popup. Het behandelt een van de volgende aspecten:

1.  **Popup sluiten** De popup zal sluiten.
2.  **Openen Coupon Code** De code van de coupon zal worden onthuld aan de bezoeker, maar u zult de Coupon Code zoals hierboven beschreven in de "Show Coupon Code" sectie hebben ingesteld.
3.  **Verwijzing naar koppeling** Het selecteren van dit geeft u een invoerveld genaamd "Link" waar u de URL kunt opgeven waarnaar de bezoeker zal worden doorgestuurd

---

## **🔄 Drijvende actieknop**

Zelfs met handmatige plaatsing kunt u een **Drijvende actieknop** die zichtbaar blijft op de pagina zodat bezoekers de popup kunnen heropenen na het sluiten ervan.

Kies een positie:

*   **Rechtsonder**
*   **Linksonder**
*   **Scherm rechts**
*   **Scherm links**

Voer dan de **Knoptekst** "Open Offer," "Get Discount" of "Learn More."

Om de drijvende knop volledig uit te schakelen, selecteert u **Zwevende actieknop uitschakelen**.

---

# **🎨 Stap 3**

Overschakelen naar de **Ontwerp** tabblad voor toegang tot de **Aangepaste CSS** Section.

Dit is waar Custom PopUps echt schijnt. U kunt uw eigen CSS om elke standaard styling overschrijven.

---

## **📝 CSS-sjabloon**

De app biedt een kant-en-klare sjabloon met gemeenschappelijke selectoren:

.futureblink-populp {  
/\* Hoofdpopup container \*/  
}  
.futureblink-populp .title {  
/\* Popup titel \*/  
}  
.futureblink-populp.mobile .title {  
/\* Mobiele titel voorrang \*/  
}  
.futureblink-populp .description {  
/\* Popup beschrijving \*/  
}  
.futureblink-populp.mobile .description {  
/\* Mobiele beschrijving override \*/  
}  
.futureblink-populp .cta-knop {  
/\* Call-to-action knop \*/  
}  
.futureblink-populp.mobile .cta-knop {  
/\* Mobiele knop override \*/  
}  
.futureblink-populp .close-btn {  
/\* Pictogram sluiten \*/  
}  
.futureblink-populp.mobile .close-btn {  
/\* Mobiele sluitpictogram override \*/  
}

Plak uw aangepaste CSS in het veld en klik **Toepassen**.

---

## **⚠️ Belangrijke opmerkingen**

*   Aangepaste CSS overschrijft alle andere designinstellingen Gebruik het wanneer u pixel-perfecte controle nodig hebt
*   Mobiele selectoren laten je anders stijlen voor telefoongebruikers
*   Klik **Reset** om het standaard CSS-sjabloon op elk moment te herstellen

---

# **🖱️ Stap 4 Stel de Trigger & Display regels in**

Verplaats naar de **Plaatsing/Targeting** tabblad om te controleren wanneer en waar uw aangepaste PopUp verschijnt.

Omdat Custom PopUps handmatige plaatsing gebruiken, gelden de meeste standaard trigger instellingen niet op dezelfde manier. U kunt echter nog steeds instellen:

*   **Frequentie weergeven** Show elke keer, eenmaal per bezoek, of limiet met een afkoeling
*   **Klantgerichtheid** Aanmeldstatus, klanttags, levensduur
*   **Geolocatie** De hele wereld of specifieke landen
*   **Planning** Optionele begin- en einddatum

Voor een uitgebreide uitleg van elke targeting optie, zie de speciale Advanced Targeting documentatie.

---

# **✅ Stap 5: Opslaan en publiceren**

Zodra alles er goed uitziet:

1.  Klik **Opslaan** om uw configuratie op te slaan
2.  Klik **Publiceren** om de popup live te maken op uw storefront

⚠️ **Alleen sparen maakt de popup niet zichtbaar voor klanten.** Je moet het publiceren.

⚠️ **Voor handmatige plaatsing:** Vergeet niet om ook de code knipsel toe te voegen aan uw thema publiceren alleen zal de popup niet automatisch plaatsen.

Als de app embed nog niet is ingeschakeld, zal een banner u eraan herinneren om het te activeren in uw Shopify thema-editor.

---

# **🎉 Eindresultaat**

Eenmaal succesvol geconfigureerd:

✅ Uw popup verschijnt precies waar u het plaatste in uw thema  
✅ Aangepaste CSS geeft u volledige visuele controle  
✅ Een drijvende actieknop houdt de popup toegankelijk (indien ingeschakeld)  
✅ Uw popup respecteert targeting regels, planning, en apparaatinstellingen  
✅ Bezoekers interageren met een volledig on-brand, aangepaste ervaring

Uw aangepaste PopUp is nu live en uniek van u 🚀

---