Die normale Ergebnisseite zeigt deine Ergebniskarten nebeneinander. Für die meisten Quiz passt das. Manchmal willst du aber etwas, das anders aussieht und anders verkauft: eine Pflegeroutine in Schritten, ein Starterset zu einem Preis oder eine Seite, die jeden Hauttyp mit eigenen Worten anspricht. Mit einer eigenen Ergebnisseite gestaltest du genau das, gefüllt mit den Produkten und Preisen der jeweiligen Kundin.
Eigene Ergebnisseiten sind eine Beta-Funktion. Schalte zuerst die Beta-Funktionen ein.
Eigenes Layout einschalten
- Geh zu Quizzes, klick bei deinem Quiz auf Edit und öffne Design quiz.
- Klick im Tab Content auf Result page.
- Scroll in den Result page settings zu Layout und schalte Custom layout ein.
- Klick auf Create custom layout. Bis dahin sehen deine Kunden weiter die normale Ergebnisseite.
Mit Barry gestalten
Der Editor öffnet sich im Vollbild. Links siehst du eine Live-Vorschau der Seite, rechts wartet Barry. Beschreib in normalen Worten, was du willst, zum Beispiel „Zeig die Produkte als nummerierte Morgenroutine mit einem Button unten, der alles in den Warenkorb legt“. Barry baut die Seite und die Vorschau aktualisiert sich. Bitte so lange um Änderungen, bis es passt: andere Farben, eine andere Reihenfolge, ein Satz, der nur bei trockener Haut erscheint.
Diese Werkzeuge helfen dir beim Prüfen:
- Preview answers: Wähl oben für jede Frage eine Antwort und sieh dir die Seite an, die eine Kundin mit diesen Antworten bekäme. Antworten mit dem Zusatz „no products“ würden die Seite leer lassen.
- Mit den Buttons für Desktop und Mobil oben rechts wechselst du die Größe der Vorschau. Die meisten Kunden beenden ein Quiz auf dem Handy, prüf also beides.
- Änderungen werden automatisch gespeichert. Schließ den Editor, wenn du fertig bist, und veröffentliche dein Quiz, damit die neue Seite live geht.
Oder den Code selbst bearbeiten
Wenn du oder dein Entwickler lieber selbst schreibt, klick auf Show code. Du bekommst zwei Felder, HTML und CSS, und die Vorschau aktualisiert sich beim Tippen. Platzhalter in doppelten geschweiften Klammern wie {{name}} und {{price}} werden mit den Produkten der jeweiligen Kundin gefüllt. Das CSS gilt nur für die Ergebnisseite und ändert nichts am Rest deines Shops. Mit Ask Barry kommst du zurück zum Chat.
Rabatt hinzufügen
Unter Layout belohnst du Kunden, die ihrer Empfehlung folgen:
- Whole-kit discount (Rabatt fürs ganze Set): gilt, wenn die Kundin alle empfohlenen Produkte kauft.
- Single-product discount (Rabatt pro Produkt): gilt für jedes empfohlene Produkt, das einzeln gekauft wird.
- Free gift (Gratisgeschenk): wähl ein Produkt aus deinem Katalog und leg fest, ob es With the whole kit (mit dem ganzen Set) oder With any recommended product (mit jedem empfohlenen Produkt) dazukommt. Es landet mit der Bestellung im Warenkorb und ist an der Kasse gratis.
Wähl jeweils Percentage oder Fixed amount und gib einen Discount code ein, zum Beispiel ROUTINE15. Ein Code deckt alle Angebote ab. bluebarry legt ihn in Shopify für dich an und wendet ihn an der Kasse automatisch an. Die Rabatte lassen sich nicht kombinieren: Wer das ganze Set kauft, bekommt den Set-Rabatt. Ein prozentualer Set-Rabatt gilt auf den regulären Preis und kommt nicht zu einem Sale hinzu: Ein reduziertes Produkt kostet seinen Sale-Preis oder den Set-Preis, je nachdem, was günstiger ist. Deine Seite kann das Angebot, den Set-Preis und die Ersparnis zeigen, und die Zahlen stimmen auch, wenn du den Rabatt später änderst. Das Geschenk zeigst du mit {{#if gift}} und {{gift.name}}.
Bei WooCommerce, CCV Shop und Magento musst du keinen Code anlegen. Legt der Kunde die empfohlenen Produkte in den Warenkorb, fügt bluebarry einen einmaligen Gutschein hinzu, der nur für diese Produkte gilt. Ein prozentualer Set-Rabatt kommt dort zum Sale-Preis eines Produkts hinzu. Das Gratisgeschenk braucht einen Shopify-Shop.
Bei Magento brauchst du dafür Version 2.1.0 oder neuer des bluebarry-Moduls. Ein Magento-Warenkorb nimmt nur einen Gutscheincode an. Hat der Kunde selbst einen Code eingegeben, behält er diesen.
Eigene Seite zwischen Fragen einfügen
Genauso baust du eine Seite, die zwischen zwei Fragen erscheint, zum Beispiel einen Zwischenstand, der schon die Produkte zu den bisherigen Antworten zeigt.
- Öffne in Design quiz links Questions und klicke auf +. Wähl im Tab Page die Vorlage Custom HTML, gib einen Internal name ein und klick auf Add.
- Klick rechts in den Seiteneinstellungen auf Create with Barry. Es öffnet sich derselbe Editor, mit Barry, Preview answers und Show code.
- Schließ den Editor, wenn du fertig bist, und veröffentliche dein Quiz.
Die Seite nutzt dieselben Platzhalter wie deine Ergebnisseite, gefüllt mit den Produkten und Antworten, die die Kundin an dieser Stelle hat. Sie hat einen eigenen Weiter-Button, der zur nächsten Frage führt, und Barry fügt ihn immer ein. Wenn du den Code selbst schreibst, gib einem Button das Attribut data-bb-next.
Gut zu wissen
- In-den-Warenkorb-Buttons auf deiner Seite legen Produkte bei Shopify, WooCommerce, CCV Shop und Magento direkt in den Warenkorb. Auf anderen Plattformen öffnen sie die Produktseite.
- Die Quiz-Vorschau in Studio zeigt weiter die normalen Ergebniskarten. Öffne Edit custom layout, um deine eigene Seite zu sehen.
- Welche Produkte erscheinen, bestimmen weiterhin deine Ergebniskarten. Willst du andere Produkte, änderst du die Karten und ihre Regeln. Mehr dazu unter Quiz-Ergebniskarten erstellen.
- Zurück zur normalen Ergebnisseite kommst du, indem du Custom layout ausschaltest und veröffentlichst. Deine eigene Seite bleibt gespeichert, falls du sie wieder brauchst.