If you prefer, you can check out this information in video format.
Copy the quiz embed key
Before you can embed your quiz, you'll need to copy its Quiz Key.
Go to the Publish page in Lantern, scroll to Option 4 and click Copy Key.
Embedding the quiz as a block in your Theme Editor
Once you've copied the key, click Go to the Theme Editor. After you’re redirected to your editor, use the drop-down menu at the top to choose where you'd like to display your quiz.
1. Embed it on the Homepage of your store
1.1 Select Homepage from the page selector.
1.2 Add the Lantern Quiz app block to the section where you want the quiz to appear.
1.3 Paste your Quiz Key into the Quiz Sub-URL field.
1.4 Save your changes. Your quiz will appear immediately.
By default, Auto Height is enabled. This automatically adjusts the height of the quiz to fit each question to avoid scroll bars. You can also adjust the width, margins or choose a fixed height if needed.
2. Embed it on a product page
2.1 Select Products from the page selector.
Important note: If you want the quiz to appear on all product pages, add the Lantern Quiz block to the Default product template.
If you only want the quiz on certain products, you'll first need to create a custom product template.
2.2 Click Create template, give it a name such as Quiz Products, then create it.
2.3 Add the Lantern Quiz app block, paste your Quiz Key into the Quiz Sub-URL field and save.
For any new product template, you can choose which products this assigned to.
To assign products to the new template:
2.4 Under Preview, click the displayed product.
2.5 Open the All tab.
2.6 Find the product you want.
2.7 Click the pencil icon.
2.8 Choose your new template from the Theme template dropdown.
2.9 Click Save.
Once assigned, the product will use that template in your store.
3. Embed it on a collection page
The process for collection pages is almost identical.
3.1 Select Collections from the page selector.
Important note: If you want the quiz on all collections, use the Default collection template.
If you only want it on selected collections, create a new collection template by clicking Create template.
3.2 Click Create template, give it a name such as Quiz Collection, then create it.
3.3 Add the Lantern Quiz app block, paste your Quiz Key into the Quiz Sub-URL field and save.
To assign collections to the template:
3.4 Under Preview, click the displayed collection.
3.5 Open the All tab.
3.6 Find the collection you want.
3.7 Click the pencil icon.
3.8 Select your new template from the Theme template dropdown.
3.9 Click Save.
Once assigned, the collection will use that template in your store.
4. Embed it on a dedicated store page
You can also create a page that's dedicated entirely to your quiz.
4.1 Go to Online Store → Pages and create a new page. It can be left empty for now.
In this example, we're not only creating this page but adding it as a navigation menu element in the Header for easy access.
4.2 Go to Content → Menus → Main menu
4.3 Click Add menu item, give it a name such as Quiz Page
4.4 Link it to the page you just created and save.
4.5 Return to the Theme Editor and create a new Page template.
4.6 Assign your new page to this template so any changes only apply to this page.
4.7 By default, Shopify displays the page title at the top. You can hide this in the Theme Editor.
4.8 You can also add other sections around the quiz, such as featured collections, promotional content or banners, giving you complete control over the page while keeping the quiz as the main focus.
