Een quiz hoort aan te voelen als onderdeel van je webshop, niet als iets wat er later aan is vastgeplakt. De uitstraling komt uit een thema: je logo, lettertypen, kleuren en knopstijl op één plek. Je kunt één thema voor al je quizzen gebruiken of een quiz een eigen thema geven.
Een thema bewerken
- Ga in de zijbalk naar Quizzes en klik op Edit bij je quiz.
- Klik op Design quiz op het tabblad Design bovenin het linkerpaneel, naast Content.
- Klik onder Themes op een thema om het voor deze quiz te gebruiken. Klik op Edit bij het thema om het aan te passen.
- Loop de onderdelen hieronder door. De preview werkt zich direct bij.
- Klik bovenin het paneel op Themes om terug te gaan naar de lijst.
Wat je kunt aanpassen
| Onderdeel | Wat erin zit |
|---|---|
| Brand identity | Je logo (Upload logo of Change logo), en de Body font en Headings font. Kies een lettertype uit de lijst of gebruik een eigen lettertype. |
| Global colors | Page background, Primary text en de Progress bar. |
| Buttons & inputs | De Background, Text color en Size van de primaire knoppen. |
| Page styles | Details per pagina: de titelgrootte op de Start page; titelgrootte, tekstgrootte en kleuren van antwoorden bij Questions; achtergrond- en tekstkleur op de Pre-result page; kaartachtergrond en het label Best match op de Result page. |
| Custom code | Helemaal onderaan: je eigen CSS en HTML-templates voor de startpagina, de vragen, het laadscherm, de pagina voor het resultaat en de productcheckpagina. |
Wil je een ontwerp dat verder gaat dan deze instellingen, zie dan een quiz vormgeven met eigen code.
Animaties
Met Animations, in hetzelfde tabblad Design, bepaal je hoe de quiz van de ene stap naar de volgende gaat. Kies uit None, Fade, Smooth, Cascade, Flow, Scroll, Stacked en Custom, waarbij de eigen code van je thema elke wissel animeert. Mobiel en desktop kunnen elk een eigen animatie hebben. Een knop zoals Apply Smooth to both houdt ze gelijk. Klik op Open live mobile preview (of desktop) om het uit te proberen. Animaties horen bij de quiz, niet bij het thema.
Thema's toevoegen, kopiëren en delen
- Klik op + naast Themes om een nieuw thema toe te voegen en geef het een naam.
- Gebruik het menu op een themakaart om het thema te kopiëren met Duplicate of te verwijderen.
- Meerdere quizzen kunnen hetzelfde thema gebruiken. Pas je het aan, dan verandert het in al die quizzen, ook in quizzen die al live staan, zonder opnieuw te publiceren. Wil je iets uitproberen voor één quiz, kopieer het thema dan eerst.
Voordat je publiceert
| Onderdeel | Wat je controleert |
|---|---|
| Kleuren | Knoppen, gekozen antwoorden en de voortgangsbalk passen bij je merk, en tekst blijft leesbaar op de achtergrond. |
| Typografie | Vragen en antwoorden zijn makkelijk te lezen op een telefoon. |
| Afbeeldingen | Bij afbeeldingen van antwoorden en producten valt niets belangrijks weg. |
| Weergave | De quiz voelt niet krap aan in de weergave die je hebt gekozen, zoals een pop-up of zijpaneel. |
Wijzigingen in een thema worden direct opgeslagen. Op Shopify beginnen quizzen die je met AI genereert met de kleuren en het logo van je webshop. Zie een quiz genereren met AI.