All Collections
Quizzes
Guides
How to Add Side Images to a Quiz Page
How to Add Side Images to a Quiz Page
Side images add greater visual interest to your quiz, helping it stand out and reinforce your brand’s unique aesthetic.
Mark Baek avatar
Written by Mark Baek
Updated this week

Overview


As an extension of your store, it’s important that your quiz matches your brand identity, so Octane AI offers a wide variety of styling and design options to make your quiz beautiful. Using side images is a great way to add bold visuals to your quiz to highlight your brand’s unique aesthetic.

What you'll learn

How to find & add side image options to quizzes.


Adding side images


1. In the quiz editor, select the page that you want to add the side image to. You can add side images to any quiz page, except results pages.

2. Click Design > Side Image.

The Design > Side Image settings on a page within the quiz editor.

3. Click Add image and select the image that you want to add to the quiz page.

4. You can now update the Desktop settings and Mobile settings to make the image look just right for the page.

A page in the quiz editor after adding a side image.

You may now continue working on your quiz or move on to publishing.


Side image settings


If needed, you can update display settings to ensure the image looks great on your quiz.

Desktop settings

The following settings are available for the side image as displayed on desktop:

  • Image width: The width of your side image as a percentage of the overall page. This controls how much of the page your side image occupies.

  • Placement: Whether your image should be placed to the left or right of quiz content.

  • Alignment: Adjust the horizontal and vertical alignment of the image to change how it appears on the page.

  • Lightness: Adjust the brightness of the image.

  • Alt text: Add descriptive text of your image to improve quiz accessibility.

The desktop settings for side images in the quiz editor.

Mobile settings

The following settings are available for the side image as displayed on mobile:

  • Image display: You can choose whether to use the same side image, a different side image, or no side image on your quiz when viewed from a mobile device.

  • Placement: Whether your image should be placed above or below quiz content.

  • Alignment: Adjust the horizontal and vertical alignment of the image to change how it appears on the page.

  • Lightness: Adjust the brightness of the image.

  • Image ratio: The ratio of your image’s width and height.

    • For a square image (i.e. same width and height), use 1:1.

    • For a portrait image (i.e. greater height than width), use 3:2

    • For a landscape image (i.e. greater width than height), use 2:3

  • Alt text: Add descriptive text of your image to improve quiz accessibility.

The mobile settings for side images in the quiz editor.
Did this answer your question?