This guide will contain instructions and useful information on adding quizzes to a Shopify or non-Shopify page.

You can embed your quizzes directly into your pages via the following methods:

This is the simplest way to add a quiz to your Shopify store. It can be done directly in the theme editor, and you can do it in two different ways:

You can use the HTML embed code of the quiz to add the quiz to your page's HTML code. This will allow you to embed your quiz on non-Shopify pages as well. You can also add the HTML code to a custom liquid block in your Shopify theme editor.

First, you will need to copy the Octane ID of your quiz. You can find it in the Settings tab on the quiz editor:

This is the ID you will use to embed your quiz via App Embed or Block Section.

Now go to your Shopify admin page -> Sales channels -> Online store -> Themes -> Customize:

Select the page where you want to embed the quiz in the theme editor -> go to Sections:

You can now click on Add section where you want the quiz to be added, it can be in the Header, Footer, etc. -> click on Add section -> click on the Apps tab -> select the Octane AI app:

Now, paste the Octane ID you copied from your quiz in the Octane ID field, and your quiz should appear in the page preview:

On the right side, you will find a lot of options to customize how your quiz is embedded on the page. You can toggle whether it is a page body or full-screen embed, set up a loading animation, and change the height of the quiz on mobile and desktop:

You can drag and drop the quiz app or the app block on the left to rearrange the positioning of the quiz inside the page:

In the theme editor, click on the App Embed option -> Look for the Octane AI app and enable it:

Now, paste the Octane ID and add the paths to the pages you want to display the quiz on:

Once the customer accesses the URL to that page, they will be shown the quiz.

Keep in mind that the App Embed option only supports the full-screen quiz display, meaning it will take over the whole page when the customer opens the page. If the customer closes the quiz, they will be taken back to the home page of your store.

Octane AI quizzes can be displayed in any environment that allows for HTML embedding. An example of this is any webpage on your Shopify store, but it would not include HTML emails (emails don't allow for this type of code to run for security purposes).

In a Shopify store, there are 2 main methods you can use to display a quiz:

The 1st method involves a few more steps, but gives you more control over how the quiz is displayed in the page you add it to.

Before you can add a quiz to a webpage, make sure you know where to get your quiz's embed code.

Adding a quiz through the theme editor is done by creating a page template, which can then be easily inserted into a new Shopify page.

📕 Creating a new page template

📕 Adding a quiz into a custom liquid block

Once the page template is created, you can add it to any page created for your store by selecting your quiz template.

Quizzes can also be added to a Shopify page directly, rather than through a page template.

This method has fewer steps, but also includes these limitations:

📕 Adding a quiz directly to a Shopify page

If you'd like customers to open your quiz from a button instead of displaying the quiz directly on the page, you can use Shopify's built-in pop-up block feature.

This is a great option for product pages where you want to keep the page layout clean while still making your quiz easy to access with a call-to-action like "Find my match" or "Take the quiz."

Before following the steps below, make sure your quiz has already been embedded on a Shopify page. For help embedding your quiz, check the previous guide sections.
​

📕 Adding a quiz pop-up button to a Shopify product page

After your quiz page is created, that page becomes the URL for your quiz. Adding a link to the quiz page on your store's navigation menu is a great way to encourage general traffic & revenue to your quiz.

Adding a quiz as a Block Section (jump to section) is the easiest method, as it adds the quiz directly to an existing page.

This guide includes more direct methods of removing the page title from a Shopify template by editing your theme code.

By default, quizzes will change in size with the browser & device screen sizes. This lets the quiz fit any kind of device or screen resolution.

You can use the custom height setting if you'd like the quiz to keep to a specific size across all devices & browsers.

Yes, quizzes can be displayed anywhere that HTML embeds are allowed. This includes any Shopify page, but can also include non-Shopify webpages.

Quizzes cannot be added to emails, as most email clients don't allow code to run inside of emails (in order to prevent malicious code from running).

If the quiz is added to a non-Shopify page, revenue tracking will no longer function for the quiz as tracking depends on cookies added to your Shopify store by Octane AI. If you'd like to add a quiz to a non-Shopify page, but have concerns about how viable it may be, contact our support team with your questions!

Having page body and full screen embed codes allows for variations of quiz placements. While the best placement for a quiz is usually the nav bar with a simple and clear CTA like "Take our quiz", there are multiple ways to use embed code to present an Octane AI quiz.

Page body embed code can be added to any page of the website. This means that you can just grab your code from the Publish tab of your quiz and paste it directly into the HTML content box of your blog post.
​

Having a simple quiz that offers just the right products with only one question answered is a super effective way to drive your customers directly to checkout. You can simply paste the embed code to the collection description filed using HTML box or using a page builder to add the quiz. This can also be achieved by editing the collection template in the theme code, but it will require coding knowledge.

Usually, having a quiz on product pages helps your customers to decide on the right product variant. In most cases, the quiz is added to a text button right under the variant selector.

Extremely popular shade finder quizzes can be built for each product category separately and used for promotions. Creating a quiz section on the website is super easy and an engaging experience for customers.
​