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 theme templates.
- After creating a page using the new page 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
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.
Select the Product Slider widget.
Click the + Add Category button.
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.
Edit the product slider title.
*Note: You can also keep this field blank, the page will then not display a title.
You can also set the text alignment of the title. (Left/ Middle/ Right)
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.
You can adjust the image and page padding.
E. Style (browsing products)
You can select between "Button" and "Indicator" for the style for browsing the product slider.
Customers can click the left and right arrows to switch products.
Customers can click the indicators at the bottom of the product slider to browse through products.
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.
During the setup process, you can click the Save button below to preview the newly added product slider widget on the right.
Or click the Preview button at the top right to preview the storefront.
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.
- Announcement Bar / Header Settings | Page Builder (New)
- Text Widget | Page Builder (New)
- Gallery Widget | Page Builder (New)
- Image with Text Widget | Page Builder (New)
- Slider Widget | Page Builder (New)
- Product List Widget | Page Builder (New)
- SEO Settings | Page Builder (New)
- Footer Setting | Page Builder (New)