This article briefly explains where you can add CSS code to customize quiz styling with.
💡 What you'll learn
Where to add custom CSS for an Octane AI quiz (jump to section)
Enabling custom CSS for a quiz (jump to section)
💡 Prerequisites
Custom CSS can be enabled on Octane Plus or Enterprise plans.
Where to add custom CSS for an Octane AI quiz
To customize an Octane AI quiz with CSS code, you'll need to add the CSS code on your Shopify website.
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.
Enabling custom CSS for a quiz
Custom CSS will need to be enabled on a per quiz basis.
By default, quizzes have dynamic classes which means many of the CSS classes attached to elements in the quiz change each time the quiz is loaded.
Turning on custom CSS for a quiz will create static CSS classes that you can target consistently with custom code. You can also rename these classes inside of the editor, but this is optional and only recommended if you have a specific reason to do so (for example, if you have multiple quizzes that you want to apply different custom CSS styles to).
