Product List Widget | Page Builder (New)

You can add a Product List widget to the page to display your main products and grab the attention of your customers. 

⚠️ Before you begin:

• The new page builder currently only supports Ultra Chic, Kingsman and Varm theme templates.
• After creating a page using the new page builder, the page can still be displayed even if you switch to other theme templates, but it cannot be edited and the layout may be messed up. Please take note of this before publishing the page.

 

1. Add the Product List widget

Step 1

Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.

Step 2

Click the Widget button. 

Step 3

Click the Product List widget.

 

Step 4

Click the + Add Category button. 

A pop-up window will appear, you can select the product category you want in the product slider, or you can search by the category name. After selecting the product category, click Confirm. 

 

Step 5

Edit the product list title.

*Note: You can also keep this field blank, the page then will not display a title. 

You can also set the text alignment of the title. (Left/ Middle/ Right)

Step 6

Edit image-related settings. 

A. Product Proportions

You can set the product image proportions. 

B. Products Per Row & Product Per Column 

You can set the number of product rows (horizontally) and columns (vertically). 

*Note: 

• The row is set to 3 and the column to 2 by default, the maximum limit for rows and columns is 5. 
• You can only adjust the number of columns and rows in the desktop version. The mobile version layout changes according to the number of pictures in the desktop version and is fixed to 2 columns per row. (For example, the desktop version is 3 columns and 2 rows, with a total of 6 products; the mobile version will display 2 columns and 3 rows, also with a total of 6 products).
• The "Show More" button will appear below the product list regardless of the number of products displayed.
• The order in which the products appear is based on the order of the product categories set in the Admin. If you need to change it, please go to SHOPLINE Admin > [Product & Category] > [Categories] and click the product category to adjust the product order.

 

C. Padding

You can adjust the image and page padding. 

 

Step 7

Choose whether to show hidden products. Once switched on, customers can see hidden products on the storefront. 

*Note: Unpublished hidden products will not display. If you wish to learn how to set hidden products, please refer to Hidden Product.

 

Step 8

During the setup process, you can click the Save button below to preview the newly added product list widget on the right. 

Or click the Preview button at the top right to preview at the storefront

 

Step 9

After confirming the above settings, please click the Publish button at the top right corner, and customers can view all the newly added content on this page at the storefront.

 

Read more

• Announcement Bar / Header Settings | Page Builder (New)
• Text Widget | Page Builder (New)
• Gallery Widget | Page Builder (New)
• Image with Text Widget | Page Builder (New)
• Slider Widget | Page Builder (New)
• Product Slider Widget | Page Builder (New)
• SEO Settings | Page Builder (New)
• Footer Setting | Page Builder (New)