Skip to main content
If Quizify’s built-in design settings do not cover a specific styling need, you can write custom CSS rules to override or extend the default quiz styles. This is an advanced option intended for users who are comfortable writing CSS.

​
Plan Requirement

Custom CSS is available on the Growth plan and above. It is not available on the Free or Starter plans. If you are on the Free or Starter plan and need advanced styling beyond the built-in design settings, you will need to upgrade to Growth or above to access the Custom CSS option.

​
Where to Add Custom CSS

Per-quiz custom CSS (Pro plan and above — Custom CSS requires Growth and above):
  1. Open the Quizify editor for a quiz
  2. Go to the Design tab
  3. Select the Custom CSS category
  4. You will see a text area where you can enter CSS rules
  5. Write your CSS rules and save
Global custom CSS (Growth plan and above):
  1. Open Quizify from your Shopify admin
  2. Go to Settings → Design
  3. Find the Custom CSS section
  4. Write your CSS rules and save
Your CSS is applied to the quiz on the storefront and in Preview.

​
How Quizify’s CSS Specificity Works

Quizify applies its default styles using its own CSS selectors. Your custom CSS rules will override Quizify’s defaults when your selectors are specific enough or when they appear later in the stylesheet cascade. If your rule is not taking effect, try adding the !important flag to the property — for example:
Use !important sparingly — it can make future updates harder to manage. A better approach is to match or exceed Quizify’s selector specificity.

​
How to Find CSS Selectors

To find the correct CSS selectors for quiz elements:
  1. Open your Shopify store in a browser
  2. Navigate to a page where the quiz is embedded
  3. Right-click on the quiz element you want to style
  4. Select Inspect (or press F12 to open browser developer tools)
  5. Examine the HTML structure to identify the class names and IDs used by Quizify
Once you have the selector, you can write a CSS rule targeting that element in the custom CSS field.

CSS class names in Quizify may be updated in future app versions. If a CSS customisation stops working after a Quizify update, re-inspect the element in your browser to find the updated selector.

​
Common CSS Customisations

​
Adjusting Spacing Between Questions and Answers

​
Custom Hover State for Answer Cards

​
Custom CSS Requires Basic CSS Knowledge

Using custom CSS requires familiarity with CSS syntax, selectors, and properties. If you are not confident writing CSS, it is recommended to use Quizify’s built-in design settings instead — they cover the most common styling needs without requiring any code.