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.

Quick steps

  1. Get your embed code
  2. Choose your embed type
  3. Login to the Shopify admin dashboard
  4. Add the quiz embed code to a page
  5. Preview the quiz

How do I customize the page the quiz is embedded in?

- Go to your store's themes page

- Click on Actions ➡ Edit Code

- Click on "Add a new template"

- Editing your template

- Select your custom template on the quiz page

Quiz layout settings

1. Get your embed code

Once your quiz is saved and ready to place on your website, you can get the embed code from an individual quiz's page. First, locate the quiz that you want to embed, and click on Results to take you to the quiz's specific results analytics (where you can also get the embed code):

Scroll down until you see the Embed code section, which includes a button you can use to get your shop quiz's embeddable code:

This will trigger a pop-up where you can select between two embed types.

2. Choose your embed type

You can choose between two embed types.

  • Body page: leave the navigation and footer visible.
  • Full screen: the quiz will fill the screen.

If you have the customer chat widget active on your store, this will be visible over the quiz in both modes letting customers interact with your bot while they take the quiz.

After you embed the quiz, you don't have to embed it again unless you'd like to change the embed type, or you want to embed a different quiz again. This means any changes you make to the quiz besides the embed type will automatically be reflected in the live quiz.

3. Login to the Shopify admin dashboard

Login to your store's admin dashboard. This is where you'll add the code in order to add the quiz to your store's website.

The quiz will have to be added into a page on your store. To do this, navigate from Online Store to Pages under "Sales Channels" in the Shopify admin navigation bar.

Click on an existing page to go to its edit screen, or click on "Add page" to create a new page for your quiz.

4. Add the quiz embed code to a page

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

This will switch the "Content" section to a field that allows you to directly enter HTML code. This is where you can paste the embed code that Octane AI generated for your quiz.

Once the code has been entered into the "Content" section, save your changes.

5. Preview the quiz

Once your changes have been saved, it's a good idea to check how your quiz looks on your website. To do that, simply click on "View page".

This will allow you to start interacting with the quiz right away, even if the page isn't linked anywhere on your website.

Return to top

How do I customize the page the quiz is embedded in?

Your store's theme may include page elements you want to remove like a title, or margins for the quiz area that you'd like to adjust.

Since quizzes are embedded into a page on your Shopify store, one effective method for making changes is by creating a custom page template in Shopify. This lets you use a custom page template without affecting any other page on your website.

To do this, we'll have to navigate to the Shopify admin dashboard. Once you've logged in to your Shopify admin, you can use the following steps to create a custom page template.

1. Go to your store's themes page

Once you're logged into the Shopify admin, click on Online Store under "Sales Channels".

2. Click on Actions ➡ Edit Code

Next to your theme's customize button, a drop-down menu labeled "Actions" will be available. Click on the drop-down menu, then click on "Edit Code".

This lets you edit parts of your template's code. Don't worry - we won't be touching any code except in the custom page theme we create.

3. Click on "Add a new template"

On the edit code screen, click on "Add a new template". This gives us a contained template where we can edit the layout of a page without affecting the code or layout of any existing pages.

Any pages you create will only use this template's code if you specifically select it.

3.1. Naming your template

Before your custom template is made, you'll have to give it a name. First, let's make sure we select "page" for the template type:

Next, enter a name for this custom template. I recommend something simple and easy to identify, like "quiz-body-embed" which lets me know the template is specifically for use with the body-type quiz embed.

4. Editing your template

Once your template has been made, you'll be able to directly edit the code of the template. The code that a blank page template starts with can be a bit different from template to template, however the UI will be the same each time:

  1. Theme code navigation menu.
  2. Tabs for open template files.
  3. Code

The tabs at the top will allow you to navigate the templates you've opened as well as indicating the name of the file you're looking at the code for.

The code itself can be viewed or edited below. The specific code in your theme's templates may look different, but the methods below should still work for every theme.

We'll take a look at a couple of examples you can use to edit your page template. The compatibility of the following examples with your page templates may depend on your theme.

4.1. Removing the page title

If your page contains a page title by default, it'll be marked by the following line of code:

<h1>{{ page.title }}</h1>

If you delete this from your template, that will remove just the page title without changing any other part of your page layout.

To do this, simply locate this line of code in the template's code.

Then, simply delete it, leaving a blank line. You can remove the blank line to tidy the code up, or you can leave it in, and click "Save".

4.2. Expanding the margins

NOTE: this specific example may not work on all templates.

Your theme's default layout may create an amount of empty space between your quiz's body embed and the edge of the page.

The following code can be used to maximize the margins of your quiz in the template:

<style>
.main-content {
padding-top:0px!important;
}
.main-content {
padding-bottom:0px!important;
}
.site-footer {
margin-top:0px!important;
}
</style>

<div class="rte">
{{ page.content }}
</div>

Adding this code is super simple. Simply replace your default template's code:

Using the code in the code block above, you can copy and paste over everything as a shortcut!

Make sure to click "Save" once you're done.

5. Select your custom template on the quiz page

Once you've saved your page template, it's time to add it to your quiz page. Navigate to "Pages" under your Online Store menu and select the page you made for your quiz.

Once you're on the page edit screen, find the templates menu on the right and select the custom page template you created:

Once you've selected the template, save your changes:

Within a few moments, your changes should be reflected on your website.

Return to top

Quiz layout settings

When embedding your quiz, you'll also want to be aware of your quiz's layout settings.

The layout settings include the ability to set the max width of content displayed throughout your quiz. By default, this width is 1084px:

To make sure that this is compatible with your Shopify store, you should make sure that the max content width isn't larger than the max content width set for your website's pages.

For example, if the max width of content for your theme is 800px, your quiz layout settings should be set to the same width. The particular max width of your store's content may depend on the theme you're using.

To find the width values of your theme's settings, you'll have to navigate to "theme.scss.liquid" under the Assets folder when editing your theme's code:

NOTE: your theme's default width settings are designed to be compatible with multiple devices. We don't recommend making any changes here unless absolutely necessary.

Return to top

Did this answer your question?