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.

 

 

Page:

Background Color

Background color of the entire Product List Page.

 

List Color

Color to be applied onto the Product List.

 

Text Color

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

 

 

Product Display:

Maximum Products per Row

The number of products can be displayed on each row when viewing on desktop.

Can configure to display 2 – 6 products on each row.

 

Spacing

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

Font

Bold Text

Text Align

 

Regular Price

Original Price

Special Price

Member Price

 

 

Style of the Tags:

Background Color

Text Color

Font (English & Chinese)

Rounding

Bold Text

Font Size

 

Pre-order Tag

Special Offer Tag

Sold Out Tag

Limited-Time Tag

Member Price Tag

 

 

Pagination

Text Color

Background Color

 

 

Save  the changes.