How to customize Product image section

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

On this page

Access Product Image section

  1. From the app's admin, go to Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. Under the General settings section > Select Product Item section.
  2. Click the Dropdown icon of Product Item section > Select Product Image section.
General settings > Product item > Product image

Product Image section general

Product Image section has 3 areas, following 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 maximum 3 elements. This is to ensure design principals for visual pleasing. Adding too many elements into the Product Image may cause disfunction to themselves.

By clicking each area, you access its Arrangement settings. where you can adjust the relative position between all the added the 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 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 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 Auto/Natural setting in 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 Call to Action buttons.

There are 4 options for you to choose the effect when the shoppers hover 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 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 support@boostcommerce.net.