How to Add and Adjust Images in the Quiz¶
There are several ways you can add images to your quiz in the RevenueHunt app.
This article explains how you can add images to your quiz and provides tips on how to optimize the image quality for the best quiz performance.
Images in the Quiz¶
There are the different ways you can add images to your quiz in the RevenueHunt app:
-
Quiz Background image - You can uplaod a background image for the whole quiz via 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 - You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
-
Product Image - You can also add a Product/Variants/Collection Block to your quiz results page, which will allow you to display a product/variant/collection image in the results page.
Quiz Background Image¶
You can upload a background image for the whole quiz via the Quiz Design tab.
-
Open your quiz and navigate to the Quiz Design tab. In the Quiz Design section of the quiz builder you can change how the quiz Questions or the Results Page look.
-
Our theme editor allows you to pick one of our multiple color palettes, choose from multiple fonts and add a default background image to your quiz.
Background
- Opens a color menu that allows you to change the color of 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 allows you to adjust the opacity of the uploaded background image.
Background image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background image for the whole quiz in a desired resolution.
Sample code:
Different background images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod a different background image for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a background image for the whole quiz via the Quiz Design tab.
-
Open the Quiz Design tab
-
Click on
Background
-
Change the background color by clicking on the color.
Background color
The color of the background matters if you want to adjust the image opacity. A light colored background will make the image more visible, while a dark background will make the image more subtle.
-
Upload a background image by clicking
Select image
. -
Adjust the background opacity with the slider.
-
Once uploaded, click
Change
to change the image orRemove
to remove it.
Background image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use large, high-resolution images: at least 1920x1080px (Full HD)
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
You can upload a background image for the whole quiz via the Quiz Design tab.
-
Open your quiz and navigate to the Quiz Design tab. In the Quiz Design section of the quiz builder you can change how the quiz Questions or the Results Page look.
-
Our theme editor allows you to pick one of our multiple color palettes, choose from multiple fonts and add a default background image to your quiz.
Background
- Opens a color menu that allows you to change the color of 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 allows you to adjust the opacity of the uploaded background image.
Background image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background image for the whole quiz in a desired resolution.
Sample code:
Different background images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod a different background image for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a background image for the whole quiz via the Quiz Design tab.
-
Open your quiz and navigate to the Quiz Design tab. In the Quiz Design section of the quiz builder you can change how the quiz Questions or the Results Page look.
-
Our theme editor allows you to pick one of our multiple color palettes, choose from multiple fonts and add a default background image to your quiz.
Background
- Opens a color menu that allows you to change the color of 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 allows you to adjust the opacity of the uploaded background image.
Background image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background image for the whole quiz in a desired resolution.
Sample code:
Different background images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod a different background image for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a background image for the whole quiz via the Quiz Design tab.
-
Open your quiz and navigate to the Quiz Design tab. In the Quiz Design section of the quiz builder you can change how the quiz Questions or the Results Page look.
-
Our theme editor allows you to pick one of our multiple color palettes, choose from multiple fonts and add a default background image to your quiz.
Background
- Opens a color menu that allows you to change the color of 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 allows you to adjust the opacity of the uploaded background image.
Background image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background image for the whole quiz in a desired resolution.
Sample code:
Different background images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod a different background image for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a background image for the whole quiz via the Quiz Design tab.
-
Open your quiz and navigate to the Quiz Design tab. In the Quiz Design section of the quiz builder you can change how the quiz Questions or the Results Page look.
-
Our theme editor allows you to pick one of our multiple color palettes, choose from multiple fonts and add a default background image to your quiz.
Background
- Opens a color menu that allows you to change the color of 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 allows you to adjust the opacity of the uploaded background image.
Background image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background image for the whole quiz in a desired resolution.
Sample code:
Different background images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod a different background image for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
Question Background/Split Image¶
You can upload a different background image to each question in the quiz via the question settings.
-
Go to the Quiz Builder and click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question. An extra menu appears once activated.above
- Places the uplaoded image above the question, on top of the slide.below
- Places the uplaoded image below the question, above the choices.background
- Places the uplaoded image on the background of the slide (overrides the defautl quiz background).split
- Places the uploaded image on the side of the slide. Splits the sldie into two. On mobile, the image is placed on top of the question.Image Opacity
- A slider which allows to adjust the opacity of the uplaoded image.
Uploaded image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, uploaded images may crop or scale differently depending on the device.
To ensure your uploaded images look great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background/split image for the whole quiz in a desired resolution.
Sample code:
Different images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod different images for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a different background image to each question in the quiz via the question settings.
-
Open the Question settings
-
Click on
Image upload
-
Click
Select image
to upload a background image to this quiz question from your computer. You can also chose from existing images from your quiz gallery. -
In
Image position
you can choose between two options:background
(for a full background image) orsplit
(for a split image). Each option has it's own settings explained below. -
Once uploaded click
Change
to change the image orRemove
to remove it. -
You can also adjust the
Image opacity
with the slider.
Background/Split image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, background images may crop or scale differently depending on the device.
To ensure your background looks great across all devices, we recommend:
✅ Use large, high-resolution images: at least 1920x1080px (Full HD)
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Background image settings
Image layout
- Place the image as a background
or split
the screen in half with the image.
Image opacity
- Use the slider to change opacity percentage of the uplaoded image.
Split image settings
Image layout
- Place the image as a background
or split
the screen in half with the image.
Image opacity
- Use the slider to change opacity percentage of the uplaoded image.
Image position (desktop)
- Choose whether the image should be placed left
or right
of the question on desktop.
Image position (mobile)
- Choose whether the image should be placed above
, below
a question or hidden
on mobile.
Tip
Switch between the desktop and mobile view by clicking the desktop
or mobile
icon in the top right corner of the middle screen.
You can upload a different background image to each question in the quiz via the question settings.
-
Go to the Quiz Builder and click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated.above
- Places the uplaoded image above the question, on top of the slide.below
- Places the uplaoded image below the question, above the choices.background
- Places the uplaoded image on the background of the slide (overrides the defautl quiz background).split
- Places the uploaded image on the side of the slide. Splits the sldie into two. On mobile, the image is placed on top of the question.Image Opacity
- A slider which allows to adjust the opacity of the uplaoded image.
Uploaded image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, uploaded images may crop or scale differently depending on the device.
To ensure your uploaded images look great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background/split image for the whole quiz in a desired resolution.
Sample code:
Different images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod different images for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a different background image to each question in the quiz via the question settings.
-
Go to the Quiz Builder and click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated.above
- Places the uplaoded image above the question, on top of the slide.below
- Places the uplaoded image below the question, above the choices.background
- Places the uplaoded image on the background of the slide (overrides the defautl quiz background).split
- Places the uploaded image on the side of the slide. Splits the sldie into two. On mobile, the image is placed on top of the question.Image Opacity
- A slider which allows to adjust the opacity of the uplaoded image.
Uploaded image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, uploaded images may crop or scale differently depending on the device.
To ensure your uploaded images look great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background/split image for the whole quiz in a desired resolution.
Sample code:
Different images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod different images for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a different background image to each question in the quiz via the question settings.
-
Go to the Quiz Builder and click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated.above
- Places the uplaoded image above the question, on top of the slide.below
- Places the uplaoded image below the question, above the choices.background
- Places the uplaoded image on the background of the slide (overrides the defautl quiz background).split
- Places the uploaded image on the side of the slide. Splits the sldie into two. On mobile, the image is placed on top of the question.Image Opacity
- A slider which allows to adjust the opacity of the uplaoded image.
Uploaded image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, uploaded images may crop or scale differently depending on the device.
To ensure your uploaded images look great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background/split image for the whole quiz in a desired resolution.
Sample code:
Different images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod different images for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
You can upload a different background image to each question in the quiz via the question settings.
-
Go to the Quiz Builder and click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question. Image should be max 1000px x 1000px. An extra menu appears once activated.above
- Places the uplaoded image above the question, on top of the slide.below
- Places the uplaoded image below the question, above the choices.background
- Places the uplaoded image on the background of the slide (overrides the defautl quiz background).split
- Places the uploaded image on the side of the slide. Splits the sldie into two. On mobile, the image is placed on top of the question.Image Opacity
- A slider which allows to adjust the opacity of the uplaoded image.
Uploaded image Tip
Our app uses a responsive design, meaning your quiz will adjust to different screen sizes (desktop, tablet, and mobile). Because of this, uploaded images may crop or scale differently depending on the device.
To ensure your uploaded images look great across all devices, we recommend:
✅ Use high-resolution images of max. 1000px x 1000px size.
✅ Avoid images with text — it might be cut off or obscured
✅ If needed, keep important elements (like logos or text) centered
✅ Use soft, neutral backgrounds that won’t clash with quiz content
✅ Test your quiz on different devices to see how the image behaves
Remember, simpler is often better for responsive backgrounds!
Higher resolution images
You can use Quiz Design > Custom CSS console to upload a background/split image for the whole quiz in a desired resolution.
Sample code:
Different images for mobile and desktop
With Custom CSS in Quiz Design > Custom CSS console, you can also uplaod different images for mobile and desktop. For this your developer can use CSS media queries to target different screen sizes.
Sample code:
Image Blocks¶
QUESTIONS
You can upload images to quiz questions via the question settings or using Markdowns in the Question Description.
Add Image via Question settings
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question from your computer. -
Select the image orientation to be either
above
,below
,background
orsplit
. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Activate the
question description
toggle. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
RESULTS PAGE
You can also uplad images to the Results page via Image Block on the Results page or using Markdowns in the Content blocks.
Add Image via Image Block
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Click on
Image
block and a new block will be added to the results page. -
Click
Add
to upload an image from your computer. You can adjust the image opacity with the slider. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Select a
Content
block. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
You can upload an individual image via an Image Block directly into one of the quiz questions or results page.
- Navigate to Questions or Results page tab in the quiz builder.
-
Click
+ Add block
to see a list of available blocks. -
Click on
Image
block and a new block will be added to the question or a section on the results page. -
Open the Image block settings.
-
Click
Select image
to upload an image from your computer or pick one from your in-app image gallery. -
Once uploaded, click
Change
to replace the image orRemove
to delete it. -
Add in
Alt text
to make the image more accessible. Note: Alt text is used by screen readers to describe the image to visually impaired users. -
You can adjust the image size in the
Image height
dropdown. You can choose betweenTiny
,Small
,Medium
,Large
orAdapt to image
.Adapt to image
Adapt to image
will adjust the image size to the original size of the image. Pick this option if you want to keep the original image size and resolution. -
You can change the alignement of the image left, right or center.
QUESTIONS
You can upload images to quiz questions via the question settings or using Markdowns in the Question Description.
Add Image via Question settings
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question from your computer. -
Select the image orientation to be either
above
,below
,background
orsplit
. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Activate the
question description
toggle. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
RESULTS PAGE
You can also uplad images to the Results page via Image Block on the Results page or using Markdowns in the Content blocks.
Add Image via Image Block
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Click on
Image
block and a new block will be added to the results page. -
Click
Add
to upload an image from your computer. You can adjust the image opacity with the slider. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Select a
Content
block. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
QUESTIONS
You can upload images to quiz questions via the question settings or using Markdowns in the Question Description.
Add Image via Question settings
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question from your computer. -
Select the image orientation to be either
above
,below
,background
orsplit
. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Activate the
question description
toggle. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
RESULTS PAGE
You can also uplad images to the Results page via Image Block on the Results page or using Markdowns in the Content blocks.
Add Image via Image Block
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Click on
Image
block and a new block will be added to the results page. -
Click
Add
to upload an image from your computer. You can adjust the image opacity with the slider. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Select a
Content
block. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
QUESTIONS
You can upload images to quiz questions via the question settings or using Markdowns in the Question Description.
Add Image via Question settings
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question from your computer. -
Select the image orientation to be either
above
,below
,background
orsplit
. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Activate the
question description
toggle. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
RESULTS PAGE
You can also uplad images to the Results page via Image Block on the Results page or using Markdowns in the Content blocks.
Add Image via Image Block
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Click on
Image
block and a new block will be added to the results page. -
Click
Add
to upload an image from your computer. You can adjust the image opacity with the slider. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Select a
Content
block. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
QUESTIONS
You can upload images to quiz questions via the question settings or using Markdowns in the Question Description.
Add Image via Question settings
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Find the
Image
section in the question settings and clickAdd
to upload a featured image to the question from your computer. -
Select the image orientation to be either
above
,below
,background
orsplit
. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Click on the question you want to add an image to.
-
Click on the
wrench
icon to open the question settings. -
Activate the
question description
toggle. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
RESULTS PAGE
You can also uplad images to the Results page via Image Block on the Results page or using Markdowns in the Content blocks.
Add Image via Image Block
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Click on
Image
block and a new block will be added to the results page. -
Click
Add
to upload an image from your computer. You can adjust the image opacity with the slider. -
Click
Publish
to save the changes.
Add Image via Markdown
-
Open the Quiz Builder.
-
Go the Results page tab in the quiz builder.
-
Click on the
+ Add block
button to see a list of available blocks. -
Select a
Content
block. -
In the new text field that appears, add the following markdown code:
Replace
https://your-image-url.com/image.jpg
with the URL of the image you want to upload. -
Click
Publish
to save the changes.
Picture Choices¶
You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
- Open the Quiz Builder.
-
Click
+ Add new question
to see a list of available questions. -
Click on
Picture choice
to add a picture choice block to the question. Pictures Choices are a Multiple choice slide which displays choices as clickable images. You can uplaod your own image to each choice.Image size
It'sd recommended to uplaod square images, max. 400px x 400px.
If your images are not square, they will be cropped to a square. You can adjust them in a free online image editor before uploading.
RevenueHunt app optimizes the uploaded images to load faster.
-
Click on
+ Add choice
to add a new choice to the picture choice block. -
Click on
+ image
to upload an image from your computer. -
Add more choices by clicking
+ Add choice
and repeat the process.
You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
-
Open the Question settings
-
Click
+ Add question
to see a list of available questions or+ Add block
to see a list of available blocks. -
Click on
Picture choice
to add a picture choice block to the question. -
Click on
+ Add choice
to add a new choice to the picture choice block. -
Click on
Select image
to upload an image from your computer or pick one from your in-app image gallery. -
Once uploaded, click
Change
to replace the image orRemove
to delete it. -
Open the
Picture Choice Settings
and go the Advanced settings. -
Under
Picture size/ratio
you can choose betweenTiny icon 24px
,Small icon 48px
,Medium icon 1:1
orLarge icon 4:3
. -
You can also check the:
Hide checkbox/radio
to hide the checkbox/radio element from picture choices.Hide image label
to hide the text below each picture choice.Fit full image in box (no cropping)
to display the image in the box without cropping.
-
You can also enable the horizontal carousel on mobile by checking the
Enable horizontal carousel on mobile
option.Tip
Make sure to switch to the mobile view by clicking the
mobile
icon in the top right corner of the middle screen.
You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
- Open the Quiz Builder.
-
Click
+ Add new question
to see a list of available questions. -
Click on
Picture choice
to add a picture choice block to the question. Pictures Choices are a Multiple choice slide which displays choices as clickable images. You can uplaod your own image to each choice.Image size
It'sd recommended to uplaod square images, max. 400px x 400px.
If your images are not square, they will be cropped to a square. You can adjust them in a free online image editor before uploading.
RevenueHunt app optimizes the uploaded images to load faster.
-
Click on
+ Add choice
to add a new choice to the picture choice block. -
Click on
+ image
to upload an image from your computer. -
Add more choices by clicking
+ Add choice
and repeat the process.
You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
- Open the Quiz Builder.
-
Click
+ Add new question
to see a list of available questions. -
Click on
Picture choice
to add a picture choice block to the question. Pictures Choices are a Multiple choice slide which displays choices as clickable images. You can uplaod your own image to each choice.Image size
It'sd recommended to uplaod square images, max. 400px x 400px.
If your images are not square, they will be cropped to a square. You can adjust them in a free online image editor before uploading.
RevenueHunt app optimizes the uploaded images to load faster.
-
Click on
+ Add choice
to add a new choice to the picture choice block. -
Click on
+ image
to upload an image from your computer. -
Add more choices by clicking
+ Add choice
and repeat the process.
You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
- Open the Quiz Builder.
-
Click
+ Add new question
to see a list of available questions. -
Click on
Picture choice
to add a picture choice block to the question. Pictures Choices are a Multiple choice slide which displays choices as clickable images. You can uplaod your own image to each choice.Image size
It'sd recommended to uplaod square images, max. 400px x 400px.
If your images are not square, they will be cropped to a square. You can adjust them in a free online image editor before uploading.
RevenueHunt app optimizes the uploaded images to load faster.
-
Click on
+ Add choice
to add a new choice to the picture choice block. -
Click on
+ image
to upload an image from your computer. -
Add more choices by clicking
+ Add choice
and repeat the process.
You can add a Picture Choice block to your question, which will allow you to add an image to each choice in that multiple choice question.
- Open the Quiz Builder.
-
Click
+ Add new question
to see a list of available questions. -
Click on
Picture choice
to add a picture choice block to the question. Pictures Choices are a Multiple choice slide which displays choices as clickable images. You can uplaod your own image to each choice.Image size
It'sd recommended to uplaod square images, max. 400px x 400px.
If your images are not square, they will be cropped to a square. You can adjust them in a free online image editor before uploading.
RevenueHunt app optimizes the uploaded images to load faster.
-
Click on
+ Add choice
to add a new choice to the picture choice block. -
Click on
+ image
to upload an image from your computer. -
Add more choices by clicking
+ Add choice
and repeat the process.
Product Image¶
Product Images displayed on the Results page are taken directly from your Shopify catalog. Product slots diplsay the first image of the product or variant uploaded to your Shopify Products section.
Tip
You can adjust the product image settings with custom CSS in Quiz Design > Custom CSS console.
Sample code to adjust the product image size:
You can add a Product/Variants/Collection Block to your quiz results page, which will allow you to display a product image in the results page.
-
Navigate to Results page tab in the quiz builder.
-
Click
+ Add block
to see a list of available blocks. -
Click on
Product
(orVariant
orCollection
) block and a new block will be added to the results page. -
Under
Product components layout
you can select which elements of the product slot should be displayed. Click and drag an element to change it's position within the slot. -
Under
+ Add block
you can add an extra block to the product slot. All the data are synced directly from your Shopify catalog. -
Under
Image
you can adjust the image size.Picture size/ratio
- Choose the picture size for this block. Choose betweenMedium (1:1)
orOriginal
picture size (as uploaded to your Shopify Product).Note
Product images are taken directly from your Shopify catalog. Product slots diplsay the first image of the product, variant or a collection as uploaded to your Shopify Products/Collections section.
Tip
If you don't see any images when recommending collections, make sure that you have uploaded images to your Shopify collection.
Product Images displayed on the Results page are taken directly from your WooCommerce catalog. Product slots diplsay the first image of the product or variant uploaded to your WooCommerce Products section.
Tip
You can adjust the product image settings with custom CSS in Quiz Design > Custom CSS console.
Sample code to adjust the product image size:
Product Images displayed on the Results page are taken directly from your Magento catalog. Product slots diplsay the first image of the product or variant uploaded to your Magento Products section.
Tip
You can adjust the product image settings with custom CSS in Quiz Design > Custom CSS console.
Sample code to adjust the product image size:
Product Images displayed on the Results page are taken directly from your BigCommerce catalog. Product slots diplsay the first image of the product or variant uploaded to your BigCommerce Products section.
Tip
You can adjust the product image settings with custom CSS in Quiz Design > Custom CSS console.
Sample code to adjust the product image size:
Product Images displayed on the Results page are taken directly from your Standalone catalog or Google Product Feed. Product slots diplsay the first image of the product or variant uploaded to your Standalone Products section or Google Product Feed.
Tip
You can adjust the product image settings with custom CSS in Quiz Design > Custom CSS console.
Sample code to adjust the product image size:
This article explains how you can add images to your quiz and provides tips on how to optimize the image quality for the best quiz performance.