Skip to content

How to Customize the Quiz Design

You can change how the quiz looks, to fit your store. This article covers the built-in design settings, the question and choice settings, and custom CSS and JavaScript.

Quiz Design Options

Quiz design tab

Basic customizations

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign

In the Quiz design section of the quiz builder you can change how the quiz Questions or the Results Page look.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_toggle

Switch between previews of the quiz questions and the results page to see your customizations in action as you edit.

Choose from a selection of predefined color schemes for your quiz or click Change to pick a new scheme.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_colorscheme

That sets a tone to match your brand.

The Quiz design section is divided into two main customization categories: Basic and Advanced.

Basic - The basic menu of quiz design customization. Here you can edit the quiz colors, fonts, change the navigation options, add animations or a background image.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic

Typography - Pick a font for your quiz from the list.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_font

Note

In the Built for Shopify version, setting the font to Inherit takes the heading and body fonts from your Shopify theme.

Primary Colors - Click on the color to change it.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_primarycolors

Select a color from the picker to change it.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_colors_picker

Choices - Click the color to change it.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_choices

Inputs - Click the color to change it.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_inputs

Background - Change the background color by clicking on the color. Adjust the background opacity with the slider or upload a background image by clicking Select image.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_background

Once the background image is uploaded, you can adjust the opacity with the slider.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_background_imageuploaded

Change - Click to change the background image.

Remove - Click to remove the background image.

Opacity - Adjust the opacity of the background image.

Navigation - Change the colors of the Navigation bar background, text and border by clicking a color.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_basic_navigation

Show progress bar - Uncheck to hide the progress bar.

Show progress percentage - Uncheck to hide the % text from the progress bar.

Info

The texts of the navigation bar can be changed in quiz settings > content.

Transitions - Choose the transition effect for the quiz.

manual_shopifyv2_quizdesign_transitions

Slide up/down - Select this option to make the quiz slide up and down.

Slide left/right - Select this option to make the quiz slide left and right.

  1. Open your quiz and go to the Quiz Design tab. It controls how the Questions and the Results Page look.
  2. Choose one of the pre-designed themes in the My Themes tab, or build your own.

  3. Open the theme editor to set the color palette, the font and a default background image. quiz builder quiz design edit theme

    • Wine - Displays the name of your current theme.
    • Font - Shows a dropdown of available fonts. Pick a font from the list to change it.
    • Question - Opens a color menu for the color of quiz questions. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Choices - Opens a color menu for the color of quiz choices. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Button - Opens a color menu for the quiz buttons, such as next, start quiz and add to cart. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Background - Opens a color menu for the quiz background. You can add a custom color by pasting the #number of the color (for example, #ecb3b3).
    • Background image - Click "Add" to upload a background image. Image should be max 1000px x 1000px and 2MB. An extra menu appears once activated.
    • Background Opacity - A slider that sets the opacity of the uploaded background image.
    • Custom CSS - Opens a CSS console, where you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS. To find a selector for the element, inspect it in your browser by right-clicking.

  4. My Themes: Every theme you create or edit appears in the My Themes tab. quiz builder quiz design my themes

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

  1. Open your quiz and go to the Quiz Design tab. It controls how the Questions and the Results Page look.
  2. Choose one of the pre-designed themes in the My Themes tab, or build your own.

  3. Open the theme editor to set the color palette, the font and a default background image. quiz builder quiz design edit theme

    • Wine - Displays the name of your current theme.
    • Font - Shows a dropdown of available fonts. Pick a font from the list to change it.
    • Question - Opens a color menu for the color of quiz questions. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Choices - Opens a color menu for the color of quiz choices. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Button - Opens a color menu for the quiz buttons, such as next, start quiz and add to cart. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Background - Opens a color menu for the quiz background. You can add a custom color by pasting the #number of the color (for example, #ecb3b3).
    • Background image - Click "Add" to upload a background image. Image should be max 1000px x 1000px and 2MB. An extra menu appears once activated.
    • Background Opacity - A slider that sets the opacity of the uploaded background image.
    • Custom CSS - Opens a CSS console, where you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS. To find a selector for the element, inspect it in your browser by right-clicking.

  4. My Themes: Every theme you create or edit appears in the My Themes tab. quiz builder quiz design my themes

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

  1. Open your quiz and go to the Quiz Design tab. It controls how the Questions and the Results Page look.
  2. Choose one of the pre-designed themes in the My Themes tab, or build your own.

  3. Open the theme editor to set the color palette, the font and a default background image. quiz builder quiz design edit theme

    • Wine - Displays the name of your current theme.
    • Font - Shows a dropdown of available fonts. Pick a font from the list to change it.
    • Question - Opens a color menu for the color of quiz questions. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Choices - Opens a color menu for the color of quiz choices. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Button - Opens a color menu for the quiz buttons, such as next, start quiz and add to cart. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Background - Opens a color menu for the quiz background. You can add a custom color by pasting the #number of the color (for example, #ecb3b3).
    • Background image - Click "Add" to upload a background image. Image should be max 1000px x 1000px and 2MB. An extra menu appears once activated.
    • Background Opacity - A slider that sets the opacity of the uploaded background image.
    • Custom CSS - Opens a CSS console, where you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS. To find a selector for the element, inspect it in your browser by right-clicking.

  4. My Themes: Every theme you create or edit appears in the My Themes tab. quiz builder quiz design my themes

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

  1. Open your quiz and go to the Quiz Design tab. It controls how the Questions and the Results Page look.
  2. Choose one of the pre-designed themes in the My Themes tab, or build your own.

  3. Open the theme editor to set the color palette, the font and a default background image. quiz builder quiz design edit theme

    • Wine - Displays the name of your current theme.
    • Font - Shows a dropdown of available fonts. Pick a font from the list to change it.
    • Question - Opens a color menu for the color of quiz questions. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Choices - Opens a color menu for the color of quiz choices. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Button - Opens a color menu for the quiz buttons, such as next, start quiz and add to cart. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Background - Opens a color menu for the quiz background. You can add a custom color by pasting the #number of the color (for example, #ecb3b3).
    • Background image - Click "Add" to upload a background image. Image should be max 1000px x 1000px and 2MB. An extra menu appears once activated.
    • Background Opacity - A slider that sets the opacity of the uploaded background image.
    • Custom CSS - Opens a CSS console, where you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS. To find a selector for the element, inspect it in your browser by right-clicking.

  4. My Themes: Every theme you create or edit appears in the My Themes tab. quiz builder quiz design my themes

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

  1. Open your quiz and go to the Quiz Design tab. It controls how the Questions and the Results Page look.
  2. Choose one of the pre-designed themes in the My Themes tab, or build your own.

  3. Open the theme editor to set the color palette, the font and a default background image. quiz builder quiz design edit theme

    • Wine - Displays the name of your current theme.
    • Font - Shows a dropdown of available fonts. Pick a font from the list to change it.
    • Question - Opens a color menu for the color of quiz questions. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Choices - Opens a color menu for the color of quiz choices. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Button - Opens a color menu for the quiz buttons, such as next, start quiz and add to cart. You can add a custom color by pasting the #number of the color (for example, #ecb3b3)
    • Background - Opens a color menu for the quiz background. You can add a custom color by pasting the #number of the color (for example, #ecb3b3).
    • Background image - Click "Add" to upload a background image. Image should be max 1000px x 1000px and 2MB. An extra menu appears once activated.
    • Background Opacity - A slider that sets the opacity of the uploaded background image.
    • Custom CSS - Opens a CSS console, where you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS. To find a selector for the element, inspect it in your browser by right-clicking.

  4. My Themes: Every theme you create or edit appears in the My Themes tab. quiz builder quiz design my themes

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

Advanced customizations (CSS)

The Advanced panel in Quiz design takes custom CSS, so a developer can override the default styles. This option provides maximum control over every detail of your quiz’s appearance.

manual_shopifyV2_quizbuilder_quizbuilder_quizdesign_advanced

Get help with custom CSS

Click ✨Get help with custom CSS to open a chat window with the Quiz Copilot AI. It can directly make design changes with CSS code!

Click Save at the top right to apply your changes to the live and preview quiz.

To add custom CSS code to one quiz section only, go to Question Settings.

To add custom CSS code to a specific results page only, go to Results Page Settings.

Tips for using CSS

  • Check the App CSS Structure: For a detailed overview of the CSS structure of the app and CSS examples, see the App CSS Structure reference.

  • Find an Element Selector: Right-click the element in your browser and select Inspect to see its selector.

  • Add Specificity to CSS Rules: Use specific selectors to apply styles only to particular parts of your quiz.

    Example: Add Specificity to CSS Rules

    #quiz p { color: red; }
    This rule will change the color of all paragraphs in the quiz to red.

    To style a paragraph in only one specific question, use the question's unique ID:

    #question-AbC7Zde p { color: red; }
    In this case, the color of the paragraph will change to red only for the question with ID AbC7Zde. You can find a question’s ID in Quiz Builder > Question Settings.

Example: Upload a Google Font with CSS

  1. Find a Google Font: To upload a custom Google Font to the quiz, first navigate to the font’s page. For example: Quicksand.
  2. Copy Font code: Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

  3. Write CSS code: To add a Google font to the quiz elements (h1-h6, p) use this sample code:

    Example: Google Font Code

    @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.quicksand-font {
font-family: "Quicksand", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, button, div{
font-family: 'Quicksand', sans-serif ;
}

  4. Paste the code: Open Quiz design > Custom CSS. Paste the code at the top of the stylesheet.

  5. Publish the changes: Click the top-right Publish / Save button to apply the changes to the preview/live quiz.

Via the CSS console, you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS.

  1. Open the Quiz Design tab: Open your quiz and navigate to the Quiz Design tab.
  2. Open the CSS console: In the theme editor, click on the add button in the Custom CSS section. This should open an input where you can add your custom CSS to the quiz. Your developer will be able to add custom CSS which will override the default styles of the quiz.
  3. Find an element selector: To find a selector for the element, inspect it in your browser by right-clicking.

  4. Add specificity to your CSS rules: Scope a rule so it applies to the quiz only, or to one question. For example: 

    #quiz  p {color: red;}

    will change the color of all the paragraphs in the quiz to red.

    #question-AbC7Zde  p {color: red;}

    will change the color of a paragraph to red ONLY for question AbC7Zde, where AbC7Zde is the question ID. You can find a specific question ID in Quiz Builder > Question settings.

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

Upload a Google Font with CSS

  1. Find a Google Font: To upload a custom Google Font to the quiz, first navigate to the font’s page. For example: Quicksand.
  2. Copy Font code: Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

  3. Write CSS code: To add a Google font to the quiz elements (h1-h6, p) use this sample code:

    Example: Google Font Code

    @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.quicksand-font {
font-family: "Quicksand", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, button, div{
font-family: 'Quicksand', sans-serif ;
}

  4. Paste the code: Open Quiz Design > Custom CSS. Paste the code at the top of the stylesheet.

  5. Publish the changes: Click the top-right Publish / Save button to apply the changes to the preview/live quiz.

Via the CSS console, you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS.

  1. Open the Quiz Design tab: Open your quiz and navigate to the Quiz Design tab.
  2. Open the CSS console: In the theme editor, click on the add button in the Custom CSS section. This should open an input where you can add your custom CSS to the quiz. Your developer will be able to add custom CSS which will override the default styles of the quiz.
  3. Find an element selector: To find a selector for the element, inspect it in your browser by right-clicking.

  4. Add specificity to your CSS rules: Scope a rule so it applies to the quiz only, or to one question. For example: 

    #quiz  p {color: red;}

    will change the color of all the paragraphs in the quiz to red.

    #question-AbC7Zde  p {color: red;}

    will change the color of a paragraph to red ONLY for question AbC7Zde, where AbC7Zde is the question ID. You can find a specific question ID in Quiz Builder > Question settings.

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

Upload a Google Font with CSS

  1. Find a Google Font: To upload a custom Google Font to the quiz, first navigate to the font’s page. For example: Quicksand.
  2. Copy Font code: Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

  3. Write CSS code: To add a Google font to the quiz elements (h1-h6, p) use this sample code:

    Example: Google Font Code

    @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.quicksand-font {
font-family: "Quicksand", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, button, div{
font-family: 'Quicksand', sans-serif ;
}

  4. Paste the code: Open Quiz Design > Custom CSS. Paste the code at the top of the stylesheet.

  5. Publish the changes: Click the top-right Publish / Save button to apply the changes to the preview/live quiz.

Via the CSS console, you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS.

  1. Open the Quiz Design tab: Open your quiz and navigate to the Quiz Design tab.
  2. Open the CSS console: In the theme editor, click on the add button in the Custom CSS section. This should open an input where you can add your custom CSS to the quiz. Your developer will be able to add custom CSS which will override the default styles of the quiz.
  3. Find an element selector: To find a selector for the element, inspect it in your browser by right-clicking.

  4. Add specificity to your CSS rules: Scope a rule so it applies to the quiz only, or to one question. For example: 

    #quiz  p {color: red;}

    will change the color of all the paragraphs in the quiz to red.

    #question-AbC7Zde  p {color: red;}

    will change the color of a paragraph to red ONLY for question AbC7Zde, where AbC7Zde is the question ID. You can find a specific question ID in Quiz Builder > Question settings.

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

Upload a Google Font with CSS code

  1. Find a Google Font: To upload a custom Google Font to the quiz, first navigate to the font’s page. For example: Quicksand.
  2. Copy Font code: Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

  3. Write CSS code: To add a Google font to the quiz elements (h1-h6, p) use this sample code:

    Example: Google Font Code

    @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.quicksand-font {
font-family: "Quicksand", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, button, div{
font-family: 'Quicksand', sans-serif ;
}

  4. Paste the code: Open Quiz Design > Custom CSS. Paste the code at the top of the stylesheet.

  5. Publish the changes: Click the top-right Publish / Save button to apply the changes to the preview/live quiz.

Via the CSS console, you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS.

  1. Open the Quiz Design tab: Open your quiz and navigate to the Quiz Design tab.
  2. Open the CSS console: In the theme editor, click on the add button in the Custom CSS section. This should open an input where you can add your custom CSS to the quiz. Your developer will be able to add custom CSS which will override the default styles of the quiz.
  3. Find an element selector: To find a selector for the element, inspect it in your browser by right-clicking.

  4. Add specificity to your CSS rules: Scope a rule so it applies to the quiz only, or to one question. For example: 

    #quiz  p {color: red;}

    will change the color of all the paragraphs in the quiz to red.

    #question-AbC7Zde  p {color: red;}

    will change the color of a paragraph to red ONLY for question AbC7Zde, where AbC7Zde is the question ID. You can find a specific question ID in Quiz Builder > Question settings.

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

Upload a Google Font with CSS code

  1. Find a Google Font: To upload a custom Google Font to the quiz, first navigate to the font’s page. For example: Quicksand.
  2. Copy Font code: Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

  3. Write CSS code: To add a Google font to the quiz elements (h1-h6, p) use this sample code:

    Example: Google Font Code

    @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.quicksand-font {
font-family: "Quicksand", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, button, div{
font-family: 'Quicksand', sans-serif ;
}

  4. Paste the code: Open Quiz Design > Custom CSS. Paste the code at the top of the stylesheet.

  5. Publish the changes: Click the top-right Publish / Save button to apply the changes to the preview/live quiz.

Via the CSS console, you can add any custom styling rules. Any element of the quiz or the results page can be customized via CSS.

  1. Open the Quiz Design tab: Open your quiz and navigate to the Quiz Design tab.
  2. Open the CSS console: In the theme editor, click on the add button in the Custom CSS section. This should open an input where you can add your custom CSS to the quiz. Your developer will be able to add custom CSS which will override the default styles of the quiz.
  3. Find an element selector: To find a selector for the element, inspect it in your browser by right-clicking.

  4. Add specificity to your CSS rules: Scope a rule so it applies to the quiz only, or to one question. For example: 

    #quiz  p {color: red;}

    will change the color of all the paragraphs in the quiz to red.

    #question-AbC7Zde  p {color: red;}

    will change the color of a paragraph to red ONLY for question AbC7Zde, where AbC7Zde is the question ID. You can find a specific question ID in Quiz Builder > Question settings.

  5. Publish the changes: Click the top-right Publish button to apply the changes to the preview/live quiz.

Upload a Google Font with CSS code

  1. Find a Google Font: To upload a custom Google Font to the quiz, first navigate to the font’s page. For example: Quicksand.
  2. Copy Font code: Then, select the styles you want to be applied and copy the import font URL and font family CSS rules.

  3. Write CSS code: To add a Google font to the quiz elements (h1-h6, p) use this sample code:

    Example: Google Font Code

    @import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

.quicksand-font {
font-family: "Quicksand", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
}

h1, h2, h3, h4, h5, h6, p, button, div{
font-family: 'Quicksand', sans-serif ;
}

  4. Paste the code: Open Quiz Design > Custom CSS. Paste the code at the top of the stylesheet.

  5. Publish the changes: Click the top-right Publish / Save button to apply the changes to the preview/live quiz.

Advanced customizations (JavaScript)

Custom JavaScript on the results page and on the questions makes the quiz more customizable still. A developer can reach into the quiz structure or the response. It carries everything they need: the individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

  • add custom behavior, images, texts or logic
  • change quiz layout
  • display custom product recommendations
  • forward to any particular page on your store
  • add tracking codes to specific questions (Google Analytics, Meta Pixel)

For more on adding custom JavaScript, see how to add JavaScript to the quiz.

Custom JavaScript on the results page and on the questions makes the quiz more customizable still. A developer can reach into the quiz structure or the response. It carries everything they need: the individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

  • add custom behavior, images, texts or logic
  • change quiz layout
  • display custom product recommendations
  • forward to any particular page on your store
  • add tracking codes to specific questions (Google Analytics, Meta Pixel)

For more on adding custom JavaScript, see how to add JavaScript to the quiz.

Custom JavaScript on the results page and on the questions makes the quiz more customizable still. A developer can reach into the quiz structure or the response. It carries everything they need: the individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

  • add custom behavior, images, texts or logic
  • change quiz layout
  • display custom product recommendations
  • forward to any particular page on your store
  • add tracking codes to specific questions (Google Analytics, Meta Pixel)

For more on adding custom JavaScript, see how to add JavaScript to the quiz.

Custom JavaScript on the results page and on the questions makes the quiz more customizable still. A developer can reach into the quiz structure or the response. It carries everything they need: the individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

  • add custom behavior, images, texts or logic
  • change quiz layout
  • display custom product recommendations
  • forward to any particular page on your store
  • add tracking codes to specific questions (Google Analytics, Meta Pixel)

For more on adding custom JavaScript, see how to add JavaScript to the quiz.

Custom JavaScript on the results page and on the questions makes the quiz more customizable still. A developer can reach into the quiz structure or the response. It carries everything they need: the individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

  • add custom behavior, images, texts or logic
  • change quiz layout
  • display custom product recommendations
  • forward to any particular page on your store
  • add tracking codes to specific questions (Google Analytics, Meta Pixel)

For more on adding custom JavaScript, see how to add JavaScript to the quiz.

Custom JavaScript on the results page and on the questions makes the quiz more customizable still. A developer can reach into the quiz structure or the response. It carries everything they need: the individual answers to questions, triggered tags and recommended products.

With custom JavaScript, you can:

  • add custom behavior, images, texts or logic
  • change quiz layout
  • display custom product recommendations
  • forward to any particular page on your store
  • add tracking codes to specific questions (Google Analytics, Meta Pixel)

For more on adding custom JavaScript, see how to add JavaScript to the quiz.

Styling quiz text

To personalize the text within each question, open the Block Settings for each content block.

Each block type, Heading, Text and Button, has its own options for styling and positioning the text.

Heading Block

manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_heading

To add a heading to your question, select the Heading block. Its Block Settings let you:

  • Style Text: Make the heading text bold, italic, underlined or struck through. You can also insert links, and pull in content from elsewhere in the quiz.
  • Size and Alignment: Adjust the heading size and choose from alignment options (left, center, or right) to fit your design needs.

Text Block

manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_text

Use the Text block to add regular text content to your question. Within the Block Settings for text, you can:

  • Format Text: Similar to the heading block, you can bold, italicize, underline, or strikethrough text, add links, and dynamically source content.
  • Size and Alignment: Change the text size and alignment to suit the layout and readability of your quiz.

Button Block

manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_button

To add a button to your question, select the Button block. Its Block Settings let you:

  • Button Text: Customize the default text displayed on the button to reflect the action you want users to take.
  • Button Alignment: Adjust the button's position (left, center, or right) for a balanced layout within the quiz.

By adjusting these settings, you can tailor the styling of each text element to enhance user experience and reinforce your brand’s design.

You can use Markdown Language for basic styling of text in the quiz.

What is Markdown Language?

Markdown is a way to style text on the web. You control how the document looks. Bold and italic words, images and lists are a few of the things you can do with it. Mostly, Markdown is just regular text with a few non-alphabetic characters, like # or *.

If you need to include additional styling and elements in your questions, choices, and results page, you can do so using Markdown Language.

  • Headings 
    # H1
## H2
### H3
  • Text Styling 
    *italic text*
**bold text**
***italic & bold text***
  • Links 
    [link title](https://www.example.com)
  • Images 
    ![alt text](https://www.example.com/path/to/image.jpg)
  • Videos 
    ![](https://youtu.be/0_tO8HgJiLQ)

If you want to change the font or the color of certain texts or whole paragraphs, you may need to use Custom CSS code for that.

You can use Markdown Language for basic styling of text in the quiz.

What is Markdown Language?

Markdown is a way to style text on the web. You control how the document looks. Bold and italic words, images and lists are a few of the things you can do with it. Mostly, Markdown is just regular text with a few non-alphabetic characters, like # or *.

If you need to include additional styling and elements in your questions, choices, and results page, you can do so using Markdown Language.

  • Headings 
    # H1
## H2
### H3
  • Text Styling 
    *italic text*
**bold text**
***italic & bold text***
  • Links 
    [link title](https://www.example.com)
  • Images 
    ![alt text](https://www.example.com/path/to/image.jpg)
  • Videos 
    ![](https://youtu.be/0_tO8HgJiLQ)

If you want to change the font or the color of certain texts or whole paragraphs, you may need to use Custom CSS code for that.

You can use Markdown Language for basic styling of text in the quiz.

What is Markdown Language?

Markdown is a way to style text on the web. You control how the document looks. Bold and italic words, images and lists are a few of the things you can do with it. Mostly, Markdown is just regular text with a few non-alphabetic characters, like # or *.

If you need to include additional styling and elements in your questions, choices, and results page, you can do so using Markdown Language.

  • Headings 
    # H1
## H2
### H3
  • Text Styling 
    *italic text*
**bold text**
***italic & bold text***
  • Links 
    [link title](https://www.example.com)
  • Images 
    ![alt text](https://www.example.com/path/to/image.jpg)
  • Videos 
    ![](https://youtu.be/0_tO8HgJiLQ)

If you want to change the font or the color of certain texts or whole paragraphs, you may need to use Custom CSS code for that.

You can use Markdown Language for basic styling of text in the quiz.

What is Markdown Language?

Markdown is a way to style text on the web. You control how the document looks. Bold and italic words, images and lists are a few of the things you can do with it. Mostly, Markdown is just regular text with a few non-alphabetic characters, like # or *.

If you need to include additional styling and elements in your questions, choices, and results page, you can do so using Markdown Language.

  • Headings 
    # H1
## H2
### H3
  • Text Styling 
    *italic text*
**bold text**
***italic & bold text***
  • Links 
    [link title](https://www.example.com)
  • Images 
    ![alt text](https://www.example.com/path/to/image.jpg)
  • Videos 
    ![](https://youtu.be/0_tO8HgJiLQ)

If you want to change the font or the color of certain texts or whole paragraphs, you may need to use Custom CSS code for that.

You can use Markdown Language for basic styling of text in the quiz.

What is Markdown Language?

Markdown is a way to style text on the web. You control how the document looks. Bold and italic words, images and lists are a few of the things you can do with it. Mostly, Markdown is just regular text with a few non-alphabetic characters, like # or *.

If you need to include additional styling and elements in your questions, choices, and results page, you can do so using Markdown Language.

  • Headings 
    # H1
## H2
### H3
  • Text Styling 
    *italic text*
**bold text**
***italic & bold text***
  • Links 
    [link title](https://www.example.com)
  • Images 
    ![alt text](https://www.example.com/path/to/image.jpg)
  • Videos 
    ![](https://youtu.be/0_tO8HgJiLQ)

If you want to change the font or the color of certain texts or whole paragraphs, you may need to use Custom CSS code for that.

Adding images and videos

The Image and Picture Choice blocks add pictures to your quiz. One places a standalone image, the other turns the answer choices into pictures, making your quiz more engaging and visually appealing.

Tip

Check this guide to learn how to add and optimize your images for the quiz: How to add/adjust images.

The article explain in details different ways you can add images to your quiz. Including:

  • Quiz Background image - Upload a background image for the whole quiz in the Quiz design tab.
  • Question Background/Split image - You can upload a background image to each question in the quiz via the question settings.
  • Image Block - You can upload an individual image via an Image Block directly into one of the quiz questions or results page.
  • Picture Choice - A Picture Choice block gives each choice in a multiple-choice question its own image.
  • Product Image - A Product/Variants/Collection Block shows a product, variant or collection image on the results page.

Image Block

manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_image

To add an image within a question, use the Image block. The Block Settings for images offer the following customization options:

  • Upload or Select an Image: Click Select image to upload an image from your computer or choose from your in-app image gallery. Once uploaded, you can click Change to replace the image or Remove to delete it.
  • Image Size: Adjust the image height using the Image height dropdown to scale the image as needed.
  • Alignment: Use Image Alignment to position the image to the left, center, or right within the block for optimal layout.

Video Block'

manual_shopifyv2_questions_blocksettings_video.png

To add a video within a question, use the Video block. The Block Settings for videos offer the following customization options:

  • Video aspect ratio: Select the aspect ratio of the video.
  • Video alignment: Select the alignment of the video.

Picture Choice Block

manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_picturechoice

The Picture Choice block lets you offer visual choices for multiple-choice questions, enhancing interactivity. Block Settings for picture choices include:

  • Picture Size/Ratio: Choose the size and aspect ratio for this block: Tiny icon (24px), Small icon (48px), Medium (1:1) or Large (4:3).
  • Hide Checkbox/Radio: Hide the checkbox or radio selection indicator for picture choices.
  • Hide Image Label: Hide the text label displayed under each picture choice for a cleaner design.

To upload an image to each choice, open the Choice Settings.

Adding a Background image

You can add a background image to a specific question or to the entire quiz.

manual_shopifyV2_quizbuilder_quizbuilder_questions_questionsettings_backgroundimage

To add a background image to a specific question go to the Question Settings:

  • Select a Background image: Click Select image in the question management settings, then click Add image to upload a background image from your computer. Alternatively, choose an existing image from your quiz gallery. Once uploaded, click Change to replace the image or Remove to delete it.
  • Background Position: Cover the whole background with the image, or split the screen between the image and the content.
  • Background Opacity: Adjust the opacity of the background image using the slider to control transparency and blend it with the quiz content.

To add a background image to the whole quiz open the Quiz design tab.

These settings control how an image appears and behaves in the quiz.

You can add images to your quiz in several ways.

  • Upload images/videos via question settings: You can add a unique image to every question through the Quiz Builder by accessing the question settings.
  • Embed images and videos with Markdown: Put an image or a video into any text block, question or results page.
    • Images: 
      ![alt text](https://www.example.com/path/to/image.jpg)
    • Videos 
      ![](https://youtu.be/0_tO8HgJiLQ)

Tip

Check this guide to learn how to add and optimize your images for the quiz: How to add/adjust images.

You can add images to your quiz in several ways.

  • Upload images/videos via question settings: You can add a unique image to every question through the Quiz Builder by accessing the question settings.
  • Embed images and videos with Markdown: Put an image or a video into any text block, question or results page.
    • Images: 
      ![alt text](https://www.example.com/path/to/image.jpg)
    • Videos 
      ![](https://youtu.be/0_tO8HgJiLQ)

Tip

Check this guide to learn how to add and optimize your images for the quiz: How to add/adjust images.

You can add images to your quiz in several ways.

  • Upload images/videos via question settings: You can add a unique image to every question through the Quiz Builder by accessing the question settings.
  • Embed images and videos with Markdown: Put an image or a video into any text block, question or results page.
    • Images: 
      ![alt text](https://www.example.com/path/to/image.jpg)
    • Videos 
      ![](https://youtu.be/0_tO8HgJiLQ)

Tip

Check this guide to learn how to add and optimize your images for the quiz: How to add/adjust images.

You can add images to your quiz in several ways.

  • Upload images/videos via question settings: You can add a unique image to every question through the Quiz Builder by accessing the question settings.
  • Embed images and videos with Markdown: Put an image or a video into any text block, question or results page.
    • Images: 
      ![alt text](https://www.example.com/path/to/image.jpg)
    • Videos 
      ![](https://youtu.be/0_tO8HgJiLQ)

Tip

Check this guide to learn how to add and optimize your images for the quiz: How to add/adjust images.

You can add images to your quiz in several ways.

  • Upload images/videos via question settings: You can add a unique image to every question through the Quiz Builder by accessing the question settings.
  • Embed images and videos with Markdown: Put an image or a video into any text block, question or results page.
    • Images: 
      ![alt text](https://www.example.com/path/to/image.jpg)
    • Videos 
      ![](https://youtu.be/0_tO8HgJiLQ)

Tip

Check this guide to learn how to add and optimize your images for the quiz: How to add/adjust images.

Individual question design

In addition to the overall Quiz design options, you can add a unique image to every question through the Quiz builder by accessing the question settings.

manual_shopifyV2_quizbuilder_quizbuilder_questionsettings

The question settings also take custom CSS code and custom JavaScript.

In addition to the overall Quiz Design options, you can add a unique image to every question through the Quiz Builder by accessing the question settings.

manual_quizbuilder_quizbuilder_questionsettings_sidemenu

The question settings also take custom JavaScript.

In addition to the overall Quiz Design options, you can add a unique image to every question through the Quiz Builder by accessing the question settings.

manual_quizbuilder_quizbuilder_questionsettings_sidemenu

The question settings also take custom JavaScript.

In addition to the overall Quiz Design options, you can add a unique image to every question through the Quiz Builder by accessing the question settings.

manual_quizbuilder_quizbuilder_questionsettings_sidemenu

The question settings also take custom JavaScript.

In addition to the overall Quiz Design options, you can add a unique image to every question through the Quiz Builder by accessing the question settings.

manual_quizbuilder_quizbuilder_questionsettings_sidemenu

The question settings also take custom JavaScript.

In addition to the overall Quiz Design options, you can add a unique image to every question through the Quiz Builder by accessing the question settings.

manual_quizbuilder_quizbuilder_questionsettings_sidemenu

The question settings also take custom JavaScript.

Results page design

The Results Page also has its own customization options.

Tip

Check how to edit your product recommendation quiz results page to learn more about styling your results page.

In addition to the basic elements, you can set a unique background image for each results page through the results page settings. You can also use these settings to apply custom JavaScript to your quiz design.

If the default results page is too restrictive, build your own on your site. Send the quiz data to it with the Callback Function. This function enables you to collect all quiz responses in JSON format on any page you choose.

Customization examples

A developer can restyle every part of the quiz and the results page. These examples show what CSS alone can do.

Useful CSS codes

Get help with custom CSS

Click ✨Get help with custom CSS in Question settings or Results page settings to open a chat window with the Quiz Copilot AI. It can directly make design changes with CSS code!

App CSS Structure

For a detailed overview of the CSS structure of the app and CSS examples, see the App CSS Structure reference.

Here are a few popular CSS selectors and codes to style elements in the quiz:

Hide Progress Bar in the footer 
/* Hide Progress Bar in the footer */
.lq-progress-box{
display: none;
}
Change the styles of the choices 
/* Change the styles of the choices */
li.lq-choice, li.lq-choice{
/* your CSS rules go here */
}
Change the styles of the picture choices 
.lq-images li.lq-choice, .lq-images li.lq-choice{
/* your CSS rules go here */
}
Place the footer bar at the top, for more visibility 
.lq-footer, .lq-footer{
position: absolute;
width: 100%;
top: 0;
margin: 0;
}
Make 'Back' and 'Next' arrows point left and right 
#nav-next .fa, #nav-back .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
Adding a custom font

Adding a custom font. You have to host the font on your own server. A font hosted inside your Shopify store counts as private, or sits behind a restriction, so the quiz cannot load it. Host it elsewhere, or use a Google Font as Advanced customizations (CSS) shows.

@font-face {
font-family: "Morion";
src: url("https://yourwebsite.com/wp-content/themes/yourtheme/fonts/Morion-Light.woff2") format("woff2");
);
}
h1, h2, h3, h4, h5, h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6{
font-family: Morion, serif;
}
Hide the 'add all to cart' button 
/*Hide the "add all to cart" button */

.lq-checkout.lq-add-all-to-cart {
    display: none;
}
Hide the product variants 
/* this hides the product variants */
.no-variants-dropdown {
display: none;
}
.lq-variants-dropdown {
display: none;
}
.lq-results .el-input, .lq-results .el-input__inner {
display: none;
}
Adds quiz border 
/* Adds quiz border */
.lq-quiz {
border-style: solid;
border-color: red;
}
Change Picture Choices to Icons 
/* Change Picture Choices to Icons */

.lq-images li, .widget .lq-images li{
max-width: none !important;
}

.lq-choices .lq-img, .widget .lq-choices .lq-img{
width: 48px !important;
height: 48px !important;
padding-top: 0 !important;
background-size: 48px !important;
background-position: left;
margin-top: 4px;
margin-right: 8px;
margin-bottom: 2px;
}

.lq-picture-choice .lq-letter{
display: none;
}

.lq-picture-choice li div{
width: calc(100% - 65px) !important;
margin-top: 12px;
}

@media (pointer: fine) {
.lq-picture-choice li:hover{
background-color: #333 !important;
}

.lq-picture-choice li:hover div{color: #fff !important;
}

.lq-picture-choice li:hover .lq-img{
content: "";
width: 100%;
height: 100%;
background-color:black;
filter: invert(100%);
-webkit-filter: invert(100%);
}
}

.lq-images li, .widget .lq-images li{
width: calc(100% - 8px) !important;
}

@media (min-width: 768px) {
.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(50% - 8px) !important;
}
}
Multiple choice questions: change the selected option background 
/* Multiple choice questions: change the selected options background */
li.lq-selected .lq-letter {
background-color: gray;
}
Change the color of the Retake Quiz text 
/* Change the color of the Retake Quiz text */
.lq-retake-quiz {
color: black;
}
Change the background of the Add to Cart button 
/* Change the background of the Add to Cart button */
.lq-add-to-cart {
background-color: #ff7028;
}
Change the background of the Checkout button 
/* Change the background of the Checkout button */
.lq-checkout {
background-color: #ff7028;
}
Change the background of the label inside Add to Cart buttons 
/* Change the background of the label inside Add to Cart buttons */
.lq-btn-content {
background-color: #ff7028;
color: white;
}

Here are a few popular CSS selectors and codes to style elements in the quiz:

Hide Progress Bar in the footer 
/* Hide Progress Bar in the footer */
.lq-progress-box{
display: none;
}
Change the styles of the choices 
/* Change the styles of the choices */
li.lq-choice, li.lq-choice{
/* your CSS rules go here */
}
Change the styles of the picture choices 
.lq-images li.lq-choice, .lq-images li.lq-choice{
/* your CSS rules go here */
}
Place the footer bar at the top, for more visibility 
.lq-footer, .lq-footer{
position: absolute;
width: 100%;
top: 0;
margin: 0;
}
Make 'Back' and 'Next' arrows point left and right 
#nav-next .fa, #nav-back .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
Adding a custom font

Adding a custom font. You have to host the font on your own server. A font hosted inside your Shopify store counts as private, or sits behind a restriction, so the quiz cannot load it. Host it elsewhere, or use a Google Font as Advanced customizations (CSS) shows.

@font-face {
font-family: "Morion";
src: url("https://yourwebsite.com/wp-content/themes/yourtheme/fonts/Morion-Light.woff2") format("woff2");
);
}
h1, h2, h3, h4, h5, h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6{
font-family: Morion, serif;
}
Hide the 'add all to cart' button 
/*Hide the "add all to cart" button */

.lq-checkout.lq-add-all-to-cart {
    display: none;
}
Hide the product variants 
/* this hides the product variants */
.no-variants-dropdown {
display: none;
}
.lq-variants-dropdown {
display: none;
}
.lq-results .el-input, .lq-results .el-input__inner {
display: none;
}
Adds quiz border 
/* Adds quiz border */
.lq-quiz {
border-style: solid;
border-color: red;
}
Change Picture Choices to Icons 
/* Change Picture Choices to Icons */

.lq-images li, .widget .lq-images li{
max-width: none !important;
}

.lq-choices .lq-img, .widget .lq-choices .lq-img{
width: 48px !important;
height: 48px !important;
padding-top: 0 !important;
background-size: 48px !important;
background-position: left;
margin-top: 4px;
margin-right: 8px;
margin-bottom: 2px;
}

.lq-picture-choice .lq-letter{
display: none;
}

.lq-picture-choice li div{
width: calc(100% - 65px) !important;
margin-top: 12px;
}

@media (pointer: fine) {
.lq-picture-choice li:hover{
background-color: #333 !important;
}

.lq-picture-choice li:hover div{color: #fff !important;
}

.lq-picture-choice li:hover .lq-img{
content: "";
width: 100%;
height: 100%;
background-color:black;
filter: invert(100%);
-webkit-filter: invert(100%);
}
}

.lq-images li, .widget .lq-images li{
width: calc(100% - 8px) !important;
}

@media (min-width: 768px) {
.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(50% - 8px) !important;
}
}
Multiple choice questions: change the selected option background 
/* Multiple choice questions: change the selected options background */
li.lq-selected .lq-letter {
background-color: gray;
}
Change the color of the Retake Quiz text 
/* Change the color of the Retake Quiz text */
.lq-retake-quiz {
color: black;
}
Change the background of the Add to Cart button 
/* Change the background of the Add to Cart button */
.lq-add-to-cart {
background-color: #ff7028;
}
Change the background of the Checkout button 
/* Change the background of the Checkout button */
.lq-checkout {
background-color: #ff7028;
}
Change the background of the label inside Add to Cart buttons 
/* Change the background of the label inside Add to Cart buttons */
.lq-btn-content {
background-color: #ff7028;
color: white;
}

Here are a few popular CSS selectors and codes to style elements in the quiz:

Hide Progress Bar in the footer 
/* Hide Progress Bar in the footer */
.lq-progress-box{
display: none;
}
Change the styles of the choices 
/* Change the styles of the choices */
li.lq-choice, li.lq-choice{
/* your CSS rules go here */
}
Change the styles of the picture choices 
.lq-images li.lq-choice, .lq-images li.lq-choice{
/* your CSS rules go here */
}
Place the footer bar at the top, for more visibility 
.lq-footer, .lq-footer{
position: absolute;
width: 100%;
top: 0;
margin: 0;
}
Make 'Back' and 'Next' arrows point left and right 
#nav-next .fa, #nav-back .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
Adding a custom font

Adding a custom font. You have to host the font on your own server. A font hosted inside your Shopify store counts as private, or sits behind a restriction, so the quiz cannot load it. Host it elsewhere, or use a Google Font as Advanced customizations (CSS) shows.

@font-face {
font-family: "Morion";
src: url("https://yourwebsite.com/wp-content/themes/yourtheme/fonts/Morion-Light.woff2") format("woff2");
);
}
h1, h2, h3, h4, h5, h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6{
font-family: Morion, serif;
}
Hide the 'add all to cart' button 
/*Hide the "add all to cart" button */

.lq-checkout.lq-add-all-to-cart {
    display: none;
}
Hide the product variants 
/* this hides the product variants */
.no-variants-dropdown {
display: none;
}
.lq-variants-dropdown {
display: none;
}
.lq-results .el-input, .lq-results .el-input__inner {
display: none;
}
Adds quiz border 
/* Adds quiz border */
.lq-quiz {
border-style: solid;
border-color: red;
}
Change Picture Choices to Icons 
/* Change Picture Choices to Icons */

.lq-images li, .widget .lq-images li{
max-width: none !important;
}

.lq-choices .lq-img, .widget .lq-choices .lq-img{
width: 48px !important;
height: 48px !important;
padding-top: 0 !important;
background-size: 48px !important;
background-position: left;
margin-top: 4px;
margin-right: 8px;
margin-bottom: 2px;
}

.lq-picture-choice .lq-letter{
display: none;
}

.lq-picture-choice li div{
width: calc(100% - 65px) !important;
margin-top: 12px;
}

@media (pointer: fine) {
.lq-picture-choice li:hover{
background-color: #333 !important;
}

.lq-picture-choice li:hover div{color: #fff !important;
}

.lq-picture-choice li:hover .lq-img{
content: "";
width: 100%;
height: 100%;
background-color:black;
filter: invert(100%);
-webkit-filter: invert(100%);
}
}

.lq-images li, .widget .lq-images li{
width: calc(100% - 8px) !important;
}

@media (min-width: 768px) {
.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(50% - 8px) !important;
}
}
Multiple choice questions: change the selected option background 
/* Multiple choice questions: change the selected options background */
li.lq-selected .lq-letter {
background-color: gray;
}
Change the color of the Retake Quiz text 
/* Change the color of the Retake Quiz text */
.lq-retake-quiz {
color: black;
}
Change the background of the Add to Cart button 
/* Change the background of the Add to Cart button */
.lq-add-to-cart {
background-color: #ff7028;
}
Change the background of the Checkout button 
/* Change the background of the Checkout button */
.lq-checkout {
background-color: #ff7028;
}
Change the background of the label inside Add to Cart buttons 
/* Change the background of the label inside Add to Cart buttons */
.lq-btn-content {
background-color: #ff7028;
color: white;
}

Here are a few popular CSS selectors and codes to style elements in the quiz:

Hide Progress Bar in the footer 
/* Hide Progress Bar in the footer */
.lq-progress-box{
display: none;
}
Change the styles of the choices 
/* Change the styles of the choices */
li.lq-choice, li.lq-choice{
/* your CSS rules go here */
}
Change the styles of the picture choices 
.lq-images li.lq-choice, .lq-images li.lq-choice{
/* your CSS rules go here */
}
Place the footer bar at the top, for more visibility 
.lq-footer, .lq-footer{
position: absolute;
width: 100%;
top: 0;
margin: 0;
}
Make 'Back' and 'Next' arrows point left and right 
#nav-next .fa, #nav-back .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
Adding a custom font

Adding a custom font. You have to host the font on your own server. A font hosted inside your Shopify store counts as private, or sits behind a restriction, so the quiz cannot load it. Host it elsewhere, or use a Google Font as Advanced customizations (CSS) shows.

@font-face {
font-family: "Morion";
src: url("https://yourwebsite.com/wp-content/themes/yourtheme/fonts/Morion-Light.woff2") format("woff2");
);
}
h1, h2, h3, h4, h5, h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6{
font-family: Morion, serif;
}
Hide the 'add all to cart' button 
/*Hide the "add all to cart" button */

.lq-checkout.lq-add-all-to-cart {
    display: none;
}
Hide the product variants 
/* this hides the product variants */
.no-variants-dropdown {
display: none;
}
.lq-variants-dropdown {
display: none;
}
.lq-results .el-input, .lq-results .el-input__inner {
display: none;
}
Adds quiz border 
/* Adds quiz border */
.lq-quiz {
border-style: solid;
border-color: red;
}
Change Picture Choices to Icons 
/* Change Picture Choices to Icons */

.lq-images li, .widget .lq-images li{
max-width: none !important;
}

.lq-choices .lq-img, .widget .lq-choices .lq-img{
width: 48px !important;
height: 48px !important;
padding-top: 0 !important;
background-size: 48px !important;
background-position: left;
margin-top: 4px;
margin-right: 8px;
margin-bottom: 2px;
}

.lq-picture-choice .lq-letter{
display: none;
}

.lq-picture-choice li div{
width: calc(100% - 65px) !important;
margin-top: 12px;
}

@media (pointer: fine) {
.lq-picture-choice li:hover{
background-color: #333 !important;
}

.lq-picture-choice li:hover div{color: #fff !important;
}

.lq-picture-choice li:hover .lq-img{
content: "";
width: 100%;
height: 100%;
background-color:black;
filter: invert(100%);
-webkit-filter: invert(100%);
}
}

.lq-images li, .widget .lq-images li{
width: calc(100% - 8px) !important;
}

@media (min-width: 768px) {
.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(50% - 8px) !important;
}
}
Multiple choice questions: change the selected option background 
/* Multiple choice questions: change the selected options background */
li.lq-selected .lq-letter {
background-color: gray;
}
Change the color of the Retake Quiz text 
/* Change the color of the Retake Quiz text */
.lq-retake-quiz {
color: black;
}
Change the background of the Add to Cart button 
/* Change the background of the Add to Cart button */
.lq-add-to-cart {
background-color: #ff7028;
}
Change the background of the Checkout button 
/* Change the background of the Checkout button */
.lq-checkout {
background-color: #ff7028;
}
Change the background of the label inside Add to Cart buttons 
/* Change the background of the label inside Add to Cart buttons */
.lq-btn-content {
background-color: #ff7028;
color: white;
}

Here are a few popular CSS selectors and codes to style elements in the quiz:

Hide Progress Bar in the footer 
/* Hide Progress Bar in the footer */
.lq-progress-box{
display: none;
}
Change the styles of the choices 
/* Change the styles of the choices */
li.lq-choice, li.lq-choice{
/* your CSS rules go here */
}
Change the styles of the picture choices 
.lq-images li.lq-choice, .lq-images li.lq-choice{
/* your CSS rules go here */
}
Place the footer bar at the top, for more visibility 
.lq-footer, .lq-footer{
position: absolute;
width: 100%;
top: 0;
margin: 0;
}
Make 'Back' and 'Next' arrows point left and right 
#nav-next .fa, #nav-back .fa {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
Adding a custom font

Adding a custom font. You have to host the font on your own server. A font hosted inside your Shopify store counts as private, or sits behind a restriction, so the quiz cannot load it. Host it elsewhere, or use a Google Font as Advanced customizations (CSS) shows.

@font-face {
font-family: "Morion";
src: url("https://yourwebsite.com/wp-content/themes/yourtheme/fonts/Morion-Light.woff2") format("woff2");
);
}
h1, h2, h3, h4, h5, h6, .widget h1, .widget h2, .widget h3, .widget h4, .widget h5, .widget h6{
font-family: Morion, serif;
}
Hide the 'add all to cart' button 
/*Hide the "add all to cart" button */

.lq-checkout.lq-add-all-to-cart {
    display: none;
}
Hide the product variants 
/* this hides the product variants */
.no-variants-dropdown {
display: none;
}
.lq-variants-dropdown {
display: none;
}
.lq-results .el-input, .lq-results .el-input__inner {
display: none;
}
Adds quiz border 
/* Adds quiz border */
.lq-quiz {
border-style: solid;
border-color: red;
}
Change Picture Choices to Icons 
/* Change Picture Choices to Icons */

.lq-images li, .widget .lq-images li{
max-width: none !important;
}

.lq-choices .lq-img, .widget .lq-choices .lq-img{
width: 48px !important;
height: 48px !important;
padding-top: 0 !important;
background-size: 48px !important;
background-position: left;
margin-top: 4px;
margin-right: 8px;
margin-bottom: 2px;
}

.lq-picture-choice .lq-letter{
display: none;
}

.lq-picture-choice li div{
width: calc(100% - 65px) !important;
margin-top: 12px;
}

@media (pointer: fine) {
.lq-picture-choice li:hover{
background-color: #333 !important;
}

.lq-picture-choice li:hover div{color: #fff !important;
}

.lq-picture-choice li:hover .lq-img{
content: "";
width: 100%;
height: 100%;
background-color:black;
filter: invert(100%);
-webkit-filter: invert(100%);
}
}

.lq-images li, .widget .lq-images li{
width: calc(100% - 8px) !important;
}

@media (min-width: 768px) {
.builder-container-preview .lq-images li, .widget .lq-images li{
width: calc(50% - 8px) !important;
}
}
Multiple choice questions: change the selected option background 
/* Multiple choice questions: change the selected options background */
li.lq-selected .lq-letter {
background-color: gray;
}
Change the color of the Retake Quiz text 
/* Change the color of the Retake Quiz text */
.lq-retake-quiz {
color: black;
}
Change the background of the Add to Cart button 
/* Change the background of the Add to Cart button */
.lq-add-to-cart {
background-color: #ff7028;
}
Change the background of the Checkout button 
/* Change the background of the Checkout button */
.lq-checkout {
background-color: #ff7028;
}
Change the background of the label inside Add to Cart buttons 
/* Change the background of the label inside Add to Cart buttons */
.lq-btn-content {
background-color: #ff7028;
color: white;
}

This article explains how to customize the quiz design with the built-in settings, and how to add custom CSS and JavaScript.