All Collections
Developer Options
Custom CSS Explanation & Class Names
Custom CSS Explanation & Class Names

#custom-css #developer #quiz

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

This document includes explanations of Octane AI's quiz HTML structure, as well as the CSS class names that are assigned when the custom CSS option is enabled for a quiz.

This can be done with these quick steps:

  1. Open your quiz in the Octane AI quiz editor.

  2. In the quiz editor, navigate to Design and click on Custom CSS.

  3. Click on 'Enable custom class names'.

While CSS class names can be customized or even changed to match existing class names on your website, the ones below will be the default class names present in each Octane AI quiz when custom CSS is enabled.

πŸ’‘ What you'll learn

πŸ’‘ Prerequisites

Custom CSS can be enabled on Octane Plus plans.

We recommend this feature only if you're savvy with CSS & HTML development, or have access to a developer. While Octane AI does support custom CSS, our support team is unable to assist with issues applying code beyond the guidance provided in this document.

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

Quizzes have a main wrapper in which Octane AI's script starts. It has a statistic class called "octane-ai-quiz-rendered" which cannot be changed.

<div class="octane-ai-quiz-rendered">
// Wrapper will be rendered inside

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 of it.

<div class="oct-quiz-wrapper">
// Content holder will be rendered inside

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

The close button is always rendered as a first element inside 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>
<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>

πŸ” Global wrapper classes

Wrapper class name:


Content class names:


Close quiz popup (only for full screen):


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.

Below you can see how each element is rendered.

The AI personalized message can have a varying length, since it's AI-powered:

<div class="oct-quiz-ai-text">
// Text will be rendered inside


<div class="oct-quiz-title">
// Text will be rendered inside


<div class="oct-quiz-heading">
// Text will be rendered inside


<div class="oct-quiz-subheading">
// Text will be rendered inside

Body text:

<div class="oct-quiz-body-text">
// Text will be rendered inside

Caption text:

<div class="oct-quiz-caption-text">
// Text will be rendered inside

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

πŸ” Text classes

AI personalized message:


Title class names:


Heading class names:


Subheading class names:


Body text class names:


Caption text class names:


Rich text editor class names:


Buttons HTML structure

Every button is wrapped inside the div element.

<div class="oct-quiz-btn-wrapper">
// Button will be generated inside

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

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 class names

Buttons wrapper

Buttons wrapper class name:


Add all to cart button class name:


General / all buttons class name:


Buttons style

Primary button class name:


Secondary button class name:


Primary text button class name:


Secondary text button class name:


Buttons size

Small buttons class name:


Medium buttons class name:


Large buttons class name:


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 while 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

πŸ” 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 of 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" />
// Bottom content

πŸ” 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's are items/answers.

Every LI has three divs. The first one represents visible text. The second and third LI's 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)
// Bottom content

πŸ” 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's for items and answers.

Three divs are included inside of 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 border style. The number and order of divs can be different, which depends on 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
</div> // Bottom content

Questions classes

Explainer screen



Email opt-in page



Input wrapper:


SMS opt-in page



Input wrapper:


Free form text question



Input wrapper:


Multiple choice question

General wrapper:


Options wrapper:




Options - single item:


Options stacked:


Options horizontal:


Options checkbox answers:


Options radio answers:


Picture choice question

General wrapper:


Options wrapper:




Options - single item:




Image ratio option - square:


Image ratio option - portrait:


Image ratio option - landscape:


Image ratio option - circle:


Image ratio option - custom:


Picture option text position - below:


Picture option text position - above:


Picture option 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 of a products 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>// Bottom content section</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"
style="background-image: url("img_url_generated")">

πŸ” Copy section

The copy section is an element that contains all of 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 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"
// Product title
<div class="oct-quiz-result-item__description">
// Description
<div class="oct-quiz-result-item__pricing">
// Pricing

πŸ” 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 Recharge holder (if the Recharge 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">
<option value="0">Variant 1 copy</option>
<option value="1">Variant 2 copy</option>
<div class="oct-quiz-actions-recharge-wrapper">
// If you have recharge html it will be rendered here
// if you don't have recharge this html will not be rendered
<div class="oct-quiz-result-item__quantity">
<input type="number" min="1" value="1">
<button class="your_custom_button_classes">ADD TO CART</button>
<button class="your_custom_button_classes">Button 2</button>

πŸ” Recharge section

The Recharge section will be only be rendered if Octane AI's Recharge integration is enabled, and is present on the store.

<div class="oct-quiz-recharge">
<div class="oct-quiz-recharge__radio-wrapper">
<label class="oct-quiz-recharge__radio-label">
<input name="recharge_{generatedID}" type="radio" value="onetime">
// One-time purchase text
<label class="oct-quiz-recharge__radio-label">
<input name="recharge_{generatedID}" type="radio" value="subsave" checked="">
// Subscribe and save text
<div class="oct-quiz-recharge__help-wrapper">
<div class="oct-quiz-recharge__help-text">
// Your help text
// There are multiple options how we render childrens of this div

// 1. Option, if there is multiple options
// This elements uses the same classes from item
<div class="oct-quiz-result-item__variant-wrapper">
// This elements uses the same classes from item
<div class="oct-quiz-result-item__dropdown-mask">
<option value="15">Deliver every 15 days</option>
<option value="30">Deliver every 30 days</option>

// 2. Option, if there is only 1 delivery option

<div>Deliver every 15 days</div> // we only render a div with the text

Results page classes

Layout section

Quiz wrapper result page:


Content block:


Products wrapper:




Vertical layout option:


Horiztonal layout option:


Left product alignment:


Center product alignment:


Right product alignment:


Image section

Image wrapper:




Image ratio option - square:


Image ratio option - portrait:


Image ratio option - landscape:


Image ratio option - custom:


Copy section

Copy wrapper:


Copy title:


Copy description:


Copy pricing:


Actions element section

Actions wrapper:


Actions content:


Variant wrapper:


Dropdown mask:


Actions wrapper for Recharge:


Quantity wrapper:


Recharge section (if enabled)

Recharge wrapper:


Option/radio wrapper section:


Radio options/label:


Help icon wrapper:


Help icon text:


Did this answer your question?