Once you’ve built your quiz, it’s time to publish it for your customers and site visitors. Publishing your quiz as a Shopify page is an ideal experience for longer quizzes and quizzes that you want to specifically direct customers to.

In this article, you’ll learn when to publish a quiz as a Shopify page and how to set this up.

Table of Contents

1. Benefits of publishing quizzes as Shopify pages

2. Publishing a quiz to Shopify

2.1. Publish as Shopify page embed

2.2. Create new or update existing page in Shopify

3. Quiz embed settings

3.1. Embed type

3.2. Quiz height


1. Benefits of publishing quizzes as Shopify pages

You should consider publishing your quiz to a Shopify page when:

  • The quiz is more than 5 steps long. While pop-ups can be handy for shorter quizzes, they are not an ideal fit for longer quizzes. Embedding your quiz in a Shopify page is a better choice for longer quizzes, so that you can feel more confident that you are not interrupting customers with a more time-consuming task.

  • You want to feature the quiz prominently in your site. You’ve worked hard on your quiz, so it makes sense that you want to feature it on your site! When you publish your quiz as a Shopify page, you can then feature this page in your site navigation. You can even embed the quiz in your site’s homepage for maximum visibility.

  • You plan to drive ads or social media traffic to your quiz. People love taking quizzes! A quiz is a compelling, low stakes way to drive traffic to your site. By embedding your quiz in a Shopify page, you can direct traffic from ads or social media posts directly to the quiz and then to your store catalog.

You can also publish a quiz as a pop-up!

2. Publishing a quiz to Shopify

2.1. Publish your quiz as Shopify page embed

First things first, you’ll need to create your quiz!

When you’re satisfied with your quiz and ready to share it with customers, you can publish it by following the steps below:

1. In the quiz editor, click Save & publish.

The Save & publish button inside the Octane AI quiz editor.

2. On the Publish step, select Shopify page.

The Shopify page publishing option within the Octane AI quiz editor publishing settings.

3. In the modal, you can optionally update the Embed Type and Quiz height settings to change how the quiz appears when embedded in your store.

4. Click Copy code.

The Copy code button within the Shopify page embed modal in the Octane AI quiz editor publishing settings.

The rest of this process takes place in Shopify, but it’s a good idea to leave this tab open in case you need to copy the code again.

2.2. Create quiz page in Shopify

Now that you’ve got the embed code, it’s time to embed it in a Shopify page with the following steps:

1. In Shopify admin, go to Online Store > Pages and click Add page. You can also select an existing page.

2. Update the page title. If you don’t want to show a page title, check out this guide for removing the title from a Shopify page.

3. Click the < > button to show the page HTML.

4. Paste the code into the Content field. If adding to an existing page, make sure the HTML code is in the right place based on where it should appear in the page.

5. Click Save.

Adding HTML code to a Shopify page to publish an Octane AI quiz as a Shopify page.

Note: If you want to test the page before publishing, change the Visibility setting to Hidden. You can then preview the page and make sure everything looks right before setting to Visible.

3. Quiz embed settings

If you want to customize how the quiz appears on your Shopify page, you can edit the Embed type and Quiz height settings in the publish modal. You should update these before clicking Copy code, since they will change the quiz embed code.

The Shopify page embed settings to control the appearance of an Octane AI quiz when published in a Shopify page.

3.1. Embed type

The Embed type setting determines how the quiz will appear to customers when they navigate to its page on your store:

  • Page body: The quiz will fit within a page while maintaining access to your standard Shopify navigation and footer. This is ideal for quizzes that are added to pages with other content.

  • Full screen: The quiz will take over the entire page for a focused, distraction-free quiz experience. This is a great option when using your quiz as a landing page. If customers leave the quiz, they’ll be directed back to your site home page.

3.2. Quiz height

The Quiz height setting determines how much space the quiz will take up within the customer’s browser window:

  • Match browser height: The quiz will adapt to the size of the user’s browser window. This is the recommended default option for desktop and mobile.

  • Custom height: Set custom heights (in pixels) for the quiz on mobile and / or desktop devices. This is a great idea if you use a background image on your quiz that you want to look the same across all devices.

Back to top.


Have any questions? Send an email to [email protected] or use the support icon in the bottom right to chat with our team.

Did this answer your question?