A quiz can be launched in a modal on a button click rather than being embedded on a 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 on an existing page 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.
Show the installation instructions and then expand the Display Quiz In A Modal section.
Copy the the snippet and add it to a Custom Liquid section in your store’s theme.
By default the button will be left aligned but can be adjusted with the following CSS:
Center aligned
.okeQuizModalButton { justify-content: center; }Right aligned
.okeQuizModalButton { justify-content: flex-end; }
The button text will contain the name of the quiz but can adjusted at the end of the snippet before “</a>."
Other styling settings can be controlled using the Button theme settings or using 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 will display at full screen size, covering the whole page and close button will direct back to the page.
