Skip to main content

Add Your Quiz as an Announcement Bar to Shopify

This article describes how to embed an Interact quiz announcement bar onto your Shopify store.

Written by Mia Fitzpatrick

This guide walks you through adding an Interact quiz announcement bar to your Shopify site.

You’ll be able to:

  • Add an Interact announcement bar to your Shopify store

  • Customize how and when the announcement bar appears

  • Confirm the announcement bar and quiz load 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: The announcement bar may not appear immediately after adding the code if you set a Timer Delay. Save your changes, then check your live site and wait for the delay you set.

Step 1. Get your Interact Announcement Bar Code

  1. Log in to Interact.

  2. Locate the quiz you want to promote.

  3. Click the Share & Embed tab.

  4. Click Announcement bar on the left sidebar.

  5. Click the Javascript tab.

  6. Toggle on Promote in the announcement bar (you can have 1 quiz announcement bar running at a time).

  7. Customize your announcement bar settings as needed.

    • We recommend a Timer Delay of 5–10 seconds.

    • We suggest a Hiatus of at least 10 days.

  8. (Optional) Set announcement rules if you only want the announcement bar to appear on certain pages (or not appear on certain pages).

  9. Click Copy Code.

❗ Important: Always copy the code from the quiz’s Share & Embed area (not from the browser address bar URL).

Step 2. Add the code to Shopify

You’ll paste your Interact announcement bar code into Shopify so it can load on your store.

Embed site-wide by editing theme code (theme.liquid)

⚠️ Warning: Editing theme code can break your storefront if you paste code into the wrong file or location. If possible, duplicate your theme before making changes so you have a fallback.

  1. Log in to Shopify.

  2. Go to Online Store > Themes.

  3. Find the theme you want to edit, then click … (or Actions).

  4. Click Edit code.

  5. In the left sidebar, open the Layout folder.

  6. Click theme.liquid.

  7. Find the closing </body> tag.

  8. Paste your Interact announcement bar code immediately above </body>.

  9. Click Save.

💡 Note: If you paste the code into a different file (or into a section that doesn’t load site-wide), the announcement bar may only show on some pages—or not at all.

Embed using a Custom Liquid block (theme editor)

  1. Log in to Shopify.

  2. Go to Online Store > Themes.

  3. On the theme you want to update, click Customize.

  4. In the left sidebar, click + Add section (or Add block, depending on your theme).

  5. Select Custom liquid.

  6. Click the new Custom liquid section/block to open its settings.

  7. Paste your Interact announcement bar code into the Custom Liquid editor.

  8. Click Save.

💡 Note: The announcement bar may not appear inside the theme editor preview while you’re working; check your saved/live version instead (and remember to wait for any Timer Delay you set).

Step 3. View the announcement bar on your live page

  1. In Shopify, click Save if you haven’t already.

  2. Visit your storefront on mobile and desktop to confirm the announcement bar appears and the button opens your quiz.

💡 Tip: If you set a Timer Delay, you’ll need to wait for the delay before the announcement bar appears.

Step 4. Test the Embed

Confirm the announcement bar and quiz work end-to-end on your Shopify store.

  1. Load the page where your announcement bar should appear.

  2. Wait for the delay (if you set a Timer Delay).

  3. Click the announcement bar button to open the quiz.

  4. Take the quiz as a visitor would.

  5. 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

Your announcement bar won’t be visible to visitors until your Shopify theme changes are live.

  1. If you edited your live (published) theme, confirm your changes are saved and then refresh your storefront.

  2. If you edited an unpublished theme, go to Online Store > Themes, then click Publish on the theme you updated.

  3. Visit your live domain and confirm the announcement bar appears.

❗ Important: If you paste the code but don’t Save (and Publish, if you edited an unpublished theme), the announcement bar won’t appear for visitors.

FAQs

Why can’t I see the announcement bar in the Shopify editor?

  • Some scripts won’t render reliably inside the theme editor preview. Save your changes, then check your live site (and wait for your Timer Delay, if set).

Do I need to update the announcement bar code when I edit my quiz?

  • Usually, no. In most cases you can keep the same code, but you must publish your quiz in Interact for changes to appear.

How can I replace what quiz is shown in the announcement bar?

  • If you want a different quiz to appear in the announcement bar, swap the announcement bar code.

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

    2. Go to Share & Embed → Announcement bar → Javascript and click Copy Code.

    3. In Shopify, open the location where you pasted the previous code (either theme.liquid or the Custom liquid section/block).

    4. Replace the existing code with the new code, then click Save (and Publish if needed).

Make a quiz in 2 minutes with AI

Try it free

Related Articles
Did this answer your question?