Product Slider Element | Shopper App

4. EC + SC (EN).png

12. 品牌會員購物 App.png

When editing the app homepage, you can add the "Product Slider" element and swipe right to view more products. This allows you to have a tidy and neat layout and enables customers to browse products and heighten a sense of interaction.

⚠️ Before you start: For Hong Kong merchants, this feature is available only on the Shopper App Pro plan.

 

Step 1

Go to SHOPLINE Admin > [Shopper App Management] > [App Design] > [Homepage Design] > [Current Template]. Click Set up to enter the app page editor.

Screenshot 2025-09-02 at 1.37.54 PM.png

 

Step 2

Click Add an element and select Product Slider element. Drag it to the Preview area where you can insert the element.

Add_an_element_EN.png

EN3.png

 

Step 3

Enter the element title in the Editing area to the right.

Screenshot 2026-02-13 at 5.28.28 PM.png

 

Step 4

Set the font color.

Screenshot 2025-10-08 at 4.36.09 PM.png

 

Step 5

If you switch on the Display button toggle, you need to fill in the "Button text" that will appear at the top right of the Product Slider. No jump link is required. Customers will be directed to the native product list page to browse products when tapping on the button.

Screenshot 2026-02-13 at 5.30.16 PM.png

 

Step 6

Next, select products or a product category.

Screenshot 2025-12-19 at 6.10.48 PM.png

 

i. When you select products

Select the box for the product(s) you want to display (up to 500 products) and click Confirm to save the settings.

*Note:

  • No matter how many products are added, the Slider element can display a maximum of 10 products. You need to click "More" to enter the product list to view the rest of the products.
  • If you added more than 50 products before Shopper App platform version 1.15, the system will automatically display the first 50 products.

Screenshot 2025-09-12 at 4.40.24 PM.png

 

ii. When you select a product category

Check the box of the category you want to add, and click Confirm to save the settings.

Click the "downward arrow" icon as indicated below to add the sub-category from the drop-down list.

*Note: You can only add one product category.

EN11.png

 

Step 7

Select the display style.

i. Style settings

Check the box for the product information you want to show.

EN12.png

 

ii. Product display rule

You can decide whether to show sold-out or hidden products. Once you switch on the toggle and update, customers will see the hidden products in the app. 

EN13.png

*Note:

  • This feature applies only to the "Select products" setting. For the "Select a product category" setting, the system will show sold-out products and will not show hidden products by default.
  • Unpublished products will be automatically filtered.
  • The display rules set here will be synchronized to the product list page that the "More" button jumps to.
  • If you select not to display sold-out items, items with unlimited inventory will also be filtered out.
  • If the product display order is custom sorting, the "Show sold-out products" toggle will be ON and "Show hidden products" will be OFF, which is unrelated to your setup here.

 

Step 8

Set the release schedule if necessary.

schedule_EN.png

 

Step 9

Click Save to save the current settings. Upon finishing all the editing, click Update and use to publish the settings to the app.

Screenshot 2026-02-13 at 5.32.50 PM.png

 

 

 

Read more

 

 

 

 

 

Have more questions? Submit a request

Comments