Editing Quiz Design¶

ShopifyShopify V2WooCommerceMagentoBigCommerceStandalone

With the RevenueHunt Quiz app, you have complete control over how your quiz looks and feels. Design settings are available at multiple levels, from global styles that affect the whole quiz to question/block-level tweaks for individual elements. This guide will walk you through every place where you can customize your quiz design.

You’ll learn:

how to use the customization options in the Quiz Design tab or built-in Question, Block or Results Page settings
where to add your own style with CSS or JavaScript
how to modify any part of the quiz or results page with custom CSS
how to include custom images and styles for each question via the question settings
how to add videos to the quiz or results page via the question settings

With the RevenueHunt Quiz app, you have complete control over how your quiz looks and feels. Design settings are available at multiple levels, from global styles that affect the whole quiz to block-level tweaks for individual elements. This guide will walk you through every place where you can customize your quiz design.

You’ll learn:

how to customize global quiz design: fonts, colors, backgrounds, navigation, and transitions,
how toadd custom CSS or JavaScript for the whole quiz or individual slides,
how todesign engaging questions with text, images, videos, and choice layouts,
how to style blocks and choices, including picture sizes and mobile layouts,
how to build and customize the Results Page with text, media, buttons, and product blocks,
how to control product card layouts.

With the RevenueHunt Quiz app, you have complete control over how your quiz looks and feels. Design settings are available at multiple levels, from global styles that affect the whole quiz to question/block-level tweaks for individual elements. This guide will walk you through every place where you can customize your quiz design.

You’ll learn:

how to use the customization options in the Quiz Design tab or built-in Question, Block or Results Page settings
where to add your own style with CSS or JavaScript
how to modify any part of the quiz or results page with custom CSS
how to include custom images and styles for each question via the question settings
how to add videos to the quiz or results page via the question settings

With the RevenueHunt Quiz app, you have complete control over how your quiz looks and feels. Design settings are available at multiple levels, from global styles that affect the whole quiz to question/block-level tweaks for individual elements. This guide will walk you through every place where you can customize your quiz design.

You’ll learn:

how to use the customization options in the Quiz Design tab or built-in Question, Block or Results Page settings
where to add your own style with CSS or JavaScript
how to modify any part of the quiz or results page with custom CSS
how to include custom images and styles for each question via the question settings
how to add videos to the quiz or results page via the question settings

With the RevenueHunt Quiz app, you have complete control over how your quiz looks and feels. Design settings are available at multiple levels, from global styles that affect the whole quiz to question/block-level tweaks for individual elements. This guide will walk you through every place where you can customize your quiz design.

You’ll learn:

how to use the customization options in the Quiz Design tab or built-in Question, Block or Results Page settings
where to add your own style with CSS or JavaScript
how to modify any part of the quiz or results page with custom CSS
how to include custom images and styles for each question via the question settings
how to add videos to the quiz or results page via the question settings

With the RevenueHunt Quiz app, you have complete control over how your quiz looks and feels. Design settings are available at multiple levels, from global styles that affect the whole quiz to question/block-level tweaks for individual elements. This guide will walk you through every place where you can customize your quiz design.

You’ll learn:

how to use the customization options in the Quiz Design tab or built-in Question, Block or Results Page settings
where to add your own style with CSS or JavaScript
how to modify any part of the quiz or results page with custom CSS
how to include custom images and styles for each question via the question settings
how to add videos to the quiz or results page via the question settings

Intro¶

ShopifyShopify V2WooCommerceMagentoBigCommerceStandalone

Design customization in RevenueHunt works at several levels:

The Quiz Design tab gives you global control over fonts, colors, and navigation.
The Quiz Builder tab lets you style each slide and its blocks individually.
The Results Page tab ensures your final recommendations match your brand.
Every slide and block has its own options for fine-tuning.
And when you need full control, custom CSS and JavaScript are available at every step.

Design customization in RevenueHunt works at several levels:

The Quiz Design tab gives you global control over fonts, colors, and navigation.
The Questions tab lets you style each slide individually.
The Results Page tab ensures your final recommendations screen matches your brand.
Every block and choice has its own options for fine-tuning.
And when you need full control, custom CSS and JavaScript are available at every step.

Design customization in RevenueHunt works at several levels:

The Quiz Design tab gives you global control over fonts, colors, and navigation.
The Quiz Builder tab lets you style each slide and its blocks individually.
The Results Page tab ensures your final recommendations match your brand.
Every slide and block has its own options for fine-tuning.
And when you need full control, custom CSS and JavaScript are available at every step.

Design customization in RevenueHunt works at several levels:

The Quiz Design tab gives you global control over fonts, colors, and navigation.
The Quiz Builder tab lets you style each slide and its blocks individually.
The Results Page tab ensures your final recommendations match your brand.
Every slide and block has its own options for fine-tuning.
And when you need full control, custom CSS and JavaScript are available at every step.

Design customization in RevenueHunt works at several levels:

The Quiz Design tab gives you global control over fonts, colors, and navigation.
The Quiz Builder tab lets you style each slide and its blocks individually.
The Results Page tab ensures your final recommendations match your brand.
Every slide and block has its own options for fine-tuning.
And when you need full control, custom CSS and JavaScript are available at every step.

Design customization in RevenueHunt works at several levels:

The Quiz Design tab gives you global control over fonts, colors, and navigation.
The Quiz Builder tab lets you style each slide and its blocks individually.
The Results Page tab ensures your final recommendations match your brand.
Every slide and block has its own options for fine-tuning.
And when you need full control, custom CSS and JavaScript are available at every step.

Quiz Design Tab¶

ShopifyShopify V2WooCommerceMagentoBigCommerceStandalone

The Quiz Design tab is your main hub for styling the quiz. Use it to set fonts, colors, backgrounds, and global CSS.

Basic customizations

Open the Quiz Builder and navigate to the Quiz Design tab.
Customize the look. Start from a pre-designed theme in My Themes or make your own.
Edit Theme. Pick a color palette, choose fonts, and add a default background image.

Theme editor fields

In the Quiz Design tab, you’ll see the name of your current theme displayed at the top.
Use the Font dropdown to change fonts for headings and body text, or select Inherit to automatically match your store theme.
Adjust the question text color with a color picker, or type in a HEX code for precision.
Change the look of choices with the built-in color picker. Like other fields, you can paste in a HEX code for an exact match.
Style your quiz buttons (Start, Next, Add to Cart, etc.) by selecting a background color.
Set a global background color or upload a background image (recommended max size 1000×1000px, ≤2 MB). Once added, extra options for positioning and alignment will appear.
Use the Background Opacity slider to fade the image slightly and keep text readable.

Publish changes

Click the Publish (top-right) button to apply changes to the live/preview quiz.

The Quiz Design tab is your main hub for styling the quiz. Here you can change fonts, colors, backgrounds, navigation, and slide transitions.

Access the Quiz Design tab by clicking Customize on your quiz.
Choose from pre-designed color schemes or customize your own.
Change fonts for headings and body text, or inherit from your store theme.
Customize accent colors for texts, buttons and inputs using a color palette or hex codes.
Set a global background with a solid color or upload an image, adjusting opacity for readability.
Modify navigation bar color, progress bar display.
Modify slide transitions (up/down or left/right).
Preview & Inspector: Switch between questions and results, desktop and mobile layouts, and activate the inspector to test interactions.
Remember to click Save to save your changes.

The Quiz Design tab is your main hub for styling the quiz. Use it to set fonts, colors, backgrounds, and global CSS.

Basic customizations

Open the Quiz Builder and navigate to the Quiz Design tab.
Customize the look. Start from a pre-designed theme in My Themes or make your own.
Edit Theme. Pick a color palette, choose fonts, and add a default background image.

Theme editor fields

In the Quiz Design tab, you’ll see the name of your current theme displayed at the top.
Use the Font dropdown to change fonts for headings and body text, or select Inherit to automatically match your store theme.
Adjust the question text color with a color picker, or type in a HEX code for precision.
Change the look of choices with the built-in color picker. Like other fields, you can paste in a HEX code for an exact match.
Style your quiz buttons (Start, Next, Add to Cart, etc.) by selecting a background color.
Set a global background color or upload a background image (recommended max size 1000×1000px, ≤2 MB). Once added, extra options for positioning and alignment will appear.
Use the Background Opacity slider to fade the image slightly and keep text readable.

Publish changes

Click the Publish (top-right) button to apply changes to the live/preview quiz.

The Quiz Design tab is your main hub for styling the quiz. Use it to set fonts, colors, backgrounds, and global CSS.

Basic customizations

Open the Quiz Builder and navigate to the Quiz Design tab.
Customize the look. Start from a pre-designed theme in My Themes or make your own.
Edit Theme. Pick a color palette, choose fonts, and add a default background image.

Theme editor fields

In the Quiz Design tab, you’ll see the name of your current theme displayed at the top.
Use the Font dropdown to change fonts for headings and body text, or select Inherit to automatically match your store theme.
Adjust the question text color with a color picker, or type in a HEX code for precision.
Change the look of choices with the built-in color picker. Like other fields, you can paste in a HEX code for an exact match.
Style your quiz buttons (Start, Next, Add to Cart, etc.) by selecting a background color.
Set a global background color or upload a background image (recommended max size 1000×1000px, ≤2 MB). Once added, extra options for positioning and alignment will appear.
Use the Background Opacity slider to fade the image slightly and keep text readable.

Publish changes

Click the Publish (top-right) button to apply changes to the live/preview quiz.

The Quiz Design tab is your main hub for styling the quiz. Use it to set fonts, colors, backgrounds, and global CSS.

Basic customizations

Open the Quiz Builder and navigate to the Quiz Design tab.
Customize the look. Start from a pre-designed theme in My Themes or make your own.
Edit Theme. Pick a color palette, choose fonts, and add a default background image.

Theme editor fields

In the Quiz Design tab, you’ll see the name of your current theme displayed at the top.
Use the Font dropdown to change fonts for headings and body text, or select Inherit to automatically match your store theme.
Adjust the question text color with a color picker, or type in a HEX code for precision.
Change the look of choices with the built-in color picker. Like other fields, you can paste in a HEX code for an exact match.
Style your quiz buttons (Start, Next, Add to Cart, etc.) by selecting a background color.
Set a global background color or upload a background image (recommended max size 1000×1000px, ≤2 MB). Once added, extra options for positioning and alignment will appear.
Use the Background Opacity slider to fade the image slightly and keep text readable.

Publish changes

Click the Publish (top-right) button to apply changes to the live/preview quiz.

The Quiz Design tab is your main hub for styling the quiz. Use it to set fonts, colors, backgrounds, and global CSS.

Basic customizations

Open the Quiz Builder and navigate to the Quiz Design tab.
Customize the look. Start from a pre-designed theme in My Themes or make your own.
Edit Theme. Pick a color palette, choose fonts, and add a default background image.

Theme editor fields

In the Quiz Design tab, you’ll see the name of your current theme displayed at the top.
Use the Font dropdown to change fonts for headings and body text, or select Inherit to automatically match your store theme.
Adjust the question text color with a color picker, or type in a HEX code for precision.
Change the look of choices with the built-in color picker. Like other fields, you can paste in a HEX code for an exact match.
Style your quiz buttons (Start, Next, Add to Cart, etc.) by selecting a background color.
Set a global background color or upload a background image (recommended max size 1000×1000px, ≤2 MB). Once added, extra options for positioning and alignment will appear.
Use the Background Opacity slider to fade the image slightly and keep text readable.

Publish changes

Click the Publish (top-right) button to apply changes to the live/preview quiz.

Advanced (CSS)¶

ShopifyShopify V2WooCommerceMagentoBigCommerceStandalone

You can style any element of your quiz or results page using the built-in CSS console in the Quiz Design tab.

Open your quiz and go to the Quiz Design tab.
In the Custom CSS section, click Add to open the CSS console. This will create an input area where you or your developer can add rules that override the default quiz styles.
To find the correct selector, right-click on the element in your browser and choose Inspect. Copy the selector from the developer tools.

Add specificity to your CSS rules

Add specificity to your CSS rules to target the whole quiz or just one question.

#quiz p {color: red;} - Changes the color of all paragraphs in the quiz.

#question-AbC7Zde p {color: red;} - Changes the color of a paragraph only in question AbC7Zde.

You can find the question ID in Quiz Builder > Question settings.

Use the Advanced tab for adding custom CSS that applies to the entire quiz.

Tips for using CSS in the quiz:

For examples, check the App CSS Structure reference in our docs.
For specific elements, use the browser's inspect tool to identify selectors for CSS rules.
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!
Custom CSS and JavaScript options are available at every level of customization (whole quiz, questions,, results page), allowing for detailed control over quiz appearance and behavior.

You can style any element of your quiz or results page using the built-in CSS console in the Quiz Design tab.

Open your quiz and go to the Quiz Design tab.
In the Custom CSS section, click Add to open the CSS console. This will create an input area where you or your developer can add rules that override the default quiz styles.
To find the correct selector, right-click on the element in your browser and choose Inspect. Copy the selector from the developer tools.

Add specificity to your CSS rules

Add specificity to your CSS rules to target the whole quiz or just one question.

#quiz p {color: red;} - Changes the color of all paragraphs in the quiz.

#question-AbC7Zde p {color: red;} - Changes the color of a paragraph only in question AbC7Zde.

You can find the question ID in Quiz Builder > Question settings.

You can style any element of your quiz or results page using the built-in CSS console in the Quiz Design tab.

Open your quiz and go to the Quiz Design tab.
In the Custom CSS section, click Add to open the CSS console. This will create an input area where you or your developer can add rules that override the default quiz styles.
To find the correct selector, right-click on the element in your browser and choose Inspect. Copy the selector from the developer tools.

Add specificity to your CSS rules

Add specificity to your CSS rules to target the whole quiz or just one question.

#quiz p {color: red;} - Changes the color of all paragraphs in the quiz.

#question-AbC7Zde p {color: red;} - Changes the color of a paragraph only in question AbC7Zde.

You can find the question ID in Quiz Builder > Question settings.

You can style any element of your quiz or results page using the built-in CSS console in the Quiz Design tab.

Open your quiz and go to the Quiz Design tab.
In the Custom CSS section, click Add to open the CSS console. This will create an input area where you or your developer can add rules that override the default quiz styles.
To find the correct selector, right-click on the element in your browser and choose Inspect. Copy the selector from the developer tools.

Add specificity to your CSS rules

Add specificity to your CSS rules to target the whole quiz or just one question.

#quiz p {color: red;} - Changes the color of all paragraphs in the quiz.

#question-AbC7Zde p {color: red;} - Changes the color of a paragraph only in question AbC7Zde.

You can find the question ID in Quiz Builder > Question settings.

You can style any element of your quiz or results page using the built-in CSS console in the Quiz Design tab.

Open your quiz and go to the Quiz Design tab.
In the Custom CSS section, click Add to open the CSS console. This will create an input area where you or your developer can add rules that override the default quiz styles.
To find the correct selector, right-click on the element in your browser and choose Inspect. Copy the selector from the developer tools.

Add specificity to your CSS rules

Add specificity to your CSS rules to target the whole quiz or just one question.

#quiz p {color: red;} - Changes the color of all paragraphs in the quiz.

#question-AbC7Zde p {color: red;} - Changes the color of a paragraph only in question AbC7Zde.

You can find the question ID in Quiz Builder > Question settings.

Questions Tab¶

ShopifyShopify V2WooCommerceMagentoBigCommerceStandalone

In the Quiz Buider tab, you can design each question/slide.

Question Settings

Click on the wrench icon in the bottom-right corner to open the question settings.

In question setting you'll find many options to customize your question and make it very unique.

Show description - Activates an extra text field on the slide below the main question field. Allows you to add more text to a slide. Toggle to activate.

Show description

Description fields are very useful as they not only allow you to add extra text to the slide but also style it using the Markdown language, embed images and videos using Markdown or use information recalls to display the user's previous answers.
Image - Click Add to uplaod a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated. You can choose the image position and adjust the opacity.
Video - Click Add to uplaod a featured video to the question. An extra menu appears once activated. You can choose the video position and adjust the opacity.
Join next question- Allows you to join the current question with the next one.

Example
Custom JS Code - Click Add to open a JavaScript console. Allows you to add custom JavaScript to the quiz question.

Custom JavaScript

You can add custom JavaScript to questions and the results page to extend behavior and layout.

Use cases - Inject custom texts, images, and conditional UI. - Adjust layout dynamically. - Render custom product recommendations. - Redirect to a specific store page. - Fire tracking on specific steps (GA, Meta Pixel, etc.).

See How to Add JavaScript to the Quiz for implementation details and best practices.

Adding Media

You can add media into quiz questions in two ways:

Per-question media via Question Settings: Upload a unique image per slide (background or split) or add a short video block for richer context.
Embed via Markdown in text blocks such as question description or content blocks on the results page:
Markdown
- Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
- Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```

Tip

See How to Add/Adjust Images for optimization guidance (dimensions, compression, readability).

Styling Text

For quick formatting, you can use Markdown inside text blocks (questions, choices, results).

Using Markdown

Headings

# H1
## H2
### H3

Text styles

*italic*  
**bold**  
***bold & italic***

Links

[link title](https://www.example.com)

Images

![alt text](https://www.example.com/path/to/image.jpg)

Videos

![](https://youtu.be/0_tO8HgJiLQ)

Need brand fonts/colors?

Use Custom CSS in the Quiz Design tab.

Picture Choice Slides

You can add a Picture Choice question to your quiz, which will allow you to add an image to each choice in that multiple choice question.

how_to_improve_image_quality_picturechoicequestions

Open the Quiz Builder and click + Add new question. This will open a list of available question types.
Select Picture choice. This creates a multiple-choice slide where each option is displayed as a clickable image. You’ll be able to upload your own image for each choice.

Image size

For best results, upload square images up to 400×400px.

Non-square images will be cropped automatically.

To avoid distortion, you can resize or crop them beforehand using a free online image editor.

All uploaded images are optimized by the app for faster loading.
Click + Add choice to insert a new answer option into the block.
For each choice, click + Image to upload an image from your computer.
Repeat the process by adding more choices until your picture choice question is complete.

The Questions tab lets you design each slide. You can add blocks such as text, images, videos, or choice elements, then rearrange them for a unique layout.

Design individual slides in the Questions tab by adding blocks (text, images, videos, answer choices).

Question Settings¶

Open question settings by clicking on the question.
Upload a featured image for each question and chose a background or a split layout as well as alignment options for mobile.
Each question supports custom CSS or JavaScript for independent styling.
Advanced settings allow for features like auto-advancing questions.

Block Settings¶

Open block settings by clicking on the block.
Customize each block within a question:
Text blocks: format text, add links, recall previous answers.
Image blocks: resize and align graphics.
Picture-choice blocks: select image ratios and mobile layout options (1-2 per row or carousel).

Choice Settings¶

Choice settings give you control over individual answers, letting you tweak each option separately.

In the Quiz Buider tab, you can design each question/slide.

Question Settings

Click on the wrench icon in the bottom-right corner to open the question settings.

In question setting you'll find many options to customize your question and make it very unique.

Show description - Activates an extra text field on the slide below the main question field. Allows you to add more text to a slide. Toggle to activate.

Show description

Description fields are very useful as they not only allow you to add extra text to the slide but also style it using the Markdown language, embed images and videos using Markdown or use information recalls to display the user's previous answers.
Image - Click Add to uplaod a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated. You can choose the image position and adjust the opacity.
Video - Click Add to uplaod a featured video to the question. An extra menu appears once activated. You can choose the video position and adjust the opacity.
Join next question- Allows you to join the current question with the next one.

Example
Custom JS Code - Click Add to open a JavaScript console. Allows you to add custom JavaScript to the quiz question.

Custom JavaScript

You can add custom JavaScript to questions and the results page to extend behavior and layout.

Use cases - Inject custom texts, images, and conditional UI. - Adjust layout dynamically. - Render custom product recommendations. - Redirect to a specific store page. - Fire tracking on specific steps (GA, Meta Pixel, etc.).

See How to Add JavaScript to the Quiz for implementation details and best practices.

Adding Media

You can add media into quiz questions in two ways:

Per-question media via Question Settings: Upload a unique image per slide (background or split) or add a short video block for richer context.
Embed via Markdown in text blocks such as question description or content blocks on the results page:
Markdown
- Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
- Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```

Tip

See How to Add/Adjust Images for optimization guidance (dimensions, compression, readability).

Styling Text

For quick formatting, you can use Markdown inside text blocks (questions, choices, results).

Using Markdown

Headings

# H1
## H2
### H3

Text styles

*italic*  
**bold**  
***bold & italic***

Links

[link title](https://www.example.com)

Images

![alt text](https://www.example.com/path/to/image.jpg)

Videos

![](https://youtu.be/0_tO8HgJiLQ)

Need brand fonts/colors?

Use Custom CSS in the Quiz Design tab.

Picture Choice Slides

You can add a Picture Choice question to your quiz, which will allow you to add an image to each choice in that multiple choice question.

how_to_improve_image_quality_picturechoicequestions

Open the Quiz Builder and click + Add new question. This will open a list of available question types.
Select Picture choice. This creates a multiple-choice slide where each option is displayed as a clickable image. You’ll be able to upload your own image for each choice.

Image size

For best results, upload square images up to 400×400px.

Non-square images will be cropped automatically.

To avoid distortion, you can resize or crop them beforehand using a free online image editor.

All uploaded images are optimized by the app for faster loading.
Click + Add choice to insert a new answer option into the block.
For each choice, click + Image to upload an image from your computer.
Repeat the process by adding more choices until your picture choice question is complete.

In the Quiz Buider tab, you can design each question/slide.

Question Settings

Click on the wrench icon in the bottom-right corner to open the question settings.

In question setting you'll find many options to customize your question and make it very unique.

Show description - Activates an extra text field on the slide below the main question field. Allows you to add more text to a slide. Toggle to activate.

Show description

Description fields are very useful as they not only allow you to add extra text to the slide but also style it using the Markdown language, embed images and videos using Markdown or use information recalls to display the user's previous answers.
Image - Click Add to uplaod a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated. You can choose the image position and adjust the opacity.
Video - Click Add to uplaod a featured video to the question. An extra menu appears once activated. You can choose the video position and adjust the opacity.
Join next question- Allows you to join the current question with the next one.

Example
Custom JS Code - Click Add to open a JavaScript console. Allows you to add custom JavaScript to the quiz question.

Custom JavaScript

You can add custom JavaScript to questions and the results page to extend behavior and layout.

Use cases - Inject custom texts, images, and conditional UI. - Adjust layout dynamically. - Render custom product recommendations. - Redirect to a specific store page. - Fire tracking on specific steps (GA, Meta Pixel, etc.).

See How to Add JavaScript to the Quiz for implementation details and best practices.

Adding Media

You can add media into quiz questions in two ways:

Per-question media via Question Settings: Upload a unique image per slide (background or split) or add a short video block for richer context.
Embed via Markdown in text blocks such as question description or content blocks on the results page:
Markdown
- Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
- Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```

Tip

See How to Add/Adjust Images for optimization guidance (dimensions, compression, readability).

Styling Text

For quick formatting, you can use Markdown inside text blocks (questions, choices, results).

Using Markdown

Headings

# H1
## H2
### H3

Text styles

*italic*  
**bold**  
***bold & italic***

Links

[link title](https://www.example.com)

Images

![alt text](https://www.example.com/path/to/image.jpg)

Videos

![](https://youtu.be/0_tO8HgJiLQ)

Need brand fonts/colors?

Use Custom CSS in the Quiz Design tab.

Picture Choice Slides

You can add a Picture Choice question to your quiz, which will allow you to add an image to each choice in that multiple choice question.

how_to_improve_image_quality_picturechoicequestions

Open the Quiz Builder and click + Add new question. This will open a list of available question types.
Select Picture choice. This creates a multiple-choice slide where each option is displayed as a clickable image. You’ll be able to upload your own image for each choice.

Image size

For best results, upload square images up to 400×400px.

Non-square images will be cropped automatically.

To avoid distortion, you can resize or crop them beforehand using a free online image editor.

All uploaded images are optimized by the app for faster loading.
Click + Add choice to insert a new answer option into the block.
For each choice, click + Image to upload an image from your computer.
Repeat the process by adding more choices until your picture choice question is complete.

In the Quiz Buider tab, you can design each question/slide.

Question Settings

Click on the wrench icon in the bottom-right corner to open the question settings.

In question setting you'll find many options to customize your question and make it very unique.

Show description - Activates an extra text field on the slide below the main question field. Allows you to add more text to a slide. Toggle to activate.

Show description

Description fields are very useful as they not only allow you to add extra text to the slide but also style it using the Markdown language, embed images and videos using Markdown or use information recalls to display the user's previous answers.
Image - Click Add to uplaod a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated. You can choose the image position and adjust the opacity.
Video - Click Add to uplaod a featured video to the question. An extra menu appears once activated. You can choose the video position and adjust the opacity.
Join next question- Allows you to join the current question with the next one.

Example
Custom JS Code - Click Add to open a JavaScript console. Allows you to add custom JavaScript to the quiz question.

Custom JavaScript

You can add custom JavaScript to questions and the results page to extend behavior and layout.

Use cases - Inject custom texts, images, and conditional UI. - Adjust layout dynamically. - Render custom product recommendations. - Redirect to a specific store page. - Fire tracking on specific steps (GA, Meta Pixel, etc.).

See How to Add JavaScript to the Quiz for implementation details and best practices.

Adding Media

You can add media into quiz questions in two ways:

Per-question media via Question Settings: Upload a unique image per slide (background or split) or add a short video block for richer context.
Embed via Markdown in text blocks such as question description or content blocks on the results page:
Markdown
- Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
- Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```

Tip

See How to Add/Adjust Images for optimization guidance (dimensions, compression, readability).

Styling Text

For quick formatting, you can use Markdown inside text blocks (questions, choices, results).

Using Markdown

Headings

# H1
## H2
### H3

Text styles

*italic*  
**bold**  
***bold & italic***

Links

[link title](https://www.example.com)

Images

![alt text](https://www.example.com/path/to/image.jpg)

Videos

![](https://youtu.be/0_tO8HgJiLQ)

Need brand fonts/colors?

Use Custom CSS in the Quiz Design tab.

Picture Choice Slides

You can add a Picture Choice question to your quiz, which will allow you to add an image to each choice in that multiple choice question.

how_to_improve_image_quality_picturechoicequestions

Open the Quiz Builder and click + Add new question. This will open a list of available question types.
Select Picture choice. This creates a multiple-choice slide where each option is displayed as a clickable image. You’ll be able to upload your own image for each choice.

Image size

For best results, upload square images up to 400×400px.

Non-square images will be cropped automatically.

To avoid distortion, you can resize or crop them beforehand using a free online image editor.

All uploaded images are optimized by the app for faster loading.
Click + Add choice to insert a new answer option into the block.
For each choice, click + Image to upload an image from your computer.
Repeat the process by adding more choices until your picture choice question is complete.

In the Quiz Buider tab, you can design each question/slide.

Question Settings

Click on the wrench icon in the bottom-right corner to open the question settings.

In question setting you'll find many options to customize your question and make it very unique.

Show description - Activates an extra text field on the slide below the main question field. Allows you to add more text to a slide. Toggle to activate.

Show description

Description fields are very useful as they not only allow you to add extra text to the slide but also style it using the Markdown language, embed images and videos using Markdown or use information recalls to display the user's previous answers.
Image - Click Add to uplaod a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated. You can choose the image position and adjust the opacity.
Video - Click Add to uplaod a featured video to the question. An extra menu appears once activated. You can choose the video position and adjust the opacity.
Join next question- Allows you to join the current question with the next one.

Example
Custom JS Code - Click Add to open a JavaScript console. Allows you to add custom JavaScript to the quiz question.

Custom JavaScript

You can add custom JavaScript to questions and the results page to extend behavior and layout.

Use cases - Inject custom texts, images, and conditional UI. - Adjust layout dynamically. - Render custom product recommendations. - Redirect to a specific store page. - Fire tracking on specific steps (GA, Meta Pixel, etc.).

See How to Add JavaScript to the Quiz for implementation details and best practices.

Adding Media

You can add media into quiz questions in two ways:

Per-question media via Question Settings: Upload a unique image per slide (background or split) or add a short video block for richer context.
Embed via Markdown in text blocks such as question description or content blocks on the results page:
Markdown
- Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
- Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```

Tip

See How to Add/Adjust Images for optimization guidance (dimensions, compression, readability).

Styling Text

For quick formatting, you can use Markdown inside text blocks (questions, choices, results).

Using Markdown

Headings

# H1
## H2
### H3

Text styles

*italic*  
**bold**  
***bold & italic***

Links

[link title](https://www.example.com)

Images

![alt text](https://www.example.com/path/to/image.jpg)

Videos

![](https://youtu.be/0_tO8HgJiLQ)

Need brand fonts/colors?

Use Custom CSS in the Quiz Design tab.

Picture Choice Slides

You can add a Picture Choice question to your quiz, which will allow you to add an image to each choice in that multiple choice question.

how_to_improve_image_quality_picturechoicequestions

Open the Quiz Builder and click + Add new question. This will open a list of available question types.
Select Picture choice. This creates a multiple-choice slide where each option is displayed as a clickable image. You’ll be able to upload your own image for each choice.

Image size

For best results, upload square images up to 400×400px.

Non-square images will be cropped automatically.

To avoid distortion, you can resize or crop them beforehand using a free online image editor.

All uploaded images are optimized by the app for faster loading.
Click + Add choice to insert a new answer option into the block.
For each choice, click + Image to upload an image from your computer.
Repeat the process by adding more choices until your picture choice question is complete.

Results Page Tab¶

ShopifyShopify V2WooCommerceMagentoBigCommerceStandalone

The Results Page tab is where you design what users see after completing the quiz.

You can add differrent blocks to the results page such as heading, text, image, custom HTML, products and slots. Click on the + icon to add a block.

manual_quizbuilder_resultspage_addblockmenu

Each block has its own settings which you can use by clicking on the wrench icon in the bottom-right corner.

Click add on the image block to upload an image to the results page and adjust it's opacity.
heading and content blocks allow you to add text to the results page, style it with Markdown lanuguage or embed images, links or videos.
How do I use Markdown lanague?

Headings
```
# H1
## H2
### H3
```
Text styles
```
*italic*  
**bold**  
***bold & italic***
```
Links
```
[link title](https://www.example.com)
```
Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```
custom HTML blocks allow you to add custom HTML to the results page.
products blocks allow you to add products to the results page.
slots blocks allow you to add products to the results page sorted into slots.

Results Page settings

Click on the gear icon in the top-right corner to open the results page settings.

In the Basic Settings section, you can add a dedicated background image for the results page.
In the Basic Settings section, you can adjust the Individual Product Settings allowing you to show/hide product images, prices, vendors, etc.
In the Advanced Settings section, you can inject Custom JavaScript that affects only the results page.

Need a fully custom layout?

Build a custom results page on your site and send quiz data to it with the Callback Function (receives responses as JSON). This gives you total control over layout and rendering.

Check How to use the Callback Function for detailed instructions.

The Results Page tab is where you design what users see after completing the quiz.

You can add text, images, videos, product blocks, buttons, or even custom HTML. Each section and block has its own settings, similar to the Questions tab, allowing you to style and align content exactly how you want it.

manual_shopifyV2_quizbuilder_quizbuilder_resultspage_resultspages_blocktypes

Each block has design settings for styling and layout adjustments.

In the Results Page settings, you can apply a dedicated background image, or inject CSS and JavaScript that only affect this page.

manual_shopifyV2_quizbuilder_quizbuilder_resultspage_resultspages_resultspagesettings

The most important part of this tab is the Product Block.

manual_shopifyV2_quizbuilder_quizbuilder_resultspage_resultspages_blocksettings_products

Here, you decide how recommended products appear. You can:

Choose alignment and text sizes.
Reorder product components (image, title, price, vendor, metafields, etc.) by dragging and dropping.
Add or remove components to build your perfect product card.
Configure individual component settings, such as image quality for product photos or which metafields to display.

The Results Page tab is where you design what users see after completing the quiz.

You can add differrent blocks to the results page such as heading, text, image, custom HTML, products and slots. Click on the + icon to add a block.

manual_quizbuilder_resultspage_addblockmenu

Each block has its own settings which you can use by clicking on the wrench icon in the bottom-right corner.

Click add on the image block to upload an image to the results page and adjust it's opacity.
heading and content blocks allow you to add text to the results page, style it with Markdown lanuguage or embed images, links or videos.
How do I use Markdown lanague?

Headings
```
# H1
## H2
### H3
```
Text styles
```
*italic*  
**bold**  
***bold & italic***
```
Links
```
[link title](https://www.example.com)
```
Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```
custom HTML blocks allow you to add custom HTML to the results page.
products blocks allow you to add products to the results page.
slots blocks allow you to add products to the results page sorted into slots.

Results Page settings

Click on the gear icon in the top-right corner to open the results page settings.

In the Basic Settings section, you can add a dedicated background image for the results page.
In the Basic Settings section, you can adjust the Individual Product Settings allowing you to show/hide product images, prices, vendors, etc.
In the Advanced Settings section, you can inject Custom JavaScript that affects only the results page.

Need a fully custom layout?

Build a custom results page on your site and send quiz data to it with the Callback Function (receives responses as JSON). This gives you total control over layout and rendering.

Check How to use the Callback Function for detailed instructions.

The Results Page tab is where you design what users see after completing the quiz.

You can add differrent blocks to the results page such as heading, text, image, custom HTML, products and slots. Click on the + icon to add a block.

manual_quizbuilder_resultspage_addblockmenu

Each block has its own settings which you can use by clicking on the wrench icon in the bottom-right corner.

Click add on the image block to upload an image to the results page and adjust it's opacity.
heading and content blocks allow you to add text to the results page, style it with Markdown lanuguage or embed images, links or videos.
How do I use Markdown lanague?

Headings
```
# H1
## H2
### H3
```
Text styles
```
*italic*  
**bold**  
***bold & italic***
```
Links
```
[link title](https://www.example.com)
```
Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```
custom HTML blocks allow you to add custom HTML to the results page.
products blocks allow you to add products to the results page.
slots blocks allow you to add products to the results page sorted into slots.

Results Page settings

Click on the gear icon in the top-right corner to open the results page settings.

In the Basic Settings section, you can add a dedicated background image for the results page.
In the Basic Settings section, you can adjust the Individual Product Settings allowing you to show/hide product images, prices, vendors, etc.
In the Advanced Settings section, you can inject Custom JavaScript that affects only the results page.

Need a fully custom layout?

Build a custom results page on your site and send quiz data to it with the Callback Function (receives responses as JSON). This gives you total control over layout and rendering.

Check How to use the Callback Function for detailed instructions.

The Results Page tab is where you design what users see after completing the quiz.

You can add differrent blocks to the results page such as heading, text, image, custom HTML, products and slots. Click on the + icon to add a block.

manual_quizbuilder_resultspage_addblockmenu

Each block has its own settings which you can use by clicking on the wrench icon in the bottom-right corner.

Click add on the image block to upload an image to the results page and adjust it's opacity.
heading and content blocks allow you to add text to the results page, style it with Markdown lanuguage or embed images, links or videos.
How do I use Markdown lanague?

Headings
```
# H1
## H2
### H3
```
Text styles
```
*italic*  
**bold**  
***bold & italic***
```
Links
```
[link title](https://www.example.com)
```
Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```
custom HTML blocks allow you to add custom HTML to the results page.
products blocks allow you to add products to the results page.
slots blocks allow you to add products to the results page sorted into slots.

Results Page settings

Click on the gear icon in the top-right corner to open the results page settings.

In the Basic Settings section, you can add a dedicated background image for the results page.
In the Basic Settings section, you can adjust the Individual Product Settings allowing you to show/hide product images, prices, vendors, etc.
In the Advanced Settings section, you can inject Custom JavaScript that affects only the results page.

Need a fully custom layout?

Build a custom results page on your site and send quiz data to it with the Callback Function (receives responses as JSON). This gives you total control over layout and rendering.

Check How to use the Callback Function for detailed instructions.

The Results Page tab is where you design what users see after completing the quiz.

You can add differrent blocks to the results page such as heading, text, image, custom HTML, products and slots. Click on the + icon to add a block.

manual_quizbuilder_resultspage_addblockmenu

Each block has its own settings which you can use by clicking on the wrench icon in the bottom-right corner.

Click add on the image block to upload an image to the results page and adjust it's opacity.
heading and content blocks allow you to add text to the results page, style it with Markdown lanuguage or embed images, links or videos.
How do I use Markdown lanague?

Headings
```
# H1
## H2
### H3
```
Text styles
```
*italic*  
**bold**  
***bold & italic***
```
Links
```
[link title](https://www.example.com)
```
Images
```
![alt text](https://www.example.com/path/to/image.jpg)
```
Videos
```
![](https://youtu.be/0_tO8HgJiLQ)
```
custom HTML blocks allow you to add custom HTML to the results page.
products blocks allow you to add products to the results page.
slots blocks allow you to add products to the results page sorted into slots.

Results Page settings

Click on the gear icon in the top-right corner to open the results page settings.

In the Basic Settings section, you can add a dedicated background image for the results page.
In the Basic Settings section, you can adjust the Individual Product Settings allowing you to show/hide product images, prices, vendors, etc.
In the Advanced Settings section, you can inject Custom JavaScript that affects only the results page.

Need a fully custom layout?

Build a custom results page on your site and send quiz data to it with the Callback Function (receives responses as JSON). This gives you total control over layout and rendering.

Check How to use the Callback Function for detailed instructions.

This article explains all the options available for customizing the quiz design in the RevenueHunt app.