Install an embedded quiz on any page of your Shopify store to guide customers to the right products. Choose from two installation methods depending on your theme version.
In this article, you will learn about;
Installing the widget on a theme
Navigate to Quizzes > Quiz List, click the 3 dots next to an existing quiz, and then Install.
Follow the instructions to install the embedded quiz using either of the two methods below.
Method 1: Add a quiz within a page section
💡 This method is only supported by Shopify 2.0 themes. Use Method 2 for stores on older themes.
Click the copy button next to the Quiz ID field.
In Shopify, go to Online Store > Theme > Customize.
Navigate to Pages from the top menu and choose which page template to edit.
To create a new template, scroll to the bottom of the Pages list and click Create template.
Give your template a unique name.
Select which existing template to base it on and click Create template.
Make sure the Okendo app embed is switched on.
Click Apps > Add Block and select Okendo's Quiz Widget.
Insert the Quiz ID you copied from the Okendo app.
The quiz now displays in the Theme Customizer. Click Save to finalize your changes.
💡 To display a quiz at the full width of a page, click on the Apps section and de-select Make section margins the same as theme.
Method 2: Embed quiz snippet in theme
Click the copy button next to the Embed Snippet field.
Follow the steps in Method 1 to open the Theme Customizer, but add a Custom Liquid section to the page instead of a Quiz Widget block. Go to Online Store > Theme > Customize.
Choose a page template to edit.
Click Add section and select Custom Liquid.
Paste the copied code from Okendo into the Custom Liquid section.
The quiz now displays in the Theme Customizer. Click Save to finalize your changes.
💡 To display a quiz in a modal triggered by a button click, refer to the installation instructions in this article.
Assigning a quiz to a page
Once a quiz has been added to a page template, it displays on any store page using that template. To create a new store page:
From the Shopify admin, go to Online Store > Pages.
Click Add page.
Enter a title and content for the page.
In the bottom right corner, select the theme template you want to use for the quiz page.
In the Visibility section, choose when the page should be published.
Click Save.
Widget display options
The following options can be configured in the Okendo admin before copying your embed snippet, or in the Shopify theme editor if using the Quiz ID method.
Full Screen Mode: Displays the embedded quiz at full screen size, covering the whole page. Customers are taken to the homepage when closing the quiz.
Header Offset: Offsets the quiz position by the height of your sticky header (if any) to prevent the header from overlapping the top of the quiz.
Installing quizzes on headless instances
For headless implementations, refer to the technical documentation.