Disclaimers
Custom CSS classes are only available on the Octane Plus and Enterprise plans.
Our support team cannot assist with custom code. If you need help with implementing custom CSS on your quiz, please procure the help of a developer.
Enabling custom CSS in your quiz
Default dynamic CSS class names
By default, our quizzes use dynamic CSS classes. This means that the class name is randomly generated each time the quiz is rendered. For example, this is a dynamic class for the quiz wrapper element:
<div class="c3385f6a35c2e4e2dbc46c93af1ea2627a240829a">
When you enable custom CSS in your quiz, it will now look like this, with both dynamic and the additional fixed classes:
<div class="c893c64f4cd2daad565742d46908046c93d2172d9 oct-quiz-wrapper oct-quiz-wrapper--question-page">
For the full default custom CSS structure, please see the full reference further in the article.
How to turn on custom CSS in your quiz
Open your quiz in the Octane AI quiz editor.
In the quiz editor, navigate to Design and click on Custom CSS.
Check Enable custom class names.
Editing custom CSS class names
Once you have enabled custom CSS, you can either use the default class names that are generated when custom CSS is enabled or replace the class names with your own.
You can use multiple classes for a specific element as long as each entry is separated by a space.
How to add custom CSS styling targeting your quiz
The custom CSS options in the quiz editor are limited to enabling and editing the custom CSS class names. To add the actual custom CSS code, you need to add it to your page where the quiz has been published.
While there are several methods you can use to do this, the simplest way requires you to have a quiz published through the theme editor.
Embedding a quiz inside of a custom liquid block through the theme editor also lets you apply custom CSS code directly inside of that block - this allows you to avoid having to edit your theme's code files directly, and also ensures that any CSS you add will only apply to the quiz block that you create.
Full quiz HTML with default custom CSS classes
Global wrapper HTML structure
This is the main structure of a quiz:
<div class="octane-ai-quiz-rendered">
<div class="oct-quiz-wrapper <question_type_class>">
<div class="oct-quiz-content">
// first element Close button (on fullscreen mode)
// quiz content will appear inside this element
</div>
</div>
</div>
Quizzes have a main wrapper in which Octane AI's script starts. It has a static class called "octane-ai-quiz-rendered" which cannot be changed.
<div class="octane-ai-quiz-rendered">
// Wrapper will be rendered inside
</div>
The "oct-quiz-wrapper" element represents a mask that hides quiz content. Inside the wrapper element, another element is rendered that represents the content holder. The whole quiz HTML is rendered inside it.
<div class="oct-quiz-wrapper">
// Content holder will be rendered inside
</div>
The "oct-quiz-content" is the final main element, and its purpose is to hold quiz content.
<div class="oct-quiz-content">
// Quiz content will appear inside this element
</div>
The close button is always rendered as the first element inside the content div.
<div class="oct-quiz-close">
<svg width="20" height="20" viewBox="0 0 20 20">
<g fill="currentColor" fill-rule="evenodd">
<mask id="oct-closeXb" fill="#fff">
<use xlinkhref="#oct-closeXa"></use>
</mask>
<path id="oct-closeXa" d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z"></path>
<g fill="currentColor" mask="url(#oct-closeXb)">
<path d="M0 0h21v21H0z"></path>
</g>
</g>
</svg>
</div>
Global wrapper classes
Wrapper class name:
oct-quiz-wrapper
Content class names:
oct-quiz-content
Close quiz popup (only for full screen):
oct-quiz-close
Page HTML structure
Pages can contain more than one question:
These questions are contained within their own .oct-quiz-content div inside the page's .oct-quiz-content div.
Text HTML structure
All text fields are generated inside the div element, except for the rich text editor content. The div element prevents other styles on your site from interfering with the quiz.
How each text element is rendered
Title
<div class="oct-quiz-title">
// Text will be rendered inside
</div>
Heading
<div class="oct-quiz-heading">
// Text will be rendered inside
</div>
Subheading
<div class="oct-quiz-subheading">
// Text will be rendered inside
</div>
Body text
<div class="oct-quiz-body-text">
// Text will be rendered inside
</div>
Caption text
<div class="oct-quiz-caption-text">
// Text will be rendered inside
</div>
Rich text
The rich text editor is a little more complex. A class is available for its wrapper, but the content inside will be subject to rich text settings.
<div class="oct-quiz-rich-text">
// Text will be rendered inside
</div>
Text classes
Title class name
oct-quiz-title
Heading class name
oct-quiz-heading
Subheading class name
oct-quiz-subheading
Body text class name
oct-quiz-body-text
Caption text class name
oct-quiz-caption-text
Rich text editor class name
oct-quiz-rich-text
Buttons HTML structure
Every button is wrapped inside the div element.
<div class="oct-quiz-btn-wrapper">
// Button will be generated inside
</div>
Every button has the same HTML structure. Below is an example of only one variant, but the rest are generated the same way.
<button class="oct-quiz-btn oct-quiz-btn--primary ">
// Some text
</button>
To control button sizes, we only add a size class modifier to the same HTML structure.
<button class="oct-quiz-btn oct-quiz-btn--primary oct-quiz-btn--small">
// Some text
</button>
Button class names
Button wrapper
Button wrapper class name:
oct-quiz-btn-wrapper
Add all to cart button class name:
oct-quiz-btn-wrapper-buy-all
General / all buttons class name:
oct-quiz-btn
Button style
Primary button class name:
oct-quiz-btn--primary
Secondary button class name:
oct-quiz-btn--secondary
Primary text button class name:
oct-quiz-btn--primary-text
Secondary text button class name:
oct-quiz-btn--secondary-text
Button size
Small button class name:
oct-quiz-btn--small
Medium button class name:
oct-quiz-btn--medium
Large button class name:
oct-quiz-btn--large
Questions HTML structure
Explainer screen
The explainer screen has a unique class name for the content holder and the main content wrapper. Explainer screens consist of top and bottom content, with buttons to go to the next question.
<div class="oct-quiz-wrapper oct-quiz-wrapper--explainer">
<div class="oct-quiz-content">
// we render question content here
</div>
</div>
Email, SMS, and freeform text questions
Email, phone, and collect text share the same structure, so they have a wrapper class that is an addition to the main content wrapper. A div element is rendered inside the main content that wraps around the input type text field.
<div class="oct-quiz-wrapper oct-quiz-wrapper--email">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-email-wrapper">
<input type="text" />
</div>
// Bottom content
</div>
</div>
Multiple choice
For multiple choice, a wrapper class is included as an addition to the main content wrapper class.
A div element that is a wrapper for all the answer options inside it is also included.
Inside the div wrapper, a <ul><li> structure is rendered. <ul> has a general options class, and <li> are items/answers.
Every <li> has three divs. The first one represents visible text. The second and third <li> are only there to help create text choice buttons in the quiz that maintain a static width when font styling is changed.
<div class="oct-quiz-wrapper oct-quiz-wrapper--multiple-choice">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-multiple-choice-wrapper">
<ul class="oct-quiz-multiple-choice-options oct-quiz-multiple-choice-options--stacked">
<li class="oct-quiz-multiple-choice-options__option">
<div>text holder</div> // main text you see
<div>text holder</div> // hidden text to take space if different style (hover)
<div>text holder</div> // hidden text to take space if different style (selected)
</li>
</ul>
</div>
// Bottom content
</div>
</div>
Picture choice
Picture choice is very similar to multiple choice. A wrapper class is included that is an addition to the main content wrapper class.
Inside, there is a div wrapper for all the answer options.
Inside the div wrapper, a <ul><li> structure is rendered in which <ul> has a general options class and <li> for items and answers.
Three divs are included inside <li>. The first one is an empty div that holds the image as a background. The second is the text holder, and the third only holds the border style. The number and order of divs can be different, which depends on the options chosen when the picture choice question is created.
<div class="oct-quiz-wrapper oct-quiz-wrapper--picture-choice">
<div class="oct-quiz-content">
// Top content
<div class="oct-quiz-picture-choice-wrapper">
<ul class="oct-quiz-picture-choice-options oct-quiz-picture-choice-options--ratio-square oct-quiz-picture-choice-options--text-below">
<li class="oct-quiz-picture-choice-options__option">
<div>text holder</div> // Rendered if text position is top
<div>empty img div</div> // This div holds an image as background
<div>text holder</div> // Rendered if text position is bottom
<div>empty div</div> // This div shows an border style
</li>
</ul>
</div> // Bottom content
</div>
</div>
Questions classes
Explainer screen
Wrapper:
oct-quiz-wrapper--explainer
Email opt-in page
Wrapper:
oct-quiz-wrapper--email
Input wrapper:
oct-quiz-email-wrapper
SMS opt-in page
Wrapper:
oct-quiz-wrapper--phone
Input wrapper:
oct-quiz-phone-wrapper
Free-form text question
Wrapper:
oct-quiz-wrapper--collect-text
Input wrapper:
oct-quiz-collect-text-wrapper
Multiple choice question
General wrapper:
oct-quiz-wrapper--multiple-choice
Options wrapper:
oct-quiz-multiple-choice-wrapper
Options:
oct-quiz-multiple-choice-options
Options - single item:
oct-quiz-multiple-choice-options__option
Options stacked:
oct-quiz-multiple-choice-options--stacked
Options horizontal:
oct-quiz-multiple-choice-options--horizontal
Options checkbox answers:
oct-quiz-multiple-choice-options--checkbox
Options radio answers:
oct-quiz-multiple-choice-options--radio
Picture choice question
General wrapper:
oct-quiz-wrapper--picture-choice
Options wrapper:
oct-quiz-picture-choice-wrapper
Options:
oct-quiz-picture-choice-options
Options - single item:
oct-quiz-picture-choice-options__option
Image:
oct-quiz-picture-choice-img
Image ratio option - square:
oct-quiz-picture-choice-options--ratio-square
Image ratio option - portrait:
oct-quiz-picture-choice-options--ratio-portrait
Image ratio option - landscape:
oct-quiz-picture-choice-options--ratio-landscape
Image ratio option - circle:
oct-quiz-picture-choice-options--ratio-circle
Image ratio option - custom:
oct-quiz-picture-choice-options--ratio-custom
Picture option text position - below:
oct-quiz-picture-choice-options--text-below
Picture option text position - above:
oct-quiz-picture-choice-options--text-above
Picture option no text:
oct-quiz-picture-choice-options--no-text
Results page HTML structure
Layout section
The code below represents the layout of a results page. There is no limit to the number of content blocks that can be added to a results page.
Each content block can only have one of each:
Top content holder
Products wrapper
Bottom content holder
There is no limit to the number of products that can be added inside a product wrapper.
<div class="oct-quiz-wrapper oct-quiz-wrapper--result-page">
<div class="oct-quiz-content">
<div>// result page Title</div>
<div>// result page subtitle</div>
<div class="oct-quiz-product-block oct-quiz-product-block--vertical oct-quiz-product-block--left">
<div>// Top content section</div>
<div class="oct-quiz-products">
// this div is a product holder
<div class="oct-quiz-products__item">
// this div represents an individual product
</div>
</div>
<div>// Bottom content section</div>
</div>
</div>
</div>
Image section
The image HTML contains 2 elements. The first one is a div wrapper.
The second div is an anchor with an image as a background and a link to the product page.
Several image ratio options are available and can be selected under the DISPLAY SETTINGS section of a content block.
<div class="oct-quiz-result-item__img-wrapper">
// We will display only one image ratio class name,
// and it will be the one you selected in the content block settings section
<a class="oct-quiz-result-item__img quiz-result-item__img--ratio-square"
href="href_to_product_page"
style="background-image: url("img_url_generated")">
</a>
</div>
Copy section
The copy section is an element that contains all of a product's copy. This includes the product title, description, and price.
Here's a breakdown of the HTML below:
The copy container is a div element that wraps the title, description, and pricing elements.
The title is an anchor and contains a link to the product page.
The description is a div element that contains the HTML of the product description.
The pricing is a div element that contains pricing as text.
<div class="oct-quiz-result-item__copy-wrapper">
<a class="oct-quiz-result-item__title"
href="href_to_product_page">
// Product title
</a>
<div class="oct-quiz-result-item__description">
// Description
</div>
<div class="oct-quiz-result-item__pricing">
// Pricing
</div>
</div>
Actions element section
This section contains all of the actions that items can have - buttons, quantity inputs, and dropdowns.
The HTML's structure starts with the main div wrapper (actions wrapper). Inside, a div element that holds all the content (actions content) is included.
The action content div element is not rendered for horizontal views.
Octane AI's content holder will hold all of the elements that contain buttons, inputs, or dropdowns.
The first div element is a variant wrapper (if the product is recommended with variants).
The second div element is a selling plans holder (if the Subscription Apps integration is enabled).
The third div element holds a quantity input field.
The rest of the div elements are action button holders (add to cart, checkout, or go to product page).
A maximum of 2 buttons can be included per product.
Button holders don't have classes.
<div class="oct-quiz-result-actions-wrapper">
<div class="oct-quiz-result-actions-content"> // This div is not rendered in horizontal view
<div class="oct-quiz-result-item__variant-wrapper">
<div class="oct-quiz-result-item__dropdown-mask">
<select>
<option value="0">Variant 1 copy</option>
<option value="1">Variant 2 copy</option>
</select>
</div>
</div>
<div class="oct-quiz-actions-selling-plans-wrapper">
// If you have subscription apps html it will be rendered here
// if you don't have subscription apps this html will not be rendered
</div>
<div class="oct-quiz-result-item__quantity">
<input type="number" min="1" value="1">
</div>
<div>
<button class="your_custom_button_classes">ADD TO CART</button>
</div>
<div>
<button class="your_custom_button_classes">Button 2</button>
</div>
</div>
</div>
Selling plans section
The selling plans section will only be rendered if the Subscription Apps integration is enabled and your product recommendations contain products with selling plans from those apps.
<div class="oct-quiz-actions-selling-plans-wrapper">
<div class="oct-quiz-selling-plans">
<div class="oct-quiz-selling-plans__radio-wrapper">
<!-- One-time purchase option -->
<div>
<label class="oct-quiz-selling-plans__radio-label">
<input type="radio" name="selling_plans_{generatedID}" value="false">
<span></span>
// One-time purchase text
</label>
</div>
<!-- Subscribe & save option -->
<div>
<label class="oct-quiz-selling-plans__radio-label">
<input type="radio" name="selling_plans_{generatedID}" value="true">
<span></span>
// Subscribe & save text
<div class="oct-quiz-selling-plans__help-wrapper">
<div class="oct-quiz-selling-plans__help-text">
// Your help text
</div>
<svgIcon/>
</div>
</label>
</div>
</div>
<!-- Delivery options -->
<div>
// There are multiple options for how children of this div are rendered
// 1. If there are multiple delivery options
<div class="oct-quiz-selling-plans__variant-wrapper">
<div class="oct-quiz-selling-plans__dropdown-mask">
<select>
<option value="15">Deliver every 15 days</option>
<option value="30">Deliver every 30 days</option>
</select>
</div>
</div>
// 2. If there is only one delivery option
<div>Deliver every 15 days</div>
</div>
</div>
</div>
Results page classes
Layout section
Quiz wrapper result page:
oct-quiz-wrapper--result-page
Content block:
oct-quiz-product-block
Products wrapper:
oct-quiz-products
Product/item:
oct-quiz-products__item
Vertical layout option:
oct-quiz-product-block--vertical
Horizontal layout option:
oct-quiz-product-block--horizontal
Left product alignment:
oct-quiz-product-block--left
Center product alignment:
oct-quiz-product-block--center
Right product alignment:
oct-quiz-product-block--right
Image section
Image wrapper:
oct-quiz-result-item__img-wrapper
Image:
oct-quiz-result-item__img
Image ratio option - square:
quiz-result-item__img--ratio-square
Image ratio option - portrait:
quiz-result-item__img--ratio-portrait
Image ratio option - landscape:
quiz-result-item__img--ratio-landscape
Image ratio option - custom:
quiz-result-item__img--ratio-custom
Copy section
Copy wrapper:
oct-quiz-result-item__copy-wrapper
Copy title:
oct-quiz-result-item__title
Copy description:
oct-quiz-result-item__description
Copy pricing:
oct-quiz-result-item__pricing
Actions element section
Actions wrapper:
oct-quiz-result-actions-wrapper
Actions content:
oct-quiz-result-actions-content
Variant wrapper:
oct-quiz-result-item__variant-wrapper
Dropdown mask:
oct-quiz-result-item__dropdown-mask
Actions wrapper for Recharge:
oct-quiz-actions-recharge-wrapper
Quantity wrapper:
oct-quiz-result-item__quantity
Selling plans section (if enabled)
Selling plans wrapper:
oct-quiz-actions-selling-plans-wrapper
Selling plans inner wrapper:
oct-quiz-selling-plans
Option/radio wrapper section:
oct-quiz-selling-plans__radio-wrapper
Radio options/label:
oct-quiz-selling-plans__radio-label
Help icon wrapper:
oct-quiz-selling-plans__help-wrapper
Help icon text:
oct-quiz-selling-plans__help-text
Delivery dropdown wrapper:
oct-quiz-selling-plans__variant-wrapper
Delivery dropdown mask:
oct-quiz-selling-plans__dropdown-mask