Deze gids loopt door de customizer zoals je shopper hem ervaart. Je ziet elk scherm, in volgorde, van het openen van het product tot aankomen in de winkelwagen met een afgemaakt ontwerp. Hij is bedoeld voor merchants die de kant van de koper willen begrijpen voordat ze hun eigen producten instellen.
Wat je klant ziet
De customizer heeft twee gedeelten. Aan de ene kant staat een live preview van het product. Aan de andere kant staat een paneel met personalisatieopties.
De productnaam staat bovenaan het bedieningspaneel, zodat de shopper altijd weet wat hij personaliseert.
De indeling past zich aan het scherm aan. Op een desktop staan de preview en de bediening naast elkaar. Op een telefoon staan ze onder elkaar, met de preview bovenaan en de bediening eronder.
De customizer kan op twee plekken verschijnen. Hij kan direct op de productpagina staan, of openen als volledige editor. Welke je shopper ziet, hangt af van hoe je hem hebt geplaatst. Zie Composerie zichtbaar maken in je winkel voor het verschil.
De flow van personaliseren tot kopen
Dit is het volledige pad dat een shopper aflegt, van de productpagina naar de winkelwagen.
Open de customizer vanaf de productpagina
De shopper begint op je productpagina en start met aanpassen. Het product laadt met je ontwerp en de bijbehorende personalisatievelden klaar voor gebruik.
Vul de personalisatievelden in
De shopper vult zijn gegevens in de velden die jij hebt ingesteld: tekst, een foto, een kleur, een lettertype, enzovoort. Elk veld heeft zijn eigen bediening. Meer over de veldtypen lees je in velden in het personalisatieformulier.
Zie de live preview meebewegen
Elke wijziging van de shopper werkt de preview meteen bij. Hij kan zijn tekst lezen, zijn foto controleren en zijn kleuren zien voordat hij koopt. Er is geen aparte stap om te verversen. Lees meer in de live preview.
Kies een variant, optie of add-on
Heeft het product varianten of opties (zoals een maat of een lijst), dan kiest de shopper die hier. Bied je add-ons aan, dan kiest hij die ook. Heeft de kop een naam nodig en heb je er geen ingesteld, dan staat er “Kies je optie”.
Druk op In winkelwagen
Onderaan het bedieningspaneel blijft een balk vastgepind. Daarin staan een pijl Terug en de hoofdknop. In een gewone Shopify-winkel staat op die knop In winkelwagen. Drukt de shopper erop, dan slaat Composerie zijn ontwerp op en stuurt hem naar de winkelwagen.
Wat er gebeurt na In winkelwagen
Drukt de shopper op In winkelwagen, dan gebeurt er achter de schermen een aantal dingen.
Composerie slaat het ontwerp van de klant op en wist het concept dat het voor dat product bijhield. Het concept is de automatisch opgeslagen kopie waarmee een shopper later kan terugkomen zonder zijn werk te verliezen. Zodra het ontwerp echt is opgeslagen, is dat concept niet meer nodig.
Composerie maakt ook een kleine previewafbeelding van 200 bij 200 pixels van het ontwerp en hangt die aan de winkelwagenregel. Die miniatuur reist mee met de bestelling, zodat jij en je shopper kunnen zien wat is aangepast.
Daarna stuurt Composerie de regel naar Shopify en verwijst de browser door naar de winkelwagen. De shopper komt terecht in je gewone Shopify-winkelwagen, met het gepersonaliseerde item al toegevoegd. Vanaf daar is de checkout de gebruikelijke Shopify-checkout.
Ontbreekt er iets, dan gaat de shopper niet door naar de winkelwagen. Is een verplicht veld leeg, dan blokkeert de customizer het toevoegen en toont hij een melding als “Vul in: Naam”, met de naam van het veld dat aandacht nodig heeft. De shopper blijft in de customizer, vult het veld in en probeert het opnieuw.
Wat als een verplicht veld leeg blijft?
De customizer blokkeert het toevoegen en toont een melding met de naam van het veld, zoals Vul in: Naam. De shopper blijft in de customizer tot hij het veld heeft ingevuld.
Verlaat de klant Composerie om af te rekenen?
Ja. Na In winkelwagen komt de klant in de standaard Shopify-winkelwagen en rekent daarna gewoon af via Shopify.
Wordt de aangepaste preview bij de bestelling opgeslagen?
Ja. Composerie maakt een kleine previewafbeelding en hangt die aan de winkelwagenregel, zodat het ontwerp bij de bestelling zichtbaar is.
Volgende stap
Voor wat er met een half afgemaakt ontwerp gebeurt tussen bezoeken, lees je een ontwerp opslaan en delen.
Lees veld voor veld hoe het bedieningspaneel werkt in velden in het personalisatieformulier.