This article will explain how to install embedded Quizzes via the Okendo app. Follow the installation steps below to add quizzes to a new or existing page.
In this article, you'll about:
Installing the widget on a theme
Navigate to Quizzes > Quiz List, click the 3 dots next to an existing quiz, and then Install.
2. Follow the instructions to install the embedded quiz using either of the two methods.
Method 1: Add a Quiz within a Page Section
Note: This method is only supported by Shopify 2.0 themes. Utilize Method 2 for stores using older themes.
Click on the copy button next to the Quiz ID field.
Go to the Shopify backend, click on Online Store > Theme > Customize.
Navigate to Pages from the top menu and choose which page template to edit.
To create a template, scroll to the bottom of the Pages list and click Create template.
Give your template a unique name.
Select which existing template you want to base your new template on and click Create template.
Make sure the Okendo app embed is switched on.
Click on Apps > Add Block and select Okendo's Quiz Widget.
Insert the Quiz ID that was copied earlier from the Okendo app.
The quiz will now be displayed in the Theme Customizer. Click Save to finalize changes.
Note: Quizzes can be configured to take up the full width of a page. Click on the Apps section and de-select Make section margins the same as theme to do so.
Method 2: Embed Quiz Snippet in Theme
Click on the copy button next to the Embed Snippet field.
Follow the steps in Method 1 to edit a Theme but add a Custom Liquid section to a page. Go to the Shopify backend, click on Online Store > Theme > Customize:
Choose a page template to edit.
Click Add section and select Custom Liquid.
Insert the copied code from Okendo into the Custom Liquid section.
The quiz will now be displayed in the Theme Customizer. Click Save to finalize changes.
Assigning a quiz to a page
Once a quiz has been added to a page template, it will display on a store page utilizing the template. To create a new store page follow the below steps:
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 that will be used for the Quiz page.
In the Visibility section, select when the page should be published.
Click Save.
Widget display options
The below options can be checked in the Okendo admin before copying embed snippet or in the Shopify theme editor if using the Quiz ID to add a quiz to a page section.
Full Screen Mode: Display the embedded quiz at full screen size, covering the whole page. Customers will be taken to the homepage when closing the quiz.
Header Offset: Offset the positioning of the quiz by the height of your sticky header (if any) to prevent the header from overlapping with the top of the quiz.
