This guide will contain instructions and useful information on adding quizzes to a Shopify, or non-Shopify page.
💡 What you'll learn about
How to embed an Octane AI quiz (jump to section)
Adding a quiz in the theme editor (jump to section)
Adding a quiz inside of a new page (jump to section)
Frequently asked questions (jump to section)
💡 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
Open your quiz in the quiz editor.
Go to the Publish tab on the top menu.
Click on Shopify page.
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
From the Shopify admin dashboard, go to Sales channels → Online Store → Themes.
On the Themes page, click on Customize to open the theme editor.
In the theme editor's top menu, click on the Home page dropdown menu.
Click on Pages → "Create template".
Name your new page template.
📕 Adding a quiz into a custom liquid block
Inside of the page template, find the Template section on the left menu.
Click on "Add section".
Find the </> Custom Liquid section and add it to the page.
Open the custom liquid block.
Paste your quiz embed code into the "Custom Liquid" box.
Exit back out to the page template.
Use the "⋮⋮" icon to reorder the quiz block to your desired position.
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
In Shopify's admin dashboard, go to Sales channels → Online Store → Pages.
Click on Add page.
Add a title for the page.
In the "Content" box, click on the "< >" icon to show an HTML content box instead.
Paste your quiz embed code in the HTML box.
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!