Adjust product images on your quiz's recommendation page to better match your store's product detail page, create more engagement, or display products in a more suitable format.
In this article, you will learn about;
Configuring images for the grid layout
If the Grid layout is set for the Recommendations Page, configure the following settings. 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 columns in pixels (px).
Images automatically grow or shrink to fill the available space based on the column settings you choose for each device.
Product image settings
Image size options:
Stretch:
Image Height: Select one of the following:
Auto
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Image Crop Position: For Square, Portrait, and Landscape, choose Top, Center, or Bottom.
Setting image height to Auto preserves the original image ratios. Use the other settings to enforce a specific ratio.
Custom: If the Stretch settings don't meet your needs, set a custom image height in pixels (px) for precise control over the image display.
Configuring images for the list layout
If the List layout is set for the Recommendations Page, configure the following settings. 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:
Auto
Square (1:1)
Portrait (3:4)
Landscape (4:3)
Image Crop Position: For Square, Portrait, and Landscape, select Top, Center, or Bottom.
Image Width: Set the width of the image in pixels (px).
Setting image height to Auto preserves the original image ratios. Use the other settings to enforce a specific ratio.
Additional image styling for both layouts
For both the Grid and List layouts, you can further customize the image appearance with the following settings:
Border Radius: Adjust the corner rounding of images.
Border Width: Define the border thickness. Set to 0 to remove the border.
Border Color: Choose a color for the border.