Personyze Wiki Personyze Wiki docs
Nederlands
Open Personyze
Docs/ Pop-uptemplates met aftelklok

Pop-uptemplates met aftelklok

Flash Sale Countdown en Cart Exit met timer en kortingscode: stijlaccenten, de afteltimer, demoproducten en advies voor de trigger.

5 min read Updated 36 minutes ago

Twee urgentiepop-uptemplates op één systeem: Flash Sale Countdown kondigt een uitverkoop aan met een live aftelklok en een productrij, en Cart Exit — Timer + Coupon vangt bezoekers die een winkelwagen achterlaten op met hun eigen product, een aftelklok en een kortingscode die met één klik naar het klembord wordt gekopieerd. Beide delen dezelfde Style Accent-presets, de volledige timerontwerper van Personyze en het systeem voor voorbeelden met demoproducten, dus alles op deze pagina geldt voor beide, tenzij een sectie iets anders zegt.

Pop-up Flash Sale Countdown, accent bold
Flash Sale Countdown — accent bold: kop, aftelklok, CTA en de rij met uitverkoopitems (in de editor worden demoproducten getoond).

Stijlaccenten

De eerste instelling in elke template is Style accent — één keuzelijst die de hele pop-up een nieuwe kleur geeft:

  • bold — donkere achtergrond met rode accenten (de standaard)
  • light — dezelfde indeling op wit
  • gold — donker premium met gouden accenten
  • ocean — wit met blauwe accenten

Het accent stuurt elk gekleurd element tegelijk aan — banner, timervakjes en -cijfers, rand van de kortingscode, knoppen, badges en uitverkoopprijzen — en blijft werken, ook nadat je afzonderlijke elementen hebt aangepast, omdat alle standaardstijlen naar de accentkleuren verwijzen in plaats van ze vast te zetten. Kies eerst het accent en stem daarna af wat je wilt.

Pop-up Flash Sale Countdown, accent light
Dezelfde pop-up nadat Style accent op light is gezet — één instelling, de hele pop-up opnieuw gestyled.

De afteltimer

Beide templates gebruiken de volledige timerontwerper van Personyze:

  • Vaste einddatum — telt af naar een specifieke datum en tijd met een tijdzone; de logische keuze voor een echte uitverkoop.
  • Per bezoeker (op basis van een cookie) — elke bezoeker krijgt een eigen periode die bij de eerste weergave begint, bijv. “je korting verloopt over 15 minuten”. Aanbevolen voor het terugwinnen van winkelwagens, met instelbare herstart.
  • Elke keer opnieuw starten — start bij elke weergave opnieuw; vooral voor testen en blijvende urgentie.

Vakjes, cijfers en de onderschriften DAYS / HOURS / MINUTES / SECONDS stel je allemaal in via het menu. Standaard staan de vakjes naast elkaar zonder scheidingsteken; met het veld Separator character voeg je een dubbele punt of een ander teken tussen de vakjes toe. Je kunt ook bepalen wat er gebeurt als de timer nul bereikt — een melding dat de tijd om is of een vervolgactie — zodat een verlopen pop-up nooit een dode timer toont.

Demoproducten — alleen in voorbeelden

Tijdens het ontwerpen, voordat er een productcatalogus is gekoppeld, tonen de templates democontent met een melding: Flash Sale toont zes voorbeeldproductkaarten, en Cart Exit toont een voorbeeldproduct in de winkelwagen. Demo’s verschijnen alleen in de Personyze-editor en op voorbeeldlinks; zodra je catalogus echte producten teruggeeft — of, bij Cart Exit, de bezoeker een echt item in de winkelwagen heeft — nemen de echte data het over. Gewone bezoekers van de site zien de demo nooit.

Flash Sale Countdown (uitverkoop met aftelklok)

Opbouw, van boven naar beneden: bovenlabel (“⚡ FLASH SALE”), kop (“UP TO 40% OFF — TODAY ONLY”), subregel, aftelklok, CTA-knop en een horizontaal scrollende productrij. De rij wordt gevuld door het algoritme dat je koppelt — voor deze template werkt een algoritme dat op afgeprijsde producten filtert het best, zodat de pop-up items toont die echt in de uitverkoop zijn. Kaarten tonen de productfoto, een automatische badge “X% OFF” (met een drempel voor de minimale korting), de titel en uitverkoopprijzen met doorhaling. Scrollpijlen verschijnen op desktop en verdwijnen automatisch op touchapparaten, waar je door de rij veegt.

Advies voor de trigger: toon eenmaal per bezoeker per uitverkoop, plan de actie in de periode van de uitverkoop, en sla pagina’s over die al aan de uitverkoop zijn gewijd.

Cart Exit — Timer + Coupon (winkelwagen verlaten)

Opbouw: een banner over de volle breedte (“YOUR DISCOUNT EXPIRES IN”), de aftelklok, en daarna twee kolommen — het winkelwagenproduct van de bezoeker op een witte kaart (afbeelding, titel, uitverkoopprijs), en de kant met de boodschap: kop, subregel, het gestippelde kortingscodevak, de CTA en een link “No thanks” om te sluiten.

Pop-up Cart Exit met timer en kortingscode, accent bold
Cart Exit — links het winkelwagenproduct van de bezoeker, de aftelklok, de kortingscode met Copy in één klik, en de CTA terug naar de checkout.

De kortingscode: de code die je invult, wordt in het vak getoond en naar het klembord van de bezoeker gekopieerd als die op Copy drukt, met de bevestiging “Copied!”. De pop-up toont de code — hij past de korting niet zelf toe. De code moet in je winkel bestaan, en als je platform links ondersteunt die een korting toepassen, kun je er een op de CTA-knop zetten zodat de korting bij het klikken wordt toegepast.

Het winkelwagenproduct is het meest recente item in de winkelwagen van de bezoeker, gehaald uit de interacties die Personyze op je site volgt.

Advies voor de trigger: exit intent op desktop, alleen bij een niet-lege winkelwagen, maximaal één keer per sessie. Exit intent op basis van de muis bestaat niet op touchapparaten — gebruik op mobiel in plaats daarvan een trigger op tijd of scrollen. Zowel de sluitlink als het × in de hoek gebruiken het standaardgedrag niet-meer-tonen.

Veelgestelde vragen

Overschrijft de accentinstelling mijn eigen stijlen? Nee. Die verandert het gedeelde kleurenpalet; stijlen die je op elementniveau bewerkt, blijven behouden, en je stijlen die naar de accentkleuren verwijzen, volgen de preset automatisch.

Wat gebeurt er als de timer nul bereikt? Dat stel je in de timerontwerper in: toon een melding dat de tijd om is of activeer een vervolgactie. Aftelklokken per bezoeker kunnen ook na een periode die jij kiest opnieuw starten.

Past de knop Copy de korting toe? Nee — die kopieert de code. De code moet geldig zijn in je winkel; gebruik een URL die de korting toepast op de CTA voor automatisch toepassen.

Welk product wordt getoond als er meerdere items in de winkelwagen zitten? Het meest recente item — het item waarmee de bezoeker het laatst interactie had.

Kan de rij van Flash Sale alleen afgeprijsde items tonen? Ja — koppel een algoritme dat filtert op producten met een actieve korting; de rij toont wat het algoritme teruggeeft.

Zien bezoekers ooit de democontent? Nee. Demo’s worden alleen in de Personyze-editor en op voorbeeldlinks weergegeven, en alleen als er geen echte data zijn.

Did this page answer your question?
Thank you — that goes to whoever maintains this page.