Design a quiz with custom code

The theme settings cover colors, fonts and buttons. When you want the quiz to look completely like your own design, give the theme custom code: one stylesheet for the whole quiz and, if you like, your own HTML for the start page, the question screens and the answers. bluebarry keeps doing everything the quiz does, so you only decide how it looks.

Open Custom code

1. Go to Quizzes, click Edit on your quiz and open the Design tab in the left panel.
2. Click Edit on the theme this quiz uses. Custom code only opens for that theme, because the editor previews this quiz.
3. Scroll to the bottom of the theme settings and click Custom code.

The editor has four tabs: CSS, Start page, Question and Answer. Next to them is a live preview of this quiz with a desktop and a mobile button. The line at the top names the quizzes that have this theme selected. If it is your store's default theme, quizzes without a theme of their own use it too. An empty tab keeps the built-in layout, and each tab has a button to start from an example or the default layout. Your code saves on its own shortly after you stop typing, as long as it has no errors.

CSS

One stylesheet styles the whole quiz: the header, the start page, the questions, the loading screen, the pre-result page, the standard result page and the error page. It only applies inside the quiz, and it wins over the theme's colors without !important. Motion and position properties, such as transform, opacity and transition, keep their normal weight so the quiz animations keep working.

.bb-q-answer {
  border: 1px solid var(--bb-color-title);
  border-radius: var(--bb-radius);
}
.bb-q-answer[data-selected] {
  background: var(--bb-color-button);
  color: var(--bb-color-button-text);
}
@media (max-width: 480px) {
  .bb-q-answers { grid-template-columns: 1fr; }
}

• A width @media query follows the width of the quiz, not the browser window, so it also works in a pop-up, a side panel and the mobile preview.
• Style states with [data-selected] on a selected answer, aria-pressed on multi-select answers, :disabled on buttons that cannot be used yet and aria-invalid on an input with an error.
• The theme's settings are available as variables you can read: --bb-color-button, --bb-color-button-text, --bb-color-background, --bb-color-title, --bb-color-accent, --bb-color-answer, --bb-color-answer-text, --bb-font-body, --bb-font-title and --bb-radius.
• Classes that start with bb-q-i- are internal and can change at any time. Give classes you add yourself a name without the bb- prefix.

The question screen also has data-bb-display-type, such as standard, picture or dropdown, so you can style one question type on its own. A custom result page (beta) has its own code and does not use the result page classes.

Start page

The start page template replaces the layout of the start page. It is Handlebars, so {{title}} prints the start page title. You can use title, description, buttonText, imageUrl, logoUrl and language. It needs a button or link with data-bb-start, which starts the quiz.

<div class="hero">
  {{#if imageUrl}}<img src="{{imageUrl}}" alt="">{{/if}}
  <h1>{{title}}</h1>
  <p>{{description}}</p>
  <button type="button" data-bb-start>{{buttonText}}</button>
</div>

Question

The question template replaces every question screen. It needs one empty element with data-bb-answers: bluebarry puts the answers there, whatever the question type, from choices and pictures to a dropdown, input fields, the consent checkbox and error messages. Add an empty element with data-bb-actions to decide where the Next and Skip buttons go. You can use title, description, imageUrl, step (the question number in the shopper's path) and progress (0 to 100).

<p class="step">Question {{step}}</p>
<h2>{{title}}</h2>
{{#if description}}<p>{{description}}</p>{{/if}}
<div data-bb-answers></div>
<div data-bb-actions></div>

Answer

The answer template is the inside of each standard or picture answer. bluebarry renders the button around it, so use text and images only, no links, buttons or form fields. You can use text, description, imageUrl and index. Dropdown options and input fields keep their built-in look.

{{#if imageUrl}}<img src="{{imageUrl}}" alt="">{{/if}}
<span class="label">{{text}}</span>
{{#if description}}<span class="note">{{description}}</span>{{/if}}

Buttons and scripts

• In the start page and question templates, give your own button data-bb-back, data-bb-restart or data-bb-close to make it go back, restart the quiz or close it.
• These two templates can hold an inline <script>. It runs in the live quiz and in the preview. Scripts with src or type="module" are not allowed.
• The quiz sends a bluebarry:quiz event on the template and on the document. Its detail.type is screen when a screen opens, select when a multi-select choice changes and answer when an answer is sent.

<div data-bb-answers></div>
<p class="hint">Pick as many as you like</p>
<script>
  const root = document.currentScript.closest('.bb-q-template');
  root.addEventListener('bluebarry:quiz', (event) => {
    if (event.detail.type === 'select') {
      root.querySelector('.hint').hidden = event.detail.answerIds.length > 0;
    }
  });
</script>

What bluebarry keeps handling

Your code decides where things go and how they look. bluebarry still handles selecting answers, multi-select, validation, consent, sending answers and trying again, back, skip, branching, analytics and the cart. A script cannot select answers or send them: use the slots.

Rules and limits

The editor checks your code as you type and shows what to fix under the field. Code with an error is not saved, so a live quiz never gets a broken design. It refuses:

• A start page without a data-bb-start button or link, or a question template without exactly one empty data-bb-answers element.
• A <style> element in a template. Put CSS in the CSS tab.
• Links, buttons, form fields or scripts in the answer template.
• CSS that hides the answers or the Next button.
• @keyframes names the quiz uses itself, such as spin, pulse or names that start with advisor-. Pick a name of your own, such as brand-fade.

If a template's slots still do not render on a screen, for example because the answers slot sits inside an {{#if}}, that screen falls back to the built-in layout. The CSS can be up to 40,000 characters, the start page and question templates 60,000 each and the answer template 20,000.

Ask Barry

Click Ask Barry at the top of the editor and describe the look you want, for example "Show the answers as cards with a thin border" or "Match the quiz to the style of my store". Barry writes the CSS and templates, can set a Google Font for the titles and the body text. He saves each change straight away, then checks it in previews and fixes what he finds. Click Show code to see what he wrote. For a different color, font size, corner radius or logo, Barry changes the theme settings instead of writing CSS, because custom CSS for those would override the settings. You can change them yourself in the theme settings too. See Meet Barry.

Good to know

• The code belongs to the theme, so it changes every quiz that uses the theme. It is not part of a quiz version: you do not publish it. The preview shows changes right away, and live quizzes pick them up within about an hour. To try something on one quiz only, duplicate the theme first. See Customize the quiz theme and layout.
• Once a theme has custom code, the header bar above the quiz turns transparent so your background runs to the top. Give .bb-q-header-bar a background for a solid bar.
• The quiz canvas in the editor keeps the built-in layout. Use the preview in Custom code or Preview to see your design.
• Custom code works the same on Shopify, WooCommerce, Magento and CCV Shop, because the quiz runs in its own frame on every platform.