Product Slider Widget | SHOP Builder – SHOPLINE Help Center

4. EC + SC (EN).png

You can add the Product Slider widget when editing the page, and display the products in the form of a slideshow. A product slider can help show a concise and neat layout and allows customers to interact with the page by freely scrolling through the products.

⚠️ 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. Adding the Product Slider 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

Select the Product Slider widget.

Step 4

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.

*Note: The "Show more" button is not available for custom product lists. Switching on the "Show Button" toggle will not enable the button either. EN new 1.png

2. Choose existing product category

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

Step 5

Edit the product slider title.

*Note: You can also keep this field blank, the page will then 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)

Step 6

Edit the slider-related settings.

A. Show button

If the "Show Button" is switched on, the "Show More" button will appear under the product slider. Customers can click Show More to enter the product category page and browse products.

B. Product Proportion

You can set the proportions of product images.

C. Product Per Row

You can set up to 6 products per row in the desktop version, and up to 3 products per row for the mobile version.

*Note: Customers can browse through products by swiping left and right on the product slider.

D. Padding

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

E. Style (browsing products)

You can select between "Button" and "Indicator" for the style for browsing the product slider.

a. Button

Customers can click the left and right arrows to switch products. EN new 3.png

b. Indicator

Customers can click the indicators at the bottom of the product slider to browse through products. EN new 4.png

Step 7

Choose whether to show hidden products. Once switched on, customers can see hidden products at 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 slider widget on the right. EN new 5.png

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

EN new 6.png

Step 9

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

Read more