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
