[Coming Soon] Product List Widget | Page Builder (New)

Plan_EC%2BSC.png

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 themes.
  • After creating a page using the new page builder, the page can still be displayed even if you switch to other themes, 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.

Screen_Shot_2022-06-30_at_11.06.19_AM.png

Step 2

Click the Widget button. 

Screen_Shot_2022-06-29_at_10.41.41_AM.png

Step 3

Click the Product List widget. Screen_Shot_2022-06-29_at_1.54.34_PM.png

 

Step 4

Click the + Add Category button. 

Screen_Shot_2022-06-29_at_1.55.47_PM.png

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

Screen_Shot_2022-06-29_at_1.57.10_PM.png

 

Step 5

Edit the product list title.

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

Screen_Shot_2022-06-29_at_1.59.01_PM.png

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

Screen_Shot_2022-06-29_at_1.59.56_PM.png

Step 6

Edit image-related settings. 

A. Product Proportions

You can set the product image proportions. 

Screen_Shot_2022-06-29_at_2.01.44_PM.png

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). 
  • If the total number of products exceeds the number on display, a "Show More" button will appear below the product list. 
  • 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.

Screen_Shot_2022-06-29_at_2.08.46_PM.png

 

C. Padding

You can adjust the image and page padding. 

Screen_Shot_2022-06-29_at_2.09.59_PM.png

 

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.

Screen_Shot_2022-06-29_at_2.16.47_PM.png

 

Step 8

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

Screen_Shot_2022-06-29_at_2.18.59_PM.png

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

Screen_Shot_2022-06-29_at_2.21.39_PM.png

 

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.

Screen_Shot_2022-06-29_at_2.23.07_PM.png

 

Read more



 

 

 

Have more questions? Submit a request

Comments