QuizpepHelp Center · Building a quiz
Styling your quiz
Theme matching, colours, buttons, layout, custom CSS and texts.
Match my theme
In Styles, Match my theme (on by default) uses your theme's fonts, button colours, button corners and heading font on your store. Nothing in your theme changes, and the quiz follows along if you switch themes. Colours you set yourself always win.
Colours
- Text and Background for the whole quiz.
- Colour palettes: a primary, secondary and tertiary colour, each with a button colour and a button text colour. Every button in the quiz picks one of these in its Styles. Primary is also used for highlights, like selected answers.
Buttons
- Next button: colour palette, size, style (solid, outline or text link) and full width.
- Back and Skip buttons: the same options.
- A question can have its own buttons in its Styles tab.
- The introduction, results sections and product cards each have their own button styles.
Page width and fonts
- Page width: standard (up to 760 pixels, or your theme block's width), wide (up to 1200) or full width, so pictures and backgrounds reach the edges of the page.
- Fonts: your theme's, or one of 14 Google Fonts for headings and for text and buttons. Google Fonts load from Google.
- Headings colour.
Shape, answers and fields
Corner roundness; answers one or two per row, or pills side by side (answers with pictures always show as tiles); and fields (text, email and dropdown boxes) outlined or filled and rounded.
Sections
The introduction and every results page section have a Style tab: height, background, spacing, width, alignment, heading size, show on computers or phones, and animation. See Designing the results page.
Layout
In Settings → Layout: a minimum height so the page doesn't jump between questions, and fade, slide or no animation between screens.
Custom CSS
Styles → Custom CSS applies only to the quiz. Useful classes: .pq-title, .pq-answer, .pq-button, .pq-product, .pq-section.
Words on buttons and screens
Settings → Storefront texts changes words like "Next", "Add to cart" and "Retake the quiz". Section texts, like a newsletter's button, are set in the section.