If you prefer, you can check out this information in video format.
Add your quiz to your homepage, product pages, collection pages or a dedicated page. Where you can add the Lantern Quiz app block depends on your theme.
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.
When you edit a template, every page using it changes. To show the quiz only on selected products or collections pages, you have to create a separate template, then assign it to those items. Learn more in Shopify’s template guide.
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 and check the quiz in the Theme Editor preview. For the quiz to appear in your live store, save these changes in your published theme.
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.
Adjust the quiz height on mobile
These settings apply to screens up to 768px wide. You can change:
Auto-Height on mobile: Choose Same as desktop, On or Off.
Min. Height on mobile: Set the minimum quiz height on mobile.
Max. Height on mobile: Set the maximum quiz height on mobile.
Click Save after making your changes.
2. Embed it on a product page
2.1 Select Products from the page selector.
Choose where you want the quiz to appear:
On all products using the Default product template: Select Default product and go to step 2.3. Products using other templates won’t show the quiz.
Only on selected products: Create a separate product template in step 2.2.
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.
If you used Default product, you’re done. If you created a new template, assign it to each product where you want the quiz.
Choosing a product under Preview only changes the preview. To use the template in your store, select it in the product’s Theme template setting and save.
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 to open the product’s details in Shopify admin.
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.
Choose where you want the quiz to appear:
On all collections using the Default collection template: Select Default collection and go to step 3.3. Collections using other templates won’t show the quiz.
Only on selected collections: Create a separate collection template in step 3.2.
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.
If you used Default collection, you’re done. If you created a new template, assign it to each collection where you want the quiz.
Choosing a collection under Preview only changes the preview. To use the template in your store, select it in the collection’s Theme template setting 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 to open the collection’s details in Shopify admin.
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.
