Product Image

Author: Jade Abit 28 views

Product Image is a necessary element of the product page since it allows you to show the primary picture and thumbnails of the product from Shopify. Customers may also zoom in to examine the featured products in greater detail or alter them according to product variants. The EComposer provides many options to customize the Product Image.

Drag and drop the Product Image to any position you would like.

The Product Image element includes two main tabs: Content and Design. The Content tab is used to configure how product images work and display on the product page, such as selecting the layout, enabling zoom, lightbox, thumbnails, navigation, badges,… The Design tab is used to customize the appearance of the product image.

1. Content

1.1 Image layout Change

There are 4 types of layout: Slider, Grid, Grid Advance, and Single image.

+ Slider: is a carousel-style product image section that allows customers to browse product images slide by slide by clicking the Previous/Next arrows to switch between images.

+ Grid: displays multiple product images in a fixed grid format. Customers can scroll down to view all product images without clicking through a carousel.

+ Grid advance: an advanced image layout that displays product images in a more flexible and visual grid style. Customers can view multiple product images directly on the page without clicking through a slider.

+ Single Image: displays only one main product image instead of showing a full product gallery.

1.2 Image Zoom

Zoom Image in Lightbox: Allowing the user to click the icon then it will trigger the lightbox of product photos to appear as a pop-up slider. Also, which will let you choose the icon and the icon position as well.

Disable lazyload image: You can choose this option to disable the Lazylofad effect if you don’t want to use it. However, the lazy load effect will be helpful to you. Better performance With shorter page load times, the website performs better overall, which benefits user engagement and SEO rankings.
Show the featured image first: Allow you to show the featured image first. This option does not show when you select Grid layout.
Enable hover to zoom image: It helps you zoom in on the Product Image when you hover. You can choose to zoom this image either Inner (like using a pair of magnifying glasses) or Outer (the result will appear outside the product image).

Image alignment: This will allow you to reposition the image.
Enable position sticky: You can use this option to keep the Product image fixed while scrolling across that column. Please be aware that only works on Desktop.

Note:This feature can only work when there is no other elements below the Product image element.

1.3 Slider settings

Note: This tab is only visible to you if the Image Layout option above is Slider.

Number slides per view: Set the number of slides per view. It allows setting different values for each device.
Spacing between slides: Set space between product images. It allows setting different spaces for each device.
Disable auto height: You might use this option to change the slider height, either increasing or decreasing.

1.4 Thumbnail settings

Show thumbnails: Allows you to show thumbnails or not. When you enable this option, many options will show below for you allow setting different spaces for each device to customize them
Thumbnail position: This option will show when you enable the Show thumbnails. You can set the position Left, Right, Bottom and Top.
Spacing between: Set space between thumbnails and product images.
Number thumbnails per slide: Set the number of thumbnails per slide.
Thumbnails spacing: Set space between each thumbnail.
Thumbnail Size (px): Set the width, height and crop position for the thumbnails.
3D Model icon: Allow you to select the icon for the 3D image to help clients know this is a 360-degree viewer.
Video icon: Allows you to add the play icon on the video for the featured image. You can select the icon you want. Included are your own customized settings, such as Auto Play, Loop, Enable Control, or Mute for the product video

1.5 Nav & pagination

Enable navigation or pagination/Enable navigation thumb: You can change the Pre/Next Icon for Product Image when you enable them.

1.6 Badge

Show sale/sold out text badge: Display or hide the sale/sold out text badge.
+ Badge sale text: When a product has a sale price, this text will be shown.
+ Badge sold out text: This text will be shown when a product is sold out.
Show sale value badge: Show or hide the sale value badge.
+ Sale value badge type: You can choose either Percent or Amount
+ Sale value badge text: You can fill -{{sale}}% in the box to show the discount value.

Custom Badge: These can be displayed differently for each product. The badge content is retrieved from the product’s tags or metafields, allowing merchants to assign unique badge text to individual products.

+ Metafield badge: Renders a badge from a metafield, example: product.metafields.custom.example.value. This document might help you have more information about metafield.

+ Custom tags badge: Renders ‘Best Seller’ or ‘Trending’ tags if the product matches the condition. It only shows when a product contains tags you added to the product. You can read more about the product tags here

Badge position: set the position for the badge. You can choose Top Left, Top Right, Bottom Left, or Bottom Right.

1.7 Variant Image Grouped

The user will be able to view the product variant images grouped in the Thumbnail, which is linked to the variant you have selected, due to this feature.

If I select the “Blue” variant, for example, I will be able to see all the product images associated with the “Blue” variant, which is set to Shopify. Please follow the steps below to configure this feature and set it up:

Step 1: Add ALT text

From the Shopify admin -> Open the Product you want to use -> Media

After opening the image -> Enter ALT text’s structure ecomposer-option name-variant name.

Important:

The value must match the variant value exactly.
If the variant value is Light Blue, do not enter only Blue.
Avoid unnecessary spaces before or after the value.
Follow the alt-text format specified in this documentation. Some themes might require formats such as Blue, color_Blue, or Blue_1.

For example, the ALT text will be in all lowercase: ecomposer-color-blue

Notes: If you use this variant image to connect with 2 variants, separate the 2 ALT texts by a comma (,)

If your products have the same option but with different option names as below:

Step 2: Enter Option names

Then you go back to EComposer Editor, adding exactly the option names you want to group, such as Apparel Color, Garment Color,…etc.

Notes:

Option name inside our app does not distinguish between uppercase and lowercase. If your option name is COLOR, you just need to put Color or color.
If your option name has the space, please do not use “-” symbol between characters. For example, ecomposer-fabric material-synthetic-fibres (In this case, option name is: fabric material)
If your variant name has the space, please use “-” symbol between characters. For example, ecomposer-color-light-blue (In this case, variant name is: light blue)
If you just want to group for 1 variant only, simply add 1 ALT text like the example above. In this example, we will group Color variant only
If you want to group more than 1 variant, you need to add 2 or 3, or more ALT text structures of the corresponding variant to the alt field. In this case, we want to group 2 variants: Color and Size, so we will add: ecomposer-color-blue,ecomposer-size-small

Step 3: Test function

Select the Blue variant.
Confirm that the gallery displays all images associated with Blue.
Select another color, such as Red.
Confirm that the Blue images are hidden and the Red images are displayed.
Test the function on both desktop and mobile devices.

After the setup is complete:

Selecting Blue displays only images associated with Blue.
Selecting Red displays only images associated with Red.
Selecting Black displays only images associated with Black.

The wrong images appear after selecting a variant

Check the order and grouping information of the product images. Remove incorrect alt-text values or variant assignments, save the product, and test it again.

2. Design

2.1. Featured image

Alignment: Align the featured image to the left, center, or right.
Width: Set the width of the image.
Max Width: Set the maximum width of the image.
Height: Set the height of the image.
Image fit: You will choose the appropriate type of featured image shown.

Opacity: Control the opacity of the image.
CSS Filters: Adjust the image style by changing the CSS Filter scales for Blur, Brightness, Contrast, Saturation, and Hue settings.
Box Shadow: Adjust box shadow options.
Border: Select the type of border.
Border Radius: Set the border radius to control corner roundness. It allows setting different border-radius for each device.

Normal/ Hover Tab: The settings under this tab are used to select elements when you mouse over them.

2.2. Thumbnails

Note: This tab is only visible to you if the Show thumbnails option in Slider settings is enabled. Configuration is applied to Thumbnails.

Type: Allows you to change your Thumbnail’s type.
Height: Set the height of thumbnails. It allows setting different heights for each device.
Additionally, you may use this to control the effect when the thumbnail is active, hovering, or normal.

2.3. Navigation

Note: This tab is only visible to you if the Show thumbnails option in Slider settings is enabled. Configuration is applied to Thumbnails.

The options below will help you configure the style of the Navigation with options for Size, Rotate and Primary Color, Background, Border, Border Radius, and Spacing of the Normal/ Hover status.

2.4. Navigation thumb

Note:This tab is only visible to you if the Enable navigation thumb option in Slider settings is enabled. Configuration is applied to Navigation thumb.

The options below will help you configure the style of the Navigation thumb with options for Size, Rotate and Primary Color, Background, Border, Border Radius, and Spacing of the Normal/ Hover status.

2.5. Badge

You can use different styles like Color, Background (allow responsive on each device), Border, Box Shadow, Border Radius, Spacing of all types of badges.

2.6. Slider Pagination

Note:This tab is only visible to you if the Show pagination option in Slider settings is enabled. Configuration is applied to Slider Pagination

The options below will help you configure the style of the Slider Pagination with options for Width, Height and Color, Border, Border Radius, Spacing of the Normal/ Hover/ Active status.