Product List Widget | SHOP Builder

Avatar
SHOPLINE TW Copywriters
Follow

4. EC + SC (EN).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:

  • SHOP Builder currently only supports Ultra Chic, Kingsman, Varm, and Philia theme templates.
  • After creating a page using SHOP 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.pastedGraphic.png


Step 2

Click the Widget button. pastedGraphic_1.png


Step 3

Click the Product List widget.pastedGraphic_2.png

 

Step 4

You can click + Products to create a custom product list or click + Category to select an existing product list.
pastedGraphic_3.png

1. Create custom product list

Click + Products to select products. You can select up to 25 products for a custom product list. After selecting, click Next to continue.pastedGraphic_4.png

Drag and drop the selected products to rearrange their order. Click Confirm to continue.pastedGraphic_5.png

Click Save at the bottom of the left bar to preview the product list. Click the pencil icon to reopen the product-selecting window. Click the rubbish icon next to the pencil icon to remove all selected products. Click the red rubbish bin at the top to delete the "+ Products" component and return to select + products or +Category.

*Note:

  • The "Show more" button is not available for custom product lists.
  • The layout for the mobile version only supports 2 products per column.

pastedGraphic_6.png


2. Choose existing product category

Click + Add Category to select a product category. Click Confirm to continue.pastedGraphic_7.png

Click Save at the bottom of the left bar to preview the product list. Click the pencil icon to reopen the product selecting window. Click the rubbish icon next to the pencil icon to remove all selected products. Click the red rubbish bin at the top to delete the "+ Products" component and return to select + products or +Category.pastedGraphic_8.png

 

Step 5

Edit the product list title, and choose the heading size.

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

Click and open the language dropdown list on the upper left. The dropdown list shows all supported languages in your store. You can enter the title for the product list in the respective language.
pastedGraphic_10.png

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

 

Step 6

Choose whether to display the "Show more" button.


A. If you chose "+Products"

Whether this toggle is on or off, the system will not display the "Show more" button. Otherwise, all products will be displayed.

 

B. If you chose "+ Category"

Once you switch on the toggle, if the total number of products surpasses the configured display number, the "Show more" button will be displayed for customers to click and view the complete product list. If you switch off the toggle, the button will be hidden, and the products will be displayed according to the configured layout.

*Note: Shopper App currently does not support this feature.

 

Step 7

Edit image-related settings. 

A. Product Proportions

You can set the product image proportions.
pastedGraphic_12.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 is 5 for rows and 8 for columns.
  • 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 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.
  • If you choose to create a custom product list in Step 4, the product list will be arranged based on row order only. Adjusting the column number will not have any effect.

pastedGraphic_13.png

C. Padding

You can adjust the image and page padding. For more details about padding, please refer to this article.
pastedGraphic_14.png

 

Step 8

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.
pastedGraphic_15.png

 

Step 9

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 storefrontScreen_Shot_2022-06-29_at_2.21.39_PM.png

 

Step 10

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