Okendo Quizzes features an advanced design editor to help style quizzes to match your brand and store. use the preview window to visualize styling changes for each quiz page.
In this article, you'll learn how to:
Apply styling settings across a quiz
Navigate to Quizzes > Quiz List, click on the 3 dots next to an existing quiz and then Edit. If you are creating a new quiz, click + New Quiz at the top of the page.
Click on the Configure tab. You will be able to edit General styling settings for the quiz, the Intro Page, Questions and the Recommendations Page.
Each of the sections allows you to customize specific parts of the quiz and its elements.
Section | Sub-section | Details |
General | Overall |
|
| Progress Bar | Add a progress bar to a quiz to show quiz takers how far they are into a quiz. |
| Primary Text | Adjust styling settings for the:
|
| Secondary Text | Adjust styling settings for the:
|
| Buttons | Adjust styling settings 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 settings for the Question options that will apply to all questions in a quiz including colors, borders and fonts. |
| Text Fields | Adjust settings for text entry fields such as the:
|
Recommendations Page | Header Image | Upload a header image for the quiz Recommendations Page.
Choose the layout:
|
| Product Layout | The product layout on the recommendations page can be switched between Grid and List. View the preview to understand which layout is best suited 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 | The primary color adjusts the Title, Product Name and Price. |
| Secondary Color | The secondary color adjusts the Subtitle and Product Description. |
| Call To Actions | Adjust the CTA buttons - refer to more details here. |
| Primary Buttons | Adjust styling settings for the Add All to Cart and Take Quiz Again buttons such as colors, fonts and borders. |
| Secondary Buttons | Adjust styling settings for the Add to Cart button such as colors, fonts and borders. |
| Title Text | Adjust styling settings for the Headline text on the Recommendations Page such as colors and fonts. |
| Subtitle Text | Adjust styling settings for the Subtitle text on the Recommendations Page such as colors and fonts. |
Preview styling settings
Styling changes can be previewed using the window next to the styling form. To reach a specific section of the quiz, navigate 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 view how the quiz will scale depending on the area available.
Note: You can instantly jump to a preview of the recommendations page by switching to the Test tab and switching back to the Configure tab.
Apply styling settings to individual questions
Single-select and Multi-select questions have additional styling settings that can be applied 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 drop-down will have four, different 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 can be chosen from.
Scale - Automatically scale the image and question option to match the original image's ratio. Set the minimum image height and maximum number of columns to manage the layout.
Cover - The image keeps its aspect ratios and fills the dimensions of the image option. Set the image height and maximum number of columns to manage the layout.
Contain - The image keeps its aspect ratio but is resized to fit the dimensions of the question option. Set the image height and maximum number of columns to manage the layout.
List: Similar layout to tags with a configurable number of columns.
Circles: Images feature a circular crop with option text below.
3. Select an option layout and adjust specific settings for it as needed. Click Apply to view changes in the preview window.
4. Click Save at the top of the page to apply the changes to the quiz.
Note: Images are recommended to be uploaded in the same ratio for each question option. Square (1:1) images are recommended for List, Tags and Circles layouts while either 1:1 or landscape images work best for the Grid layout.
Implement custom CSS
For further quiz styling adjustments that cannot currently be made within the admin, custom CSS can be used. Example usage of custom CSS to adjust styling include:
Adjusting the dimensions of buttons.
Adjusting the product image dimensions and layout of the recommendations pages.
Adjusting the font of specific text on a page e.g. headline text on the Intro page separately from the main text for each question.
Hiding elements such as buttons or text.
To add the custom CSS, locate the appropriate selector in your browser and make the required modifications.
Copy the CSS into the Okendo admin.
Click Settings at the bottom of the sidebar.
Click on Widgets and then Advanced.
Enter your Custom CSS in the text field and click Save.
Navigate back to Quizzes from the sidebar and view your changes within the quiz's preview window. Confirm the quiz displays as expected and make further adjustments as needed.