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
Proceed to SHOPLINE Admin > [Online Store Design] > [Pages] and click the [Advanced Page/Edit] button to open the Advanced Page setup.
Click the Widget button.
Click the Product List widget.
You can click + Products to create a custom product list or click + Category to select an existing product list.
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.
Drag and drop the selected products to rearrange their order. Click Confirm to continue.
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.
- The "Show more" button is not available for custom product lists.
- The layout for the mobile version only supports 2 products per column.
2. Choose existing product category
Click + Add Category to select a product category. Click Confirm to continue.
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.
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.
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.
You can also set the text alignment of the title. (Left/ Middle/ Right)
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).
- 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.
- 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.
You can adjust the image and page padding. For more details about padding, please refer to this article.
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.
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
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.
- Announcement Bar / Header Settings | SHOP Builder
- Text Widget | SHOP Builder
- Gallery Widget | SHOP Builder
- Image with Text Widget | SHOP Builder
- Slider Widget | SHOP Builder
- Product Slider Widget | SHOP Builder
- SEO Settings | SHOP Builder
- Footer Setting | SHOP Builder