Online Shop: Testen met het livevoorbeeld in de winkelbouwer

Met het livevoorbeeld (Live Preview) in de winkelbouwer (Store Builder) test je je online shop met echte productgegevens voordat je die publiceert. Je kunt producten bekijken, varianten kiezen, producten aan je winkelwagen toevoegen, aantallen aanpassen en door ondersteunde winkelpagina’s navigeren. Dat doe je allemaal rechtstreeks in de bouwer.

Wil je weer voorbeeldproducten gebruiken? Schakel het livevoorbeeld dan uit. In dit artikel lees je hoe het livevoorbeeld werkt, wat je ermee kunt testen en hoe het zich op verschillende winkelpagina’s gedraagt.

Wat is het livevoorbeeld in de winkelbouwer?

Met het livevoorbeeld gebruik je echte productgegevens terwijl je je online shop ontwerpt en controleert in de winkelbouwer.

Als het livevoorbeeld aanstaat, tonen ondersteunde winkelpagina’s en productelementen echte producten in plaats van voorbeeldproducten. Je kunt dan ondersteunde productacties, navigatie en winkelwagenacties testen zonder de bouwer te verlaten.

Schakel het livevoorbeeld uit als je weer voorbeeldproducten wilt gebruiken.

Voordelen van het livevoorbeeld

Met het livevoorbeeld krijg je vóór publicatie een realistischer beeld van hoe je online shop werkt.

Echte productgegevens: bekijk je online shop met producten uit je account.
Interactief producten testen: bekijk producten, kies varianten en test ondersteunde acties om producten aan de winkelwagen toe te voegen.
Je winkelwagen testen: voeg producten toe, pas aantallen aan en verwijder artikelen.
Meerdere pagina’s controleren: neem de producten uit je voorbeeldwinkelwagen mee naar de winkelwagen, de checkout en de bedankpagina.
Wisselen tijdens het ontwerpen: schakel tussen echte producten en voorbeeldproducten.

Voorwaarden en beperkingen

Hoe het livevoorbeeld werkt, hangt af van de producten in je account en de winkelpagina die je bewerkt.

Staan er producten in je account? Dan staat het livevoorbeeld standaard aan.
Staan er geen producten in je account? Dan staat het livevoorbeeld standaard uit en zie je voorbeeldproducten.
Aangepaste productdetailpagina’s hebben geen schakelaar voor het livevoorbeeld en blijven voorbeeldproducten gebruiken.
De checkout in het livevoorbeeld is alleen bedoeld als voorbeeldweergave.
Realtime verzendtarieven, belastingen, meerdere betaalmethoden en werkende checkoutvelden worden in het huidige livevoorbeeld niet ondersteund.

Let op: deze beperkingen gelden alleen voor het livevoorbeeld in de winkelbouwer. Ze zeggen niets over de werking van de checkout in je gepubliceerde online shop.

Zo gebruik je het livevoorbeeld

Met de schakelaar voor het livevoorbeeld wissel je tussen echte producten en voorbeeldproducten terwijl je je online shop controleert.

Ga in je account naar Sites.
Kies Winkels (Stores).
Open de online shop die je wilt bewerken.
Open de winkelpagina die je wilt controleren.
Zoek de schakelaar voor het livevoorbeeld in de winkelbouwer.
Zet het livevoorbeeld aan om de beschikbare echte productgegevens te gebruiken.
Test de ondersteunde producten, varianten, navigatie en winkelwagenacties.
Zet het livevoorbeeld uit om weer voorbeeldproducten te gebruiken.

Producten en acties in je online shop testen

Met het livevoorbeeld test je ondersteunde acties op de verschillende pagina’s van je online shop. Je bekijkt dus niet alleen losse pagina’s met statische productgegevens.

Productoverzicht en productdetailpagina

Gebruik het productoverzicht (Product List Page, PLP) en de productdetailpagina (Product Details Page, PDP) om te controleren hoe echte producten zich in de bouwer gedragen.

Als het livevoorbeeld aanstaat, kun je:

Vanuit het productoverzicht naar een product gaan.
Echte productgegevens bekijken op de productdetailpagina.
Beschikbare productvarianten selecteren.
Ondersteunde acties voor Toevoegen aan winkelwagen (Add to Cart) gebruiken.
Door ondersteunde winkelpagina’s navigeren.

Open je de standaardproductdetailpagina rechtstreeks in de bouwer? Dan toont Voluit Suite één willekeurig echt product uit je account.

Let op: aangepaste productdetailpagina’s blijven voorbeeldproducten gebruiken en hebben geen schakelaar voor het livevoorbeeld.

Productwidgets

Productwidgets blijven hun ingestelde acties gebruiken terwijl je je online shop bekijkt in het livevoorbeeld.

De volgende widgets worden ondersteund:

Uitgelicht product (Featured Product)
Uitgelichte producten (Featured Products)
Aanvullend aanbod (Upsell)

Of een widget voorbeeldproducten of echte productgegevens toont, hangt af van de stand van het livevoorbeeld en het product dat aan de widget is toegewezen.

Winkelwagen, checkout en bedankpagina

De voorbeeldwinkelwagen neemt ondersteunde productgegevens mee naar de volgende pagina’s van je online shop. Zo kun je meerdere pagina’s met realistische inhoud controleren.

Als het livevoorbeeld aanstaat, kun je:

Producten aan de winkelwagen toevoegen.
Aantallen aanpassen.
Artikelen verwijderen.
Producten op de winkelwagenpagina (Cart) bekijken.
De inhoud van je voorbeeldwinkelwagen meenemen naar de checkout en de bedankpagina (Thank You).

Is je voorbeeldwinkelwagen leeg? Dan tonen de checkout en de bedankpagina nog steeds één of twee producten uit je account, zodat je het ontwerp kunt controleren.

De checkout in de bouwer blijft alleen een voorbeeldweergave. Realtime verzendtarieven, belastingen, meerdere betaalmethoden en werkende checkoutvelden zijn niet beschikbaar in het huidige livevoorbeeld.

Secties selecteren en acties testen in de bouwer

De winkelbouwer maakt onderscheid tussen een sectie selecteren om die te bewerken en acties uitvoeren met elementen binnen die sectie.

Met de eerste klik selecteer je een sectie om die te bewerken.

Zodra de sectie is geselecteerd, kun je ondersteunde acties uitvoeren met de elementen erin, zoals:

Naar een product gaan.
Een doorverwijzing volgen.
Een product aan de winkelwagen toevoegen.

Zo kun je je online shop bewerken én ondersteunde klantacties testen, rechtstreeks in de bouwer.

Veelgestelde vragen

V: Wat gebeurt er als ik het livevoorbeeld aanzet?

Antwoord: ondersteunde winkelpagina’s en productelementen gebruiken de beschikbare echte productgegevens in plaats van voorbeeldproducten.

V: Staat het livevoorbeeld automatisch aan?

Antwoord: ja, als er producten in je account staan. Zijn er geen producten? Dan staat het livevoorbeeld standaard uit en zie je voorbeeldproducten.

V: Kan ik terugschakelen naar voorbeeldproducten?

Antwoord: ja. Je kunt het livevoorbeeld op elk moment uitzetten.

V: Werkt het livevoorbeeld met aangepaste productdetailpagina’s?

Antwoord: nee. Aangepaste productdetailpagina’s blijven voorbeeldproducten gebruiken en hebben geen schakelaar voor het livevoorbeeld.

V: Wat gebeurt er als ik de standaardproductdetailpagina rechtstreeks open?

Antwoord: als het livevoorbeeld aanstaat, toont de bouwer één willekeurig echt product uit je account.

V: Wat gebeurt er als mijn voorbeeldwinkelwagen leeg is?

Antwoord: de checkout en de bedankpagina kunnen nog steeds één of twee producten uit je account tonen, zodat je het ontwerp van die pagina’s kunt controleren.

V: Kan ik echt afrekenen in het livevoorbeeld?

Antwoord: nee. De checkout in het livevoorbeeld is bedoeld om te controleren hoe je online shop werkt en eruitziet. Werkende checkoutvelden, realtime verzendtarieven, belastingen en meerdere betaalmethoden worden in het huidige livevoorbeeld niet ondersteund.