Once your quiz has been completed, you can embed it into your website with a code that Octane AI generates for you.

This guide will explain each part of the embed process. You can use the quick steps listed below to skip ahead.

Table of Contents

1. Getting your embed code

1.1. Embed type

1.2. Quiz height

2. Embedding your quiz

2.1. Create a Shopify page

2.2. Change your page content box to HTML

2.3. Add your embed code

2.4 How to hide your quiz for testing

3. Removing your page title


1. Getting your embed code

You can retrieve your embed code from your quiz's main page. To access your quiz's main page, just click on the quiz name!

On your quiz's main page, you'll find the Embed code section. In addition to generating an embed code for your quiz, you can also create a Quiz Pop-up from this page.

Click Get code to select your quiz's embed settings.

Check out this guide for instructions on how to create a Quiz Pop-up.

1.1. Embed type

There are two main options available for quiz embeds on your store:

  • Body page: leave the navigation and footer visible.

  • Full screen: the quiz will fill the screen.

If you use the full screen setting, customers will be taken back to your home page when they exit your quiz.

If you use the page body option, you'll also be able to customize your quiz height.

1.2. Quiz height

By default, your quiz's layout will adapt to the size of a user's browser window (this is the "Match browser height" option).

You can select a custom height instead - this will keep your quiz at a constant size in your page embed.

Custom heights can be a great idea if you use a background image for your quiz, as it makes sure the background layout stays consistent across devices and browsers.

Back to top.


2. Embedding your quiz

Embedding your quiz is a great idea even if you haven't finished building your quiz out yet. This lets you test your quiz changes in real time, as any edits in the Shop Quiz editor will be reflected in your embedded quiz as well.

You'll only have to re-embed your quiz if you change any of your embed type or quiz height settings when generating your code, since the line of code does change slightly with these settings.

For a step-by-step guide on the embedding process, read on!

2.1. Create a Shopify page

Now that you have your embed code, you'll have to create a Shopify page in your Shopify admin dashboard.

To do this, navigate to Sales Channels Pages and click Add page.

You can also add your quiz to an existing page if you have one in mind.

2.2. Change your page content box to HTML

In the "Content" section of the page edit screen, find the < > button with the "Show HTML" tooltip.

Click the button to change the content box to read HTML content instead. Once this is done, your content box should look like this:

2.3. Add your embed code

Add your embed code in the content box (whether you've selected full screen or page body) and save the page.

2.4 How to hide your quiz for testing

If you would like to hide your quiz in order to test it before making it live, be sure to hide the page your quiz in on. You can do this by selecting "Hidden" under the Visibility option to the right of the content box.

Note: Products cannot be added to the cart when the quiz page is hidden.

If your embed code was added in the wrong type of content box, your page will end up displaying the line of code instead:

If this happens, all you need to do is delete the code from your page content and re-add it as HTML.

Your page will now display your Shop Quiz! Any changes you make in the Shop Quiz editor should be reflected in the live quiz within just a few moments.

Back to top.


3. Removing your page title

Some Shopify stores will automatically add the page title to the page itself. You can remove this by editing your theme code.

Each theme can have different details in their code (especially custom ones) but there are methods that can be used across many of Shopify's themes.

For various methods on removing page titles, check out this guide.

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?