Okendo Quizzes features an advanced design editor to help you style quizzes to match your brand and store. Use the preview window to visualize styling changes for each quiz page.
In this article, you will learn about;
Apply styling settings across a quiz
Navigate to Quizzes > Quiz List, click the 3-dot menu next to an existing quiz, and select Edit. If you are creating a new quiz, click + New Quiz at the top of the page.
Click the Configure tab. You can edit General styling settings for the quiz, the Intro Page, Questions, and the Recommendations Page.
Each section lets you customize specific parts of the quiz and its elements.
Section | Sub-section | Details |
General | Overall |
|
Progress bar | Add a progress bar to show shoppers how far they are into the quiz. | |
Primary text | Adjust styling for the headline text on the intro page and the main text for each question. | |
Secondary text | Adjust styling for the subtitle text on the intro page and question sub-text. | |
Buttons | Adjust styling for the Next and Submit buttons including text and color. | |
Intro | Header image | Upload a header image for the quiz intro page. Choose the layout:
|
Title & subtitle | Adjust the text content shown on the intro page. | |
Questions | Option styling | Adjust styling for question options across all questions in the quiz, including colors, borders, and fonts. |
Text fields | Adjust settings for text entry fields such as:
| |
Recommendations page | Header image | Upload a header image for the quiz recommendations page. Choose the layout:
|
Product layout | Switch the product layout between grid and list. Use the preview to decide which works best for your quiz. | |
Display variants in | Choose between displaying the variant selector as a dropdown or as separate buttons (option list). | |
Show product ratings | Display the star rating for products if Okendo Reviews is set up. Styling is pulled from the Reviews widget's global settings. | |
Show products unavailable for sale | Choose whether to show or hide unavailable products such as items out of stock. | |
Show add all to cart button | Choose whether to show or hide the Add All to Cart button. | |
Primary color | Adjusts the title, product name, and price. | |
Secondary color | Adjusts the subtitle and product description. | |
Call to actions | Adjust the CTA buttons — see Customizing recommendation page CTAs for more details. | |
Primary buttons | Adjust styling for the Add All to Cart and Take Quiz Again buttons — colors, fonts, and borders. | |
Secondary buttons | Adjust styling for the Add to Cart button — colors, fonts, and borders. | |
Title text | Adjust styling for the headline text on the recommendations page — colors and fonts. | |
Subtitle text | Adjust styling for the subtitle text on the recommendations page — colors and fonts. |
Preview styling settings
Preview styling changes in the window next to the styling form. To reach a specific section of the quiz, navigate through it by answering the questions in the preview.
To reset the preview back to the intro page, click the X button in the top right of the window.
The preview can be shrunk or expanded using the toggle in the top right of the styling form to see how the quiz scales depending on the available space.
💡 You can instantly jump to a preview of the recommendations page by switching to the Test tab and back to the Configure tab.
Apply styling settings to individual questions
Single-select and multi-select questions have additional styling settings to support images. Navigate to the Build tab and edit or create a Single-select or Multi-select question.
Scroll to the Option Layout section. The layout dropdown has four options:
Tags: Standard option layout with image thumbnails and option text to the right.
Grid: Images with option text directly below. Three image size modes are available:
Scale — automatically scales the image to match its original ratio. Set the minimum image height and maximum number of columns.
Cover — the image fills the option dimensions while keeping its aspect ratio. Set the image height and maximum number of columns.
Contain — the image is resized to fit the option dimensions while keeping its aspect ratio. Set the image height and maximum number of columns.
List: Similar to tags with a configurable number of columns.
Circles: Images with a circular crop and option text below.
Select an option layout and adjust specific settings as needed. Click Apply to view changes in the preview window.
Click Save at the top of the page to apply the changes to the quiz.
💡 Upload images in the same ratio for each question option. Square (1:1) images work best for List, Tags, and Circles layouts. Either 1:1 or landscape images work best for the Grid layout.
Implement custom CSS
For further styling adjustments that can't be made within the admin, you can use custom CSS. Common uses include:
Adjusting button dimensions
Adjusting product image dimensions and layout on the recommendations page
Adjusting the font of specific text elements — for example, headline text on the intro page separately from question text
Hiding elements such as buttons or text
To add custom CSS, first locate the appropriate selector in your browser and make the required modifications, then copy the CSS into the Okendo admin:
Navigate to Settings > Custom CSS.
Enter your custom CSS in the text field and click Save.
Navigate back to Quizzes from the sidebar and view your changes in the quiz's preview window. Confirm the quiz displays as expected and make further adjustments as needed.