Launch a quiz in a modal overlay triggered by a button click, so shoppers can take the quiz without leaving the current page.
Use cases include:
Allow visitors to take a quiz without leaving the current page and continue browsing afterwards.
Increase conversions on a collection page with a contextually relevant quiz without disrupting its layout.
Draw focus to the quiz and maximize completion rates by minimizing distractions.
Follow these steps to install a quiz so it launches in a modal:
Click the 3 dots next to a quiz and then Install.
View the installation instructions and expand the Display Quiz In A Modal section.
Copy the snippet and add it to a Custom Liquid section in your store's theme.
By default the button is left-aligned, but you can adjust this with the following CSS:
Center aligned
.okeQuizModalButton { justify-content: center; }Right aligned
.okeQuizModalButton { justify-content: flex-end; }The button text defaults to the quiz name but can be changed at the end of the snippet before </a>.
Other styling settings can be controlled using the Button theme settings or custom CSS.
Full screen mode
Check the Full Screen Mode box in the Okendo admin and copy the button snippet into the Shopify theme editor. The quiz displays at full screen size, covering the whole page, and the close button directs back to the current page.
