Octane AI features a large range of design settings that help make your quiz as on-brand as possible without requiring any code (advanced developer options are supported too).
Use this guide as a tour through Octane AI's design settings and the things you should know.
Locating design settings
The vast majority of Octane AI's design settings can be found under the Design tab in Octane AI's quiz editor.
Here's a quick summary of what each section of the Design tab does.
What it does
Set the alignment of elements in the quiz as well as content width & autoscroll.
Set the font name, color, weight and size of text in your quiz.
Colors & styles
Set the color of elements in your quiz (except text, which is in Typography).
Background image settings
Upload a general background image for the quiz.
Edit the vertical spacing between elements in the quiz.
Transitions and animations
Toggle page & button hover animations.
Set custom CSS class names for elements in the quiz.
Answer display settings
Design settings for answers can be found in the
DISPLAY SETTINGS menu found under
ANSWERS in every picture choice question.
These settings let you change:
Image ratio: the shape of the image answer
Image scaling: how your image file fits the answer space
Text position: where the answer text appears in relation to the image
Content width: how large each image answer is
Answers per row: how many image answers are displayed per row
The content width of answers as well as how many answers per row can fit is related to the size of the space that the quiz is published in.
Regular text-based multiple choice questions will have the option to select what kind of text-based options the question displays.
Product display settings
Design settings for product appearance can be found inside of content blocks. Click inside of a
RESULTS PAGE, then click into a
CONTENT BLOCK holding products to find its
DISPLAY SETTINGS menu.
These settings let you change:
Image ratio: the shape of the product image
Image scaling: how your image file fits the product space
Product display: the formatting of each product
Content alignment: the alignment of content in each product
Product size: how large each product is
Max products per row: the maximum number of products per row
Optional product information: toggle the information that displays per product
Much like answer content, the number of products you can display per row may depend on the amount of space your embedded quiz allows for.
Working with fonts
Quizzes have 3 options when it comes to fonts:
Inherit font settings from your website
Manually assign website fonts to quiz content
Use the quiz's default fonts
You can view exact font sizes for quiz elements here:
Inheriting font settings
To inherit font settings, simply to go to:
Design > Typography
SETTINGS, you'll be able to check an option labeled "Inherit font family from destination website".
When using this setting, fonts will be applied to your quiz according to their assigned hierarchy in your website's theme code.
In some cases, fonts may not apply the way you intend them to, in which case we recommend using the next method of manually assigning fonts.
Manually assigning fonts to quiz content
In the Typography section, every piece of editable text in the quiz also has an option labeled "Use custom font family".
By checking this, you can type in the exact font family you want to apply to that section of text in your quiz. The name of the font as it appears in your website code should be used.
You should avoid using the
INHERIT FONTS option if you're also manually assigning fonts.
Images in quizzes
Background images in quizzes can use a different version for mobile vs. desktop devices. Currently, only background images can use this option.
Full-page quiz embeds are recommended when using a background image. This is because the shape of your quiz embed will flex with the size of the space that the quiz is shown in.
When quizzes use page body embeds, this results in a quiz space that constantly changes with each device and browser window that views the page. This happens in full-page embeds as well but to a much lesser extent, helping your background image keep a more consistent aspect ratio.
For details on image sizing and formats, check out this article:
What is max content width for?
LAYOUT settings in your quiz allow you to set a max content width.
This setting is important for page body embeds, where the width of the embedded content area should match the max content width.
Making the max content width exceed the size of the page's embedded content area won't make the quiz larger than what the page itself allows, so the max content width should only match the content area of the actual webpage.
If you're unsure of what this is, you can leave it at the default value.