Skip to main content

How to Embed a Quiz into Your Shopify Store

This article walks you through how to embed an Interact quiz into a Shopify page to engage visitors and capture leads.

Damaris Pacheco avatar
Written by Damaris Pacheco
Updated yesterday

Accessing your Shopify Store

Step 1: Under your Online Store in Shopify, navigate to "Themes" and then click the three dots.

Step 2: Select "Edit Code"

Step 3: Under templates, select "+ Add a new template"

Step 4: In the popup that appears:

  • Set the Template type to Page.

  • Choose Liquid as the Template language.

  • Enter quiz as the File name (this will create a file named page.quiz.liquid).

  • Click Done

Step 5: A blank page will appear. This is where our quiz embed code will be added.


Accessing Quiz Embed Code

Step 1: Log in to your Interact dashboard and click "Share & Embed" on your quiz you want to embed.

Step 2: Select "Embed code" then choose "Javascript"

Step 3: Toggle the options for:

  • "Auto-resize embed to fit quiz content"

  • If you are redirecting your quiz results, then select "Redirect host page on redirect."

Step 4: Hit "Copy Code."


Embedding the Quiz Code into Shopify

Step 1: Paste the quiz code into your Shopify Page template.

  • Right after the opening <div, add align="center" to center the quiz on the page.

  • This ensures your quiz is centered within the page where it’s embedded.

  • Hit Save.

Step 2: Go to Pages on the left sidebar and then select "Add Page" to create a page for this quiz.

Step 3: Configure Your Page Settings

  • Enter a Title for your page.

  • Under Visibility, make sure it’s set to Visible so customers can access it.

  • In the Template section, select quiz as the template.

  • Click Save to publish your changes.

Step 4: Hit View to see your quiz page

Step 5: Confirm that your quiz appears on the page and is properly centered.

  • It will also dynamically respond to each question as it changes in size and redirect to your collections pages for the results.


Backup Option: Add quiz directly to Shopify Page

If adding a page template causes any errors on your Shopify site or isn't looking how you want it to, there is a backup option to add your quiz directly to a Shopify page.

  • This option is less robust in terms of compatibility but will work in most cases.

Step 1: In Shopify, go to Pages on the left sidebar and then select "Add Page" to create a page for this quiz.

Step 2: Now paste in the embed code you copied from Interact in the Content Box.

Step 3: Add align="center" right after <div in the embed code so that the quiz will be centered on your Shopify page.

Step 4: Configure Your Page Settings

  • Enter a Title for your page.

  • Under Visibility, make sure it’s set to Visible so customers can access it.

  • Click Save to publish your changes.

Step 5: Hit View to see that your quiz is now embedded on your Shopify page and centered


Did this answer your question?