All Collections
Publishing Quizzes
Adding a Quiz to a Shopify Page
Adding a Quiz to a Shopify Page

#embed #quiz #publish #shopify-page

Mark Baek avatar
Written by Mark Baek
Updated over a week ago

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

๐Ÿ’ก What you'll learn about

๐Ÿ’ก Prerequisites

The custom liquid block is only available in Online Store 2.0 themes.

How to embed an Octane AI quiz

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 would not include HTML emails (emails don't allow for this type of code to run for security purposes).

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

  • Adding a quiz in the theme editor

  • Adding a quiz inside of a new page

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.

๐Ÿ’ก Finding the quiz embed code

  1. Open your quiz in the quiz editor.

  2. Go to the Publish tab on the top menu.

  3. Click on Shopify page.

  4. Copy the text code provided for the "Page body" embed option.

Adding a quiz in the theme editor

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

  1. From the Shopify admin dashboard, go to Sales channels โ†’ Online Store โ†’ Themes.

  2. On the Themes page, click on Customize to open the theme editor.

  3. In the theme editor's top menu, click on the Home page dropdown menu.

  4. Click on Pages โ†’ "Create template".

  5. Name your new page template.

๐Ÿ“• Adding a quiz into a custom liquid block

  1. Inside of the page template, find the Template section on the left menu.

  2. Click on "Add section".

  3. Find the </> Custom Liquid section and add it to the page.

  4. Open the custom liquid block.

  5. Paste your quiz embed code into the "Custom Liquid" box.

  6. Exit back out to the page template.

  7. Use the "โ‹ฎโ‹ฎ" icon to reorder the quiz block to your desired position.

  8. Save your page template.

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

Adding a quiz inside of a new page

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

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

  • Quizzes will be restricted to a smaller space in the page.

  • Custom CSS targeting the quiz will be more difficult to apply.

  • Removing the quiz requires deleting the code or page.

๐Ÿ“• Adding a quiz directly to a Shopify page

  1. In Shopify's admin dashboard, go to Sales channels โ†’ Online Store โ†’ Pages.

  2. Click on Add page.

  3. Add a title for the page.

  4. In the "Content" box, click on the "< >" icon to show an HTML content box instead.

  5. Paste your quiz embed code in the HTML box.

  6. Save your page.

Frequently asked questions

  • How do I link the quiz page on my website?

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.

  • How do I remove the page title from my quiz page?

Adding a quiz through the theme editor (jump to section) is the easiest method, which only adds the page title if you add it to the template.

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

  • What are the quiz height settings in a page embed used for?

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.

  • Can I add the quiz somewhere besides a Shopify page?

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!

Did this answer your question?