Product List Element | Shopper App


You can add the Product List element to the app homepage to show the hot-selling products and catch customers' attention.


Step 1

Go to [Mobile App Management] > [App Design], and click Setting to enter Current Template to edit the Product List element.



Step 2

Click Add an element and select Product List element. Drag it to the preview area at the center to the location where you can insert the element.




Step 3

Enter the element title in the right editing area.



Step 4

Set the font alignment and color.



Step 5

If you switch on the toggle to display the button. There will be a button at the bottom of the element. 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

Next, select to show products or a product category.



A. When you select products

Check the box for the product(s) you need (at most 500 products), and click Confirm to save your selection.



*Note: The app can support "up to 500 products" being displayed, but the Preview Area in the middle of the app design editor in [App Design] currently only supports "up to 10 products" displayed.



B. When you select a product category

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

Click the arrow icon to add the sub-category from the drop-down list.



Step 7

Select the display style.

A. Number of products to be displayed per row

There are two options: one product per row or two products per row.


B. Product image ratio

Set the aspect ratio of the image.



C. Total product rows

You can set an unlimited number of rows (max. 50) or fix a number of rows. Exceeded rows will not be displayed on the app homepage. Customers can tap to view the rest on the product list page.



D. Show product information

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



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



  1. Unpublished products will be automatically filtered.
  2. The display rules set here will be synchronized to the product list page that the "More" button jumps to.
  3. If you select not to display sold-out items, items with unlimited inventory will also be filtered out.


Step 8

Set the release schedule if necessary.



Step 9

Click Save and Update to update the settings to the app.







Have more questions? Submit a request