UI elements: voorbeelden
De kant-en-klare sjablonen om mee te beginnen, en acht elementen die je vandaag kunt maken, met de instellingen erbij.
De sjablonen
Section titled “De sjablonen”Bij Nieuw element staan in de eerste stap onder Of begin met een sjabloon zes sjablonen: Welkomstkorting, Gratis-verzendbalk, Black Friday-deal, Winkelmandherinnering, Past hier goed bij en, als Site search aan staat, Niet gevonden? Wij zoeken het. De andere staan onder Meer sjablonen.
Een sjabloon vult de vorm, het doel, het moment en een eerste tekst in, en gaat door naar stap 2. Daarna pas je alles aan. De tekst volgt de hoofdtaal van je project (Nederlands, Engels of Duits).
| Sjabloon | Vorm | Doel | Wanneer |
|---|---|---|---|
| Welkomstkorting | Modal | E-mailadressen verzamelen | Na 6 seconden |
| Gratis-verzendbalk | Balk | Alleen informeren | Direct, alleen als er iets in de winkelwagen zit |
| Black Friday-deal | Afteltimerbalk | Doorklikken | Direct. Vul bij Inhoud de eindtijd in: zonder verschijnt de balk niet. |
| Winkelmandherinnering | Slide-in | Doorklikken | Bij verlaten, alleen als er iets in de winkelwagen zit |
| Past hier goed bij | Past hier goed bij (een rij producten) | Producten tonen | Op productpagina’s |
| Niet gevonden? Wij zoeken het | Onder zoekresultaten | E-mailadressen verzamelen | Na het laatste zoekresultaat |
| Om een review vragen (Meer sjablonen) | Slide-in | Alleen informeren | Na 8 seconden |
| Win een prijs (Meer sjablonen) | Rad van fortuin | E-mailadressen verzamelen | Na 10 seconden |
| Recente aankopen (Meer sjablonen) | Social proof | Producten tonen | Na 4 seconden |
| Productslide-in (Meer sjablonen) | Productslide-in | Producten tonen | Na 50% scrollen |
| Nieuwsbriefbalk (Meer sjablonen) | Balk | E-mailadressen verzamelen | Na 15 seconden |
| Leeftijdscheck (Meer sjablonen) | Bevestiging | Alleen informeren | Direct |
| Eén vraag (Meer sjablonen) | Microenquête | Eén vraag stellen | Bij verlaten |
De winkelmandherinnering en de gratis-verzendbalk gebruiken de velden {{cart.item}},
{{cart.price}} en {{cart.total}}. Daarvoor moeten de winkelwagen-events van je site
aan staan onder Beheer → Bezoekers & toestemming → Wat we meten.
Niet gevonden? Wij zoeken het voor je
Section titled “Niet gevonden? Wij zoeken het voor je”Voor een shop met unieke of wisselende stukken: wat vandaag niet op voorraad is, komt misschien volgende maand binnen. Laat de bezoeker dan zijn zoekvraag achterlaten.
- Ga naar UI elements en klik op Nieuw element.
- Kies onder Of begin met een sjabloon Niet gevonden? Wij zoeken het. De vorm wordt Onder zoekresultaten, met een formulier: e-mailadres, Wat zoek je precies? en Je zoekvraag (al ingevuld met waar de bezoeker op zocht).
- Vul bij Inhoud in de bouwsteen Formulier bij Mail elke inzending naar het adres in dat de vragen beantwoordt. Laat Meld ze ook aan voor de nieuwsbrief uit: het is een vraag, geen aanmelding.
- Kies bij Zoekopdrachten wanneer het blok verschijnt, bijvoorbeeld Categorie (in de resultaten) valt in (incl. onderliggend) “Tweedehands”. Wil je het ook tonen als er niets gevonden is, laat dan één van de voorwaarden gelden en voeg Aantal resultaten is 0 toe.
- Klik bij Controleren op Live zetten. Staat UI elements in testmodus, test dan eerst met de debugger.
De tekst: “Artikel niet gevonden? Mail ons je zoekvraag — zodra we iets vinden dat past, mailen we je direct.” Elke inzending staat onder Aanmeldingen, met de zoekterm erbij.
Acht elementen om zelf te maken
Section titled “Acht elementen om zelf te maken”De voorbeelden hieronder gaan uit van Voorbeeldshop, een verzonnen webwinkel.
Nieuwsbrief, zonder dat het irritant wordt
Section titled “Nieuwsbrief, zonder dat het irritant wordt”Popup · Slide-in, doel E-mailadressen verzamelen. Positie: Rechts. Bij Wie & wanneer: Alle pagina’s (de afrekenpagina staat al bij Nooit op deze paden), Na 50% scrollen, Tot aanmelding.
Waarom scrollen en niet een aantal seconden? Wie scrolt, leest. Die bezoeker heeft je winkel al gekozen.
Gratis verzending boven een bedrag
Section titled “Gratis verzending boven een bedrag”Banner · Balk, doel Doorklikken naar product of pagina, met een knop naar je collectie. Positie: Bovenaan. Direct, Alle pagina’s. Zet een Einde, dan hoef je er niet aan te denken hem uit te zetten.
Uitverkoop die vrijdag stopt
Section titled “Uitverkoop die vrijdag stopt”Banner · Afteltimerbalk, Telt af naar Een vast moment, Eindigt vrijdag
23:59. Als hij op nul staat: Verberg de balk. Bij Wie & wanneer: Specifieke URL
met /sale.
Passende producten op elke productpagina
Section titled “Passende producten op elke productpagina”Productwidget · Past hier goed bij, bron Past bij het huidige product, Aantal 4, Prijs tonen aan. Positie: Na productbeschrijving, kaarten in Stijl van de shop. Bekijk het resultaat met Testen op mijn site: het voorbeeld in het dashboard toont de Nexym stijl. Heeft een product nog geen gerelateerde of samen gekochte producten, dan verschijnt de rij daar niet. Zie Productwidgets.
Winactie met adressen
Section titled “Winactie met adressen”Popup · Rad van fortuin (onder Meer vormen), Na een paar seconden (15), Alleen desktop. Vul de prijzen met echte kortingscodes en laat de kansen optellen tot 100%. Voor een prijs met beperkte voorraad kies je Elk een eigen code (lijst): elke code gaat dan maar één keer weg.
Bezoekers die weggaan nog één kans geven
Section titled “Bezoekers die weggaan nog één kans geven”Popup · Modal, doel Doorklikken naar product of pagina, Bij verlaten,
Alleen desktop. Zet onder Geavanceerd Gebruik de winkelmand op Er zit iets in.
Bied iets concreets, zoals gratis verzending, of een knop naar de chat met chat: als link.
Een knop die de keuzehulp opent
Section titled “Een knop die de keuzehulp opent”Staat de keuzehulp aan, maak dan een Slide-in met de kop “Welk product past bij jou?” en doel Doorklikken naar product of pagina. Kies onder Of open iets op de pagina zelf: de keuzehulp. Een klik sluit het element en opent de keuzehulp op dezelfde pagina.
Alleen voor je vaste klanten
Section titled “Alleen voor je vaste klanten”Maak eerst in Segmenten een segment, bijvoorbeeld “Vaste klanten” (meer dan drie bestellingen). Maak dan een Slide-in met “Nieuw: de herfstcollectie, eerst voor jou”. Kies bij Voor wie Een segment en daarna “Vaste klanten”. Wil je juist iedereen behalve dat segment, gebruik dan onder Geavanceerd Segment · is niet. Of begin daar met Niet voor bezoekers met een slechte ervaring, zodat wie net een klacht had geen actie in zijn gezicht krijgt.