De standaard resultaatpagina toont je resultaatkaarten naast elkaar. Voor de meeste quizzen werkt dat prima. Soms wil je iets dat er anders uitziet en anders verkoopt: een huidverzorgingsroutine in stappen, een starterspakket met één prijs, of een pagina die elk huidtype in eigen woorden aanspreekt. Met een eigen resultaatpagina ontwerp je precies dat, met de producten en prijzen van de klant live ingevuld.
Eigen resultaatpagina's zijn een bètafunctie. Zet eerst de bètafuncties aan.
Een eigen layout aanzetten
- Ga naar Quizzes, klik bij je quiz op Edit en open Design quiz.
- Klik op het tabblad Content op Result page.
- Scrol in Result page settings naar Layout en zet Custom layout aan.
- Klik op Create custom layout. Tot je dat doet, blijven klanten de standaard resultaatpagina zien.
Ontwerpen met Barry
De editor opent schermvullend. Links zie je een live preview van de pagina. Rechts staat Barry klaar om hem samen met je te bouwen. Beschrijf in gewone woorden wat je wilt, bijvoorbeeld "Toon de producten als een genummerde ochtendroutine met onderaan een knop om alles in de winkelwagen te leggen". Barry schrijft de pagina en de preview wordt bijgewerkt. Blijf om aanpassingen vragen tot het goed voelt: andere kleuren, een andere volgorde of een regel die alleen bij een droge huid verschijnt.
Met een paar hulpmiddelen controleer je het resultaat:
- Preview answers: kies bovenaan per vraag een antwoord om de pagina te zien die een echte klant met die antwoorden zou krijgen. Antwoorden met "no products" zouden de pagina leeg laten.
- Met de knoppen desktop en mobile rechtsboven wissel je de grootte van de preview. De meeste klanten maken quizzen af op hun telefoon, dus controleer beide.
- Wijzigingen worden automatisch opgeslagen. Sluit de editor als je klaar bent en publiceer je quiz om de nieuwe pagina live te zetten.
Of pas de code zelf aan
Schrijven jij of je developer het liever met de hand, klik dan op Show code. Je krijgt twee velden, HTML en CSS, en de preview wordt bijgewerkt terwijl je typt. Plaatshouders tussen dubbele accolades, zoals {{name}} en {{price}}, worden ingevuld met de producten van elke klant. De CSS geldt alleen voor de resultaatpagina en raakt de rest van je webshop dus niet. Klik op Ask Barry om terug te gaan naar de chat.
Een korting toevoegen
Onder Layout kun je klanten belonen die hun aanbeveling volgen:
- Whole-kit discount: geldt als de klant alle aanbevolen producten koopt.
- Single-product discount: geldt voor elk aanbevolen product dat los wordt gekocht.
- Free gift (gratis cadeau): kies een product uit je catalogus en bepaal of het bij With the whole kit (de hele set) of bij With any recommended product (elk aanbevolen product) hoort. Het gaat met de bestelling mee in de winkelwagen en is gratis bij het afrekenen.
Kies per korting Percentage of Fixed amount en typ een Discount code, zoals ROUTINE15. Eén code dekt alle aanbiedingen. bluebarry maakt de code voor je aan in Shopify en past hem toe bij het afrekenen. De kortingen zijn niet te stapelen: een klant die de hele set koopt, krijgt de setkorting. Een procentuele setkorting gaat van de normale prijs af en komt niet bovenop een uitverkoopprijs: een afgeprijsd product kost zijn uitverkoopprijs of de setprijs, wat lager is. Je pagina kan de aanbieding, de setprijs en de besparing tonen, en die blijven kloppen als je de korting later wijzigt. Het cadeau toon je met {{#if gift}} en {{gift.name}}.
Op WooCommerce, CCV Shop en Magento hoef je geen code aan te maken. Legt de klant de aanbevolen producten in de winkelwagen, dan zet bluebarry er een eenmalige kortingsbon op die alleen voor die producten geldt. Een procentuele setkorting komt daar bovenop de uitverkoopprijs van een product. Voor het gratis cadeau heb je een Shopify-webshop nodig.
Op Magento heb je hiervoor versie 2.1.0 of nieuwer van de bluebarry-module nodig. Een Magento-winkelwagen neemt één kortingscode, dus heeft een klant zelf al een code ingevuld, dan blijft die code staan.
Een eigen pagina tussen vragen toevoegen
Op dezelfde manier bouw je een pagina die tussen twee vragen verschijnt, bijvoorbeeld een tussenstand die al de producten toont die bij de antwoorden tot nu toe passen.
- Open in Design quiz links Questions en klik op +. Kies op het tabblad Page de template Custom HTML, geef een Internal name op en klik op Add.
- Klik rechts in de pagina-instellingen op Create with Barry. Dezelfde editor opent, met Barry, Preview answers en Show code.
- Sluit de editor als je klaar bent en publiceer je quiz.
De pagina gebruikt dezelfde plaatshouders als je resultaatpagina, ingevuld met de producten en antwoorden die de klant op dat moment heeft. Hij heeft een eigen knop om verder te gaan naar de volgende vraag, en Barry voegt die altijd toe. Schrijf je de code zelf, geef een knop dan het attribuut data-bb-next.
Goed om te weten
- Knoppen voor in winkelwagen op je pagina leggen producten direct in de winkelwagen op Shopify, WooCommerce, CCV Shop en Magento. Op andere platforms openen ze de productpagina.
- Het quizcanvas in Studio blijft de standaard resultaatkaarten tonen. Open Edit custom layout om je eigen pagina te zien.
- Je resultaatkaarten bepalen nog steeds welke producten verschijnen. Wil je andere producten, pas dan de kaarten en hun regels aan. Zie Resultaatkaarten voor je quiz bouwen.
- Wil je terug naar de standaard resultaatpagina, zet dan Custom layout uit en publiceer. Je eigen pagina blijft bewaard voor als je hem terug wilt.