Accessing Shopify
Step 1: In Shopify, navigate to "Themes" and then click the three dots.
Step 2: Select "Edit Code"
Step 2: On the edit code page, scroll down to Sections then click on header.liquid
Step 3: Search the Code for the Closing </head> Tag
Open the code editor for your theme.
Press Ctrl + F (Windows) or Command + F (Mac) to open the search bar.
Type
</head>to find the closing head tag in the code.Note: Some themes may use slightly different or custom tags instead of
</head>, such as</header-drawer>,{% endhead %}, or similar.Your goal is to locate the end of the
<head>section where you can safely add scripts.
Accessing Quiz Embed Code
Step 1: Log in to your Interact dashboard and click "Share & Embed" on your quiz you want to pop up.
Step 2: In the box that comes up, click on "Popup" on the left sidebar and the “Javascript” tab.
Step 3: Toggle on the button "Promote the popup" under the "Activate the quiz to promote” section. You can have 1 quiz pop-up running at a time.
Step 4: Customize your pop-up with the desired options.
We recommend a “Timer Delay” of 5-10 seconds, meaning your web browser will see the popup that many seconds after they get on your page.
We suggest a “Hiatus” of at least 10 days. This means once your web browser sees the pop-up, they won’t see it again for that number of days when returning to your site.
Note: If you’re using the Result Redirect option, be sure to scroll down and enable the “Redirect Host” setting to ensure the redirect works correctly.
Step 5: Click “Copy Code.”
Embedding the Quiz Code into Shopify
Step 1: Go back to your Shopify and paste in the code before the closing </head> tag (in my case it's </header-drawer>
Step 2: Click Save
Step 3: Go to your Shopify site and make sure the pop-up is displaying correctly.
You can go back to step 4 and edit settings in Interact's quiz builder to change how/when the popup shows up and how it looks.
