If you prefer, you can check out this information in video format.
Copy the quiz embed key
To start embedding your quiz anywhere in your store, you need to copy the quiz key. To do so, click the Copy Key under Option 4 on the Publish page. 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.
1. Embed it on the Homepage of your store
Once you select the Homepage from the drop-down menu at the top of the page, scroll through 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.
2. Embed it on a product page
From the top drown-down menu, you can choose the Products option. If you want to show the quiz on all product pages, you can select the Default product option, but if you only want to show it on dedicated product pages, you need a custom template that will be used by those products only.
If you don’t already have a dedicated template for it you need to create that first. To create a product template click on Create template and name your new template such as “Quiz Products”.
Now similarly to what you did for the homepage, you will 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.
For any new Product Template page, you can choose which products it is assigned to. To do this, you need to click on Change under Preview from the left-hand menu in the Theme Editor. This will open a Select Product menu on the right-hand side.
By default, All will be selected, but you can switch to Assigned and in order to assign specific products you will click on the Product links and be redirected to the Product list on your Shopify admin. Go on the product listings you want to switch to this template and set them to use this new template, then click Save to apply.
Once that is done you can visit the template page in the Theme editor and see how the newly edited product is now assigned to this template.
3. Embed it on a collection page
From the top drown-down menu, you can choose the Collections option. If you want to show the quiz on all product pages, you can select the Default product option, but if you only want to show it on dedicated product pages, you need a custom template that will be used by those products only.
If you don’t already have a dedicated template for it, you need to create one first. To create a collection page template, click on Create template and name your new template, such as “Quiz Collection”
Similar to what you did for the homepage and product page, you will add the app as a block on the right-hand menu. You'll need to paste the Quiz Key in the Quiz Sub-URL input box. Once you save, the quiz is visible immediately.
For any new Collection Template page, you can choose which collections it is assigned to. To do this, you need to click on Change under Preview from the left-hand menu in the Theme Editor. This will open a Select Collection menu on the right-hand side.
By default, All will be selected, but you can switch to Assigned and in order to assign specific collections. You will click on the Collection links to be redirected to the Collections list on your Shopify admin.
Click on the Collection you want to switch to this template and set it to use this new template then click Save to apply.
Once that is done you can visit the template page in the Theme editor and see how the newly edited collection is now assigned to this template.
4. Embed it on a dedicated store 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, the 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 a navigation menu element in the Header for easy access.
From your Shopify Admin, head over to Content → Menus →Main menu. Here you will find a list of all the pages in your Main menu, such as the Homepage, Catalog, and Contact page.
There you will need to Add menu item, 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.
For the customization to work using the theme editor you will need to also create a Page Template from the Theme Editor that you will use for your dedicated Quiz Page.
You will use the same process to assign your page to this template such that these changes are only applied to it when edited from the Theme Editor.
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. For example we can add a list of most popular product collections after the quiz. With this method you can fully customize pages with any other elements on top of your quiz for a truly personalized seamless experience for your customers.
