Skip to content

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 upload a background image for the whole quiz via the Quiz Design tab.

how_to_shopifyv2_improve_image_quality_backgroudimagequiz

  1. Open the Quiz Design tab

  2. Click on Background

  3. 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.

  4. Upload a background image by clicking Select image.

  5. Adjust the background opacity with the slider.

  6. Once uploaded, click Change to change the image or Remove 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.

how_to_improve_image_quality_backgroudimagequiz

  1. 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.

  2. 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.

    manual_quizbuilder_quizdesign_edittheme

    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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a background image for the whole quiz via the Quiz Design tab.

how_to_improve_image_quality_backgroudimagequiz

  1. 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.

  2. 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.

    manual_quizbuilder_quizdesign_edittheme

    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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a background image for the whole quiz via the Quiz Design tab.

how_to_improve_image_quality_backgroudimagequiz

  1. 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.

  2. 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.

    manual_quizbuilder_quizdesign_edittheme

    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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a background image for the whole quiz via the Quiz Design tab.

how_to_improve_image_quality_backgroudimagequiz

  1. 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.

  2. 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.

    manual_quizbuilder_quizdesign_edittheme

    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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a background image for the whole quiz via the Quiz Design tab.

how_to_improve_image_quality_backgroudimagequiz

  1. 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.

  2. 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.

    manual_quizbuilder_quizdesign_edittheme

    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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

Question Background/Split Image

You can upload a different background image to each question in the quiz via the question settings.

how_to_shopifyv2_improve_image_quality_backgroudimagequestion

  1. Open the Question settings

  2. Click on Image upload

  3. 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.

  4. In Image position you can choose between two options: background (for a full background image) or split (for a split image). Each option has it's own settings explained below.

  5. Once uploaded click Changeto change the image or Remove to remove it.

  6. 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

manual_shopifyV2_quizbuilder_quizbuilder_questions_questionsettings_backgroundimage

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

manual_shopifyV2_quizbuilder_quizbuilder_questions_questionsettings_splitimage

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.

how_to_improve_image_quality_backgroudimagequestion

  1. Go to the Quiz Builder and click on the question you want to add an image to.

  2. Click on the wrench icon to open the question settings.

  3. Find the Image section in the question settings and click Add 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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a different background image to each question in the quiz via the question settings.

how_to_improve_image_quality_backgroudimagequestion

  1. Go to the Quiz Builder and click on the question you want to add an image to.

  2. Click on the wrench icon to open the question settings.

  3. Find the Image section in the question settings and click Add 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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a different background image to each question in the quiz via the question settings.

how_to_improve_image_quality_backgroudimagequestion

  1. Go to the Quiz Builder and click on the question you want to add an image to.

  2. Click on the wrench icon to open the question settings.

  3. Find the Image section in the question settings and click Add 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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a different background image to each question in the quiz via the question settings.

how_to_improve_image_quality_backgroudimagequestion

  1. Go to the Quiz Builder and click on the question you want to add an image to.

  2. Click on the wrench icon to open the question settings.

  3. Find the Image section in the question settings and click Add 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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

You can upload a different background image to each question in the quiz via the question settings.

how_to_improve_image_quality_backgroudimagequestion

  1. Go to the Quiz Builder and click on the question you want to add an image to.

  2. Click on the wrench icon to open the question settings.

  3. Find the Image section in the question settings and click Add 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:

.lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
    background-image: url('https://your-image-url.com/image.jpg');
    background-size: cover;
    background-position: center;
}

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:

@media (max-width: 768px) {
    .lq-bg-img, .lq-bg-img-only, .widget .lq-bg-img, .widget .lq-bg-img-only {
        background-image: url('https://your-image-url.com/image-mobile.jpg');
    }
}

Image Blocks

You can upload an individual image via an Image Block directly into one of the quiz questions or results page.

how to

  1. Navigate to Questions or Results page tab in the quiz builder.

  2. Click + Add block to see a list of available blocks.

  3. Click on Image block and a new block will be added to the question or a section on the results page.

  4. Open the Image block settings.

  5. Click Select image to upload an image from your computer or pick one from your in-app image gallery.

  6. Once uploaded, click Change to replace the image or Remove to delete it.

  7. 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.

  8. You can adjust the image size in the Image heightdropdown. You can choose between Tiny, Small, Medium, Large or Adapt 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.

  9. 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.

how_to_improve_image_quality_imageblock

Add Image via Question settings

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Find the Image section in the question settings and click Add to upload a featured image to the question from your computer.

  5. Select the image orientation to be either above, below, background or split.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Activate the question description toggle.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock_resultspage

Add Image via Image Block

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Click on Image block and a new block will be added to the results page.

  5. Click Add to upload an image from your computer. You can adjust the image opacity with the slider.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Select a Content block.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock

Add Image via Question settings

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Find the Image section in the question settings and click Add to upload a featured image to the question from your computer.

  5. Select the image orientation to be either above, below, background or split.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Activate the question description toggle.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock_resultspage

Add Image via Image Block

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Click on Image block and a new block will be added to the results page.

  5. Click Add to upload an image from your computer. You can adjust the image opacity with the slider.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Select a Content block.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock

Add Image via Question settings

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Find the Image section in the question settings and click Add to upload a featured image to the question from your computer.

  5. Select the image orientation to be either above, below, background or split.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Activate the question description toggle.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock_resultspage

Add Image via Image Block

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Click on Image block and a new block will be added to the results page.

  5. Click Add to upload an image from your computer. You can adjust the image opacity with the slider.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Select a Content block.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock

Add Image via Question settings

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Find the Image section in the question settings and click Add to upload a featured image to the question from your computer.

  5. Select the image orientation to be either above, below, background or split.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Activate the question description toggle.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock_resultspage

Add Image via Image Block

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Click on Image block and a new block will be added to the results page.

  5. Click Add to upload an image from your computer. You can adjust the image opacity with the slider.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Select a Content block.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock

Add Image via Question settings

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Find the Image section in the question settings and click Add to upload a featured image to the question from your computer.

  5. Select the image orientation to be either above, below, background or split.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Click on the question you want to add an image to.

  3. Click on the wrench icon to open the question settings.

  4. Activate the question description toggle.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_improve_image_quality_imageblock_resultspage

Add Image via Image Block

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Click on Image block and a new block will be added to the results page.

  5. Click Add to upload an image from your computer. You can adjust the image opacity with the slider.

  6. Click Publish to save the changes.

Add Image via Markdown

  1. Open the Quiz Builder.

  2. Go the Results page tab in the quiz builder.

  3. Click on the + Add block button to see a list of available blocks.

  4. Select a Content block.

  5. In the new text field that appears, add the following markdown code:

    ![Image description](https://your-image-url.com/image.jpg)

    Replace https://your-image-url.com/image.jpg with the URL of the image you want to upload.

  6. 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.

how_to_shopifyv2_improve_image_quality_picturechoicequestions

  1. Open the Question settings

  2. Click + Add question to see a list of available questions or + Add block to see a list of available blocks.

  3. Click on Picture choice to add a picture choice block to the question.

  4. Click on + Add choice to add a new choice to the picture choice block.

  5. Click on Select image to upload an image from your computer or pick one from your in-app image gallery.

  6. Once uploaded, click Change to replace the image or Remove to delete it.

  7. Open the Picture Choice Settings and go the Advanced settings.

  8. Under Picture size/ratio you can choose between Tiny icon 24px, Small icon 48px, Medium icon 1:1 or Large icon 4:3.

    manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_picturechoice_picturesizeratio

    If you select Medium (1:1) in the Picture size/ratio dropdown, an additional option for chosing a Mobile layout will appear. There you can choose how this block will be displayed on mobile devices - either as a Carousel, One per row or Two per row.

    manual_shopifyV2_quizbuilder_quizbuilder_questions_blocksettings_picturechoice_mobilelayout

  9. 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.

  10. 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.

how_to_improve_image_quality_picturechoicequestions

  1. Open the Quiz Builder.

  2. Click + Add new question to see a list of available questions.

    manual_quizbuilder_quizbuilder_addquestions

  3. 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.

  4. Click on + Add choice to add a new choice to the picture choice block.

  5. Click on + image to upload an image from your computer.

  6. 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.

how_to_improve_image_quality_picturechoicequestions

  1. Open the Quiz Builder.

  2. Click + Add new question to see a list of available questions.

    manual_quizbuilder_quizbuilder_addquestions

  3. 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.

  4. Click on + Add choice to add a new choice to the picture choice block.

  5. Click on + image to upload an image from your computer.

  6. 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.

how_to_improve_image_quality_picturechoicequestions

  1. Open the Quiz Builder.

  2. Click + Add new question to see a list of available questions.

    manual_quizbuilder_quizbuilder_addquestions

  3. 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.

  4. Click on + Add choice to add a new choice to the picture choice block.

  5. Click on + image to upload an image from your computer.

  6. 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.

how_to_improve_image_quality_picturechoicequestions

  1. Open the Quiz Builder.

  2. Click + Add new question to see a list of available questions.

    manual_quizbuilder_quizbuilder_addquestions

  3. 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.

  4. Click on + Add choice to add a new choice to the picture choice block.

  5. Click on + image to upload an image from your computer.

  6. 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.

how_to_improve_image_quality_picturechoicequestions

  1. Open the Quiz Builder.

  2. Click + Add new question to see a list of available questions.

    manual_quizbuilder_quizbuilder_addquestions

  3. 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.

  4. Click on + Add choice to add a new choice to the picture choice block.

  5. Click on + image to upload an image from your computer.

  6. Add more choices by clicking + Add choice and repeat the process.

Product Image

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.

how_to_shopifyv2_improve_image_quality_productimages

  1. Navigate to Results page tab in the quiz builder.

  2. Click + Add block to see a list of available blocks.

  3. Click on Product (or Variant or Collection) block and a new block will be added to the results page.

  4. Open the Product/Variant/Collection block settings.

  5. 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.

  6. Under + Add block you can add an extra block to the product slot. All the data are synced directly from your Shopify catalog.

  7. Under Image you can adjust the image size.

    Picture size/ratio - Choose the picture size for this block. Choose between Medium (1:1) or Original picture size (as uploaded to your Shopify Product).

    Optimize images size - Select this option to optimize the image size for the quiz. If unchecked, the image will be displayed in the original size.

    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 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:

.lq-results .lq-slot li {
    max-width: 500px !important;
}

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:

.lq-results .lq-slot li {
    max-width: 500px !important;        
}

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:

.lq-results .lq-slot li {
    max-width: 500px !important;
}

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:

.lq-results .lq-slot li {
    max-width: 500px !important;
}

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:

.lq-results .lq-slot li {   
    max-width: 500px !important;
}

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.