Product images can be adjusted on the recommendation to better match a store’s product details page, create more engagement or display the products in a more suitable format.
In this article, you'll learn how to:
Configure images for the Stacked layout
If the Stacked layout has been set for the Recommendations Page, the following settings can be configured. Edit a quiz, navigate to the Configure tab and expand the Recommendations Page section.
Layout Settings
Configure the number of columns:
Desktop: Choose between 1-4 columns.
Tablet: Choose between 1-3 columns.
Mobile: Choose between 1-2 columns.
Column Gap: Set the gap between each column in pixels (px).
The images will automatically grow or shrink to fill the space available depending on the column settings chosen for each device.
Product Image Settings
Image Size Options:
Stretch:
Image Height: Select one of the following options:
Auto
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Image Crop Position: For Square, Portrait, and Landscape, choose the crop position - Top, Center, or Bottom.
Setting the image height to be Auto will preserve the image ratios of the original product images. Use the other settings to set a specific ratio.
Custom:
If the Stretch settings do not meet your needs, set a custom image height in pixels (px) for precise control of the image display.
Configure images for the Side by Side Layout
If the Side by Side layout has been set for the Recommendations Page, the following settings can be configured. Edit a quiz, navigate to the Configure tab and expand the Recommendations Page section.
Layout Settings
Column Gap: Define the space between the product images and product details in pixels (px).
Image Settings
Image Size Options:
Image Height: Choose from the following:
Auto
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Image Crop Position: For Square, Portrait, and Landscape, select the crop position - Top, Center, or Bottom.
Image Width: Set the width of the image in pixels (px).
Setting the image height to be Auto will preserve the image ratios of the original product images. Use the other settings to set a specific ratio.
Configure additional image styling for both layouts
For both the Stacked and Side by Side layouts, you can further customize the appearance of the images using the following settings:
Border Radius: Adjust the corner rounding of images.
Border Width: Define the thickness of the border. Set the border width to 0 to remove the border.
Border Color: Choose a color for the border.
By following these steps, you can effectively resize and style product images on your quiz's recommendation page.