📖 In this article, we are going to learn more about what is Product Image element and how to use it to optimize your theme’s layout and make it look the way you’d like it to.
⚠ This article only works for Boost AI Search & Discovery V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article.
Access the Product Image section
1. From the app's admin, go to the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the General settings section > Select Product Item section.
3. Click the Dropdown icon of the Product Item section > Select Product Image section.
General settings > Product item > Product image
Product Image section general
The product Image section has 3 areas, followed by the elements that are available to be added to each area:
Top area:
Sale label
Sold out label
Product rating
Swatch item (1-3)
Custom tag by label
Middle area:
Product rating
Swatch item (1-3)
Custom tag by label
Bottom area
Button (1-3)
Product rating
Swatch item (1-3)
Custom tag by label
⚠️ Each area can have a maximum of 3 elements. This is to ensure design principles for visual pleasing. Adding too many elements to the Product Image may cause dysfunction to themselves.
By clicking each area, you access its Arrangement settings. where you can adjust the relative position between all the added sub-elements within each of them:
How to add/remove elements
💪 If you access the section for the first time, you will see the default elements already added based on the theme you are using.
Add element
To add new elements to an area, click the Add element button > select the available elements from the dropdown.
Remove element
To remove an element, select the element you’d like to remove by simply clicking on it > on the bottom Right panel of the editor, click Remove element.
or
Hover over the Product count element > click the trash bin icon button to delete it.
⚠️ Please be aware that this action is irreversible.
Move the element
You can only move the element within its designated section. Click then hold the double kebab icon button to drag and drop to move it.
• Always remember to click Save after making any changes so you don't lose your unsaved progress.
Product image section styling configuration
To access the Product Image styling configuration, check the right panel of the editor after clicking Product Image on the left panel.
Product image aspect ratio
💡 In images, the aspect ratio is the width to height ratio.
For example, an image with a size of 200 pixels by 400 pixels has an aspect ratio of 1:2.
There are 6 options:
Auto (equal height)
Natural (adapt to image)
Square (1:1)
Portrait (2:3)
Landscape (4:3)
(⭐) Manual ratio
For the best result, all product photos should have the same ratio.
(⭐) If this setting is selected, you can input manually your image’s ratio index (width:height):
Click the Save button to save all the changes you have made.
Crop image position
There are 3 options for you to choose the crop image position:
Top
Center
Bottom
⚠️ This setting will not be available if you are enabling the Auto/Natural setting in the Product image aspect ratio.
Click Save button to save all the changes you have made.
Hover effect
💡 Hover effects are one of the most commonly used CSS effects in web design, modifying an element when it is hovered over.
By using the hover effect properly, you can create great attention-grabbing visuals to assist with usability and encourage the click-through rate on the Call to Action buttons.
There are 4 options for you to choose the effect when the shoppers hover over the image:
None: nothing is changed when hovered.
Show second image: it will show the second image of the media list in the product’s Shopify admin when hovered
Zoom in: the image is zoomed in when hovered.
Show second image and zoom in: a combination of Show second image and Zoom in effects when hovered.
Click the Save button to save all the changes you have made
You can check more information about the STYLING tab here.
Tutorial Video
Watch our tutorial video here to learn more about how to use the Product Image element.
If you need any further assistance, please do not hesitate to contact us at [email protected].