Embed the quiz in any store page
If you prefer, you can follow along with a video tutorial of the steps we show below.
To start embedding your quiz anywhere in your store, you need to copy the quiz key. You'll use this key inside the Theme Editor to insert the quiz.
Embedding the quiz as a block in your Theme Editor
Once you've copied the key, go to Theme Editor. You can choose which page you want to embed the quiz on from the drop down menu at the top of the page.
Scroll though the elements of the page and add the Lantern Quiz block on any section where you want to display the quiz as an embedded element.
After you add the app as a block, on the right-hand side menu, you'll need to paste the Quiz Key in the Quiz Sub-URL input box. Once you save, the quiz is visible immediately.
The automatically enabled Auto Height option ensures that each page adjusts its height depending on the content of that particular question to avoid scroll bars; however, you can still customize specific elements such as margins, width or set a specific height.
Creating a dedicated Quiz Page
Using the same method to embed the quiz as a block, you can also create a dedicated page for it. You can then customize this quiz page from the Theme Editor same as you would any other page in your store.
To start, go to Online Store -> Pages and create a dedicated quiz page that you can leave empty.
In this example, we're not only creating this page but adding it as an navigation menu element in the Header for easy access.
In order to do this, you need to go to Navigation-> Main Menu .
There you will need to Add a new element, give it a name, in our example we used Quiz Page, and include the URL link to the page we have previously created with the same name.
To make the Quiz Page a seamless, complete quiz page and have your customers always on your store while also taking them through the perfect quiz experience, we can use the Theme Editor and add elements to the page as you would to any other in the store.
It's important to make sure to hide the title of the page that by default, is at the top of any new one we create. In order to do so we can use the Theme Editor and Hide the page's title.
We can use the Theme Editor to add a few other sections that complement the quiz block, while keeping the focus point on it.
