Product Image

Author: Mie Tran 345 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.

1. Content

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

1.1. General

Image layout: There are 3 types of layout: Slider, Grid and Single image.
Open image in lightbox: If you enable this option, the product image will show in the popup when you click on it.
Show the featured image first: Allow you to show the featured image first. This option does not show when you select Grid layout.
Enable zoom image: This option will show when you disable the Open image in a lightbox. It helps you zoom in on the Product Image when you hover.
Video icon: Allow you to add the play icon on the video for the featured image. You can select the icon you want.

Content General

1.2. Slider settings

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

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.
Show pagination: When you enable this option, the pagination will show below the Product Image.

Thumbnail

Show thumbnails: Allow 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 for it.
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: Allow you to select the play icon for video thumbnails.

Nav & pagination

Enable navigation/Enable navigation thumb: When you enable them, you can change the Pre/Next Icon for Product Image.

Slider Settings

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.

Normal/Hover

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.

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

Animation: When a customer hovers over an animated image, it can change grow, shrink, rotate, etc. This is enjoyable for the customer and shows that your site is working.
Transition Duration (ms): Specifies how many milliseconds a transition effect takes to complete. It allows you to change property values smoothly (from one value to another) when hovering.

Design Featured Image

2.2. Icon

Note: This tab is only visible to you if the Video Icon option in Content tab is enabled.

Size: Set up the size of the video icon for each device.
Rotate: Allow to set the rotation degree for each device.

You can use different styles like Color, Background (allow responsive on each device), Border, Box Shadow, Border Radius, Spacing between normal and hover.

Design Video Icon

2.3. 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: Allow you can change your Thumbnail’s type.
Height/Width: Set the height or width of thumbnails. It allows setting different heights for each device.

You can use different styles like Opacity, CSS Filters, Box Shadow, Border, Border Radius, Hover Animation, Rotate between normal, hover and active state.

Media Icon

Size: Set up the size of the thumbnail video icon for each device
Rotate: Allow to set the rotation degree for each device.

You can use different styles like Color, Background (allow responsive on each device), Border, Box Shadow, Border Radius, Spacing between normal and hover.

Design Thumbnails

2.4. Navigation

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

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

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

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

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.

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

To understand more about the configurations in Design Tab, you can check this guide.

Still stuck? How can we help?

Was this page helpful? Yes 1 No