Support > Design > Product List > Enlarge or Swap Product Images

Enlarge or Swap Product Images

 

Online Shop Web DesignProduct ListProduct Display

 

Merchants can utilize the multifunctional web design tools of eshopland ecommerce platform to customize how product images are displayed on the product list. For example, when hovering over images on the product list, they can be set to enlarge or swap; or even can schedule automatic image rotations to enhance the visual appeal of the webpages.

 

For more details on designing the product list, please refer to the introduction in Product List Style.

 

1.    Product List Page

 

Go to Admin Panel > Design > Pages,

click “Products” to enter the Product List page.

 

 

2.    Product List Style

 

Click Product List Style to enter the Product List design setting page.

When you update and save the style, the new style will be automatically applied to the All Product List Module, All Categories & Products, Products In Category and Featured Products webpage design modules.

 

 

3.    Set the Product Image

 

You can customize how the product images are displayed on the product list.

 

 

Aspect Ratio

Choose the ratio of Height to Width for displaying products images in the product list.

The image display will automatically adjust according to the original image’s ratio.

 

Tips:

If you upload a square product image (i.e., 1:1) and choose a 16:9 aspect ratio, the product image will be automatically cropped to fit the 16:9 aspect ratio.

If you want to use a 16:9 aspect ratio, it is recommended to upload images with a 16:9 aspect ratio, such as 1280 x 720, 1920 x 1080, 3840 x 2160, etc.

 

 

Hover Effect: Enlarge

When customers interact with the product list by moving the mouse cursor over the product images, the images will slightly enlarge to enhance the visual effect during interaction.

 

 

Hover Effect: Swap

When customers hover over a product image, the image will switch to the second image.

 

Merchants must add a minimum of two images for each product to showcase the image swapping effect.

 

 

Hover Effect: Auto-swap

All product images on the Product List will automatically swap according to a set time interval.

The automatic carousel image swapping feature will only apply to the first two images of each product.

Merchants must add a minimum of two images for each product to showcase the image swapping effect.

The time interval for the automatic swapping is set in seconds (s).

 

Example:

Setting the auto-swap time to “3s” means that all images on the Product List will automatically swap every 3 seconds. Products with only one image will not undergo any changes in display.

 

 

4.    Apply

 

Save https://support.eshopland.comhttps://d2aeweyrgxfptr.cloudfront.net/core/images/article/129/zh-Hant/image008.png the settings.

 

eshopland - NGO Offer
eshopland - Start free trial now
eshopland 14-day free trial
No credit card required
eshopland 網店平台-模塊式網頁設計
eshopland 網店平台-社交媒體店主也應該開網店
eshopland 網店平台-社交媒體店主善用網店賺更多
eshopland 網店平台-系統直出順豐單,無須插件
eshopland 網店平台-網店管理手機 App
eshopland 網店平台-設計網店可用的免費圖庫
eshopland 網店平台服務計劃明碼實價,零抽佣,無插件費,無隱藏收費,無系統維護費
eshopland 網店平台範本-Eta

You May Also Like

Membership Upgrade & Renewal Settings

The “Professional” plan users of eshopland ecommerce platform can customize membership upgrade and renewal terms to fit ones’ business operational requirements and effectively motivate member custom

Products In Category

Adding Products In Category module onto the webpage of your online shop, allow your customers to browse the products of a specified category more conveniently.1. Add a Products In Category moduleGo

Custom Shipping

eshopland allows you to customize shipping methods, such as pick-up, charge on delivery, local courier, etc. to suit your business operational requirements.1. Shipping SetupLogin and go to the Admi

Split an Order

To enhance the operational flexibility of your online shop, designated service plan users would be able to split orders, in order to fulfill customers’ specified ship requirements or to deal with th

Recommended Articles