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.


Step 1

In the Admin, go to [Mobile App Management] > [App Design] > [Current Template] > [Simple Template] and click Set up to edit the Product Slider element.



Step 2

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




Step 3

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


Step 4

Set the font alignment and the font color.



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.



Step 6

There are three types of Jump Link options available, "Product list page, Promotions, and Custom URL."

i. Product list page

Merchants who check "Product list page" can choose more products via the "Edit" icon as indicated below.



ii. Promotions

For merchants who check "Promotions," please click ⊕ Select a promotion campaign and choose your desired campaigns in the pop-up window. Upon confirmation, click Confirm. For more details about how to set a Promotions element, please refer to this article.



iii. Custom URL

For merchants who click "Custom URL," please enter the link in the field. Note that the entered link must start with either "https://" or "http://".



*Note: A "More" button appears after sliding the element to the far right. See below:



Step 7

Next, select products or a product category.


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


i. When you select products

Check the box for the product(s) you want to display (500 products at most) and click Confirm to save the settings.



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.



Step 8

Select the display style.

i. Style settings

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



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. 



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

Set the release schedule if necessary.



Step 10

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






Read more






Have more questions? Submit a request