Support > Design > Product List Style

Product List Style


eshopland e-commerce platform allows merchants to design the product listing style in the Layout Designer. Users can adjust the product list style to match your shop design.

eshopland offers you high flexibility in shopfront design, make it much easier to build your preferred shop style.


1.    Product List Page


Go to Admin Panel > Design > Pages, click “Products” to enter the page.



2.    Product List Style


Click Product List Style to enter the setup page.



3.    Styling Features


You can design the product listing style of your online shop.

You can preview the styling effect instantly.

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


You can click “Reset Default” to reset all the Product List Style to the system default settings.




Background Color

Color to be applied to the whole Product List page.


Text Color

Color to be applied to the Product List filter, placed on top of the products.



Product Display:


The spacing between products in pixels (px).

When you change the spacing, the size of the product blocks will be auto adjusted.


Background Color

The background color of the product blocks.

You can simply pick a color or enter a color code to set the background color.



Product Image:

Hover Effect: Enlarge

-         Image will enlarge when mouse hover.


Hover Effect: Swap

-         Image will swap to the second image when mouse hover.

(To show the swap effect, you are required to add at least two images for the products.)


Hover Effect: Auto-swap

-         All product images on the product list will auto-swap according to the set time.

-         Auto-swap effect will only be applied to the first two product images.

-         Auto-swap set time is counted in second (s).



Product Name:

Font Size

Row Height

Text Color

Font (English & Chinese)

Bold Text

Text Align



Style of the Prices:

Font Size

Row Height

Text Color


Bold Text

Text Align


Regular Price

Original Price

Special Price

Member Price



Style of the Tags:

Background Color

Text Color

Font (English & Chinese)


Bold Text

Font Size


Pre-order Tag

Special Offer Tag

Sold Out Tag

Limited-Time Tag

Member Price Tag




Text Color

Background Color



Save the changes.


eshopland - NGO Offer
eshopland - Start free trial now
eshopland 14-day free trial
No credit card required
eshopland 網店平台-完善雲端訂單管理系統
eshopland 網店平台-會員積分獎賞 points rewards,電子禮券 e-coupons「購物金」
eshopland 網店平台-轉平台首選
eshopland 網店平台-開網店的好處及重要性
eshopland 網店平台範本-Delta
eshopland 網店平台範本-Epsilon
eshopland 網店平台範本-Gamma
eshopland 網店平台範本-Kappa

You May Also Like

Discount on Specified Products

On eshopland platform, you can set percentage discount on specified products. You can also add different terms to the offers to match your business strategy. The system will auto apply and calculate

Limited Time Products

Merchants subscribed for eshopland “Professional” plan can set individual products as “Limited Time” products to effective attract customers’ order within the limited period. This feature is also ap

Pexels Free Stock Photos

eshopland has integrated with Pexels free stock photos website, inbuilt the Pexels Free Stock Photo Gallery into the system, allowing you to use free high quality stock photos to build and design y

Facebook Live and Video

You can add Facebook live streaming and videos onto the eshopland online shop, allowing customers to know more about your brand and products.1. Add a Facebook Live/Video module.Go to Admin Panel >

Recommended Articles