Common code customizations

Learn how to customize Quiz Kit with custom CSS, HTML, and JavaScript.

Quiz Kit allows you to add custom CSS and JavaScript to fine-tune the look and behavior of your quiz. Many merchants and developers use these options for branding or advanced customization.

Important:

Custom code is use-at-your-own-risk

Custom code is use-at-your-own-risk. Quiz Kit’s classes, IDs, and DOM structure may change in any release, which can break custom CSS or scripts. Targeting element IDs is generally safer than div classes, but there’s still some risk. Quiz Kit does not notify users of changes, so you should review and maintain any custom code regularly.

In this section

• Adding custom code and JavaScript

• Common quiz code customizations

  • Functional/behavioural code

  • Content and layout (custom HTML)

• Common custom JavaScript events

---

Adding custom code

There are several ways to can add custom code to your quiz. See the Adding custom code to quizzes are page for full instructions.

---

Common quiz code customizations

Quiz Kit supports custom code for merchants and developers who want more control over styling or behavior. Always duplicate your quiz, and your theme if editing theme code, before making any changes.

Note

Code customizations are only visible on the storefront, not within the quiz builder preview.

Functional/behavioral code

Use this type of code to change how your quizzes behave, like button colors and cart behavior. Always test carefully and keep backups of your theme and quiz.

Important:

Only proceed if you’re comfortable with code

Incorrect or outdated code can break your quiz display. If you're not confident in reviewing or updating custom code, work with a developer who can support you when updates occur.

Duplicate your quiz and theme first Always create a duplicate of your quiz, and ideally your theme if you're editing theme code, before making any code changes. This gives you a safe version to revert to if something breaks.

Customization	Global CSS	JavaScript (JS)
Questions to appear vertically inline (video tutorial)	Button inline (all quiz pages) [id*="quiz-kit-question-grid"] > div > div { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 16px !important; justify-content: center !important; } [id*="quiz-kit-question-multiple-choice"] { width: 475px !important; flex-shrink: 0 !important; }	N/A
Button hover color (video tutorial)	[id*="quiz-kit-question-multiple-choice"] button:hover, #quiz-kit-intro-button:hover { background-color: #000000!important; color: black !important; outline: none !important; }	N/A
Add background image to the results page (video tutorial)	Add background image to the entire result page #quiz-kit-result-advanced-wrapper { background-image: url('IMAGE URL HERE'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; min-height: 100vh; } Optional: Add overlay for better text readability #quiz-kit-result-advanced-wrapper::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.8); /* White overlay with 80% opacity */ z-index: 0; }	N/A
Full Ajax cart integration	N/A	Full Ajax cart integration sometimes requires custom coding inside of your Shopify theme directory. You or your developer need to trigger “cart refresh + cart open”. Contact support for assistance: [email protected] Code required: <script> document.addEventListener(‘quizKitAddToCartSuccess’, function () { // insert cart refresh + cart open code here }, false); </script>

Content and layout (custom HTML)

Use HTML for paragraphs, line breaks, lists, links, and text formatting.

Note: Most text fields in Quiz Kit support HTML. You can add HTML directly to the copy you want to edit, such as paragraphs, lists, links, and formatting.

Customization	HTML
Paragraph	<p>This is a paragraph.</p> <p>This is another paragraph.</p>
Line break inside text	<br>
Bold / Italic text	<b>Bold text</b> <strong>Important text</strong> <i>Italic text</i>
Unordered list	<ul> <li>First item</li> <li>Second item</li> </ul>
Ordered list	<ol> <li>Step one</li> <li>Step two</li> </ol>
Links	<a href="https://example.com">Link text</a>

---

Common custom JavaScript events

The following are JavaScript events that you can use for different purposes.

1. "quizKitQuestionLoaded" event. This event fires when your customer lands on the question page. You can use this event to add custom labels, text, and content to particular questions. This event will contain question data in the the following format:

{ 
  question: { all question data will be here }
}

Add the code below to catch this event:

document.addEventListener('quizKitQuestionLoaded', function (e) {
  // console.log(e.detail);  
  // e.detail will contain question data
}, false);

1. "quizKitCapturePageLoaded" event. This event fires when your customer lands on the email capture page. You can add additional checkboxes or other elements to this page. Add the code below to catch this event:

document.addEventListener('quizKitCapturePageLoaded', function (e) {
  // add your code here 
}, false);

1. "quizKitResultsPageLoaded" event. This event fires when your customer lands on the result page. You can use this event to send your quiz data anywhere. This event will contain quiz data in the following format:

{ 
  answers: [questions names and chosen answers],
  email: 'customer email',   
  result: { all the data about current result page },
  recommendedProducts: [recommended products], 
}

Add the code below to catch this event:

document.addEventListener('quizKitResultsPageLoaded', function (e) {  
  // console.log(e.detail); 
  // loop through the data (e.detail) and send it anywhere or use it for your needs
}, false);

1. "quizKitAddToCart" event. This event fires each time your customers click the "Add to bag" button on your quiz result page. This event fires before items are actually added to cart.

Add the code below to catch this event:

document.addEventListener('quizKitAddToCart', function (e) { 
  // e.detail - contains an array of product items that will be added to cart.
}, false);

1. "quizKitAddToCartSuccess" event. This event fires right after items are added to cart. You can use this event to create a direct connection with your Theme's Ajax (Slide out) cart.

Add the code below to catch this event:

document.addEventListener('quizKitAddToCartSuccess', function (e) {
  // code for refreshing your Ajax cart and opening it here
}, false)