Skip to main content

Add a Quiz Popup to Your Shopify Store

In this article, you'll learn how to use Interact Quiz Builder to add a quiz pop-up to your Shopify store.

Written by Damaris Pacheco

This guide walks you through adding an Interact quiz as a pop-up on a Shopify store.

You’ll be able to:

  • Add a quiz pop-up to your Shopify store

  • Control when the pop-up displays for visitors

  • Confirm the quiz opens 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 (Online Store)

💡 Note: Shopify embeds (especially pop-ups) often won’t render inside the theme editor the same way they do on your live storefront. You’ll usually need to Save and then Preview your store to confirm the pop-up is showing.

Step 1. Get your Interact Quiz Pop-Up Embed Code

You’ll copy your Interact quiz pop-up JavaScript code and add it to Shopify.

  1. Log in to Interact.

  2. Locate the quiz you want to add as a pop-up.

  3. Click the Share & Embed tab.

  4. Click Pop-up.

  5. Click the Javascript option (if you see multiple embed types).

  6. Turn on Promote the popup (or Activate the quiz to promote, depending on what you see).

  7. Customize your pop-up settings (for example, Timer Delay and Hiatus).

  8. Then click Copy Code.

❗ Important: You can have 1 quiz pop-up running at a time. If you turn on promotion for a different quiz, it will replace the one currently being promoted.

Step 2. Add the Quiz Pop-Up code to Shopify

You’ll paste your Interact pop-up code into Shopify.

Shopify typically requires adding the code using a Custom liquid block, but you can also add it directly to your theme code so it loads site-wide.

Add a quiz pop-up using a Shopify Custom liquid block

  1. Log in to Shopify.

  2. Go to Online Store.

  3. Click "Customize" or "Edit Theme"

  4. In the left sidebar, click + Add section (or Add section in the area you want to edit).

  5. Select Custom liquid.

  6. Click the Custom liquid section that appears.

  7. Paste your Interact pop-up code (from Step 1) into the Liquid code field.

  8. Click Save.

❗ Important: If you don’t click Save, the pop-up won’t appear on your live store.

Add a quiz pop-up by editing your theme footer (site-wide)

Use this method if you want the pop-up script to load across your entire storefront without relying on a theme editor section.

  1. Log in to Shopify.

  2. Go to Online Store.

  3. Click … (three dots) next to your theme.

  4. Click Edit code.

  5. In the left sidebar, open layout.

  6. Click theme.liquid.

  7. Find the closing </body> tag.

  8. Paste your Interact pop-up code (from Step 1) just above </body>.

  9. Click Save.

⚠️ Warning: If you paste the code into the wrong file (or inside a section/template that doesn’t load site-wide), the pop-up may only work on some pages.

Step 3. View the quiz on your live page

  1. Click Save in Shopify (if you haven’t already).

  2. Open your storefront in a new tab (use Preview from your theme when possible).

  3. Wait for your pop-up to appear based on your timer delay settings.

  4. Click the pop-up to confirm it opens your Interact quiz.

💡 Tip: If you don’t see the pop-up right away, try viewing your store in an incognito/private window and double-check any timing/visibility settings you selected for the popup in Interact.

Step 4. Test the Embed

Confirm the quiz works end-to-end from the pop-up.

  1. Load your live store as a visitor would.

  2. Wait for the pop-up to appear.

  3. Click the pop-up and take the quiz.

  4. 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 the theme you edited is the one that’s published).

  1. In the theme editor (or code editor), click Save.

  2. If you added the code to an unpublished theme, go to Online Store and make sure the correct theme is Published.

❗ Important: If you configure the embed but don’t Save (or you edited a theme that isn’t published), the pop-up won’t appear for visitors.

FAQs

Why can’t I see the pop-up in the Shopify theme editor?

  • Pop-ups often don’t render the same way while you’re editing. Click Save, then view your store live (or in Preview) to confirm the pop-up is loading.

Do I need to update anything in Shopify when I edit my quiz?

  • Usually, no. In most cases you can keep the same pop-up embed code, but you must Publish your quiz in Interact for changes to appear on the live quiz.

How can I replace what quiz is opened from the pop-up?

  • Replace the embed code in Shopify with the new quiz’s pop-up JavaScript code.

    1. In Interact, open the new quiz you want to use.

    2. Go to Share → Embed → Popup and click Copy code.

    3. In Shopify, open the place where you pasted the code (either Custom liquid or theme.liquid).

    4. Replace the existing code with the new Interact code.

    5. Click Save.

Make a quiz in 2 minutes with AI

Try it free

Related Articles
Did this answer your question?