This guide walks you through embedding an Interact quiz directly onto a Shopify page using a Custom Liquid block.
You’ll be able to:
Embed your quiz inline on a page
Control where the quiz appears on the page
Confirm the quiz loads correctly on your live site
Before you start
Make sure you have the following:
An active Interact account
At least one created quiz in Interact
Your quiz is published in Interact
Access to edit your Shopify theme
💡 Note: Shopify embeds often won’t render exactly as expected inside the theme editor. You’ll usually need to Save and view the page live (or in preview) to confirm the quiz is showing.
Step 1. Get your Interact direct embed code
Log in to Interact.
Locate the quiz you want to embed.
Click the Share tab.
Click Embed.
Click Copy code.
❗ Important: Always copy the embed code from the quiz’s Share tab (not from the browser address bar URL).
Step 2. Add the embed code to Shopify
You’ll paste your Interact embed code into a Shopify Custom liquid block where you want the quiz to appear.
Embed on a Shopify page using a Custom liquid block
Log in to Shopify.
From your Shopify admin, click Online Store.
Click Customize or "Edit Theme"
In the top dropdown (page selector), navigate to the template/page where you want the quiz to appear (for example, Pages → select the page).
In the left panel, click Add section (or Add block, depending on your theme).
Select Custom liquid.
In the Custom liquid settings, click into the Liquid code field.
Paste your Interact embed code into the Liquid code field.
Click Save.
❗ Important: Shopify requires using a Custom liquid block for this method. If you paste the code into a rich text block, Shopify may modify the code and the quiz may not load.
Step 3. View the quiz on your live page
Click Save in Shopify.
Open the page in a new tab (or use View) to confirm the quiz loads.
💡 Tip: If you don’t see the quiz while editing, this is expected in many cases—check the saved/live version of the page.
Step 4. Test the embed
Confirm the quiz works end-to-end on your Shopify page.
Load the page where you embedded the quiz.
Take the quiz as a visitor would.
If your quiz includes an opt-in form, submit the form to confirm it appears and can be completed.
⚠️ Warning: If you’re testing an opt-in form, use a real email you can access so you can verify follow-up emails (if you have them enabled).
Step 5. Publish your Shopify changes
Shopify changes won’t be visible to visitors until they’re saved (and your edited theme is the live/published theme).
In the theme editor, click Save.
If you edited an unpublished theme, go to Online Store → Themes and click Publish on the theme you edited.
❗ Important: If you embed the quiz but don’t Save (and publish the theme if needed), the quiz won’t appear for visitors.
FAQs
Why can’t I see the quiz in the Shopify editor?
Why can’t I see the quiz in the Shopify editor?
Many embeds do not render reliably inside the Shopify theme editor. Click Save, then view the page live (or in Preview) to confirm the quiz is loading.
Do I need to update the embed code when I edit my quiz?
Do I need to update the embed code when I edit my quiz?
Usually, no. In most cases you can keep the same embed code, but you must Publish your quiz in Interact for changes to appear on your embedded version.
How can I replace what quiz is shown in the embed?
How can I replace what quiz is shown in the embed?
If you want a different quiz to appear in the same spot, swap the embed code.
In Interact, open the new quiz you want to embed.
Go to Share → Embed and click Copy code.
In Shopify, go to Online Store → Customize.
Open the template/page where the quiz is embedded.
Click the existing Custom liquid section/block.
Replace the existing code in Liquid code with the new embed code.
Click Save (and Publish the theme if needed).
Make a quiz in 2 minutes with AI