Adding Custom CSS to Your Quiz

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):

Open the Quizify editor for a quiz
Go to the Design tab
Select the Custom CSS category
You will see a text area where you can enter CSS rules
Write your CSS rules and save

Global custom CSS (Growth plan and above):

Open Quizify from your Shopify admin
Go to Settings → Design
Find the Custom CSS section
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:

.question-heading {
  color: #ff0000 !important;
}

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:

Open your Shopify store in a browser
Navigate to a page where the quiz is embedded
Right-click on the quiz element you want to style
Select Inspect (or press F12 to open browser developer tools)
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

.question-description {
  margin-bottom: 12px;
}

Custom Hover State for Answer Cards

.answer-text:hover {
  border-color: #0056b3;
  background-color: #e8f0fe;
}

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.

Frequently asked questions

Can I use CSS variables or custom properties?

Standard CSS custom properties (variables) can be used in the custom CSS field — for example, --primary-color: #0056b3;. However, their availability depends on how Quizify's own styles are structured. In some cases, Quizify may use its own CSS variables that you can override.

Can I use custom CSS to hide specific elements in the quiz?

Yes. You can target any element in the quiz using CSS and set display: none to hide it. Use browser developer tools to identify the correct class name or selector for the element you want to hide, then write the rule in the custom CSS field.

Does my custom CSS override Quizify's default styles?

Your custom CSS can override Quizify's defaults when your selectors are specific enough or when you use !important. If a rule is not being applied, inspect the element in your browser to understand how Quizify's default styles are structured and write a more specific selector or add !important to the relevant property.

Where do I add custom CSS to my Quizify quiz?

Go to the Design tab in the Quizify editor and select the Custom CSS category. A text area is provided where you can write CSS rules. Save your settings and use Preview to see the effect of your changes on the quiz.

Which plan do I need to use Custom CSS?

Custom CSS is available on the Growth plan and above. It is not available on the Free or Starter plans. Upgrade to Growth or above to access the Custom CSS category in the Design tab.