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

Plan_EC%2BSC.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:

  • 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. 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.

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

Select the Product Slider widget. 

Screen_Shot_2022-06-29_at_10.43.35_AM.png

 

Step 4

Click the + Add Category button. 

Screen_Shot_2022-06-29_at_10.46.17_AM.png

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

Screen_Shot_2022-06-29_at_10.49.21_AM.png

Step 5

Edit the product slider title.

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

Screen_Shot_2022-06-29_at_10.51.25_AM.png

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

Screen_Shot_2022-06-29_at_10.53.38_AM.png

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. 

Screen_Shot_2022-06-29_at_10.55.12_AM.png

B. Product Proportion

You can set the proportions of product images.

Screen_Shot_2022-06-29_at_10.59.11_AM.png

 

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. 

Screen_Shot_2022-06-29_at_11.03.17_AM.png

D. Padding

You can adjust the image and page padding. 

Screen_Shot_2022-06-29_at_11.19.47_AM.png

 

E. Style (browsing products)

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

Screen_Shot_2022-06-29_at_11.21.48_AM__1_.png

 

a. Button

Customers can click the left and right arrows to switch products. 

Screen_Shot_2022-06-29_at_11.31.59_AM.png

b. Indicator

Customers can click the indicators at the bottom of the product slider to browse through products. 

Screen_Shot_2022-06-29_at_11.34.42_AM.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.

Screen_Shot_2022-06-29_at_11.28.11_AM.png

 

Step 8

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

Screen_Shot_2022-06-29_at_11.41.25_AM.png

 

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

Screen_Shot_2022-06-29_at_11.43.00_AM.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.

Screen_Shot_2022-06-29_at_11.46.12_AM.png

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments