Product List Element | Shopper App

4. EC + SC (EN).png

12. 品牌會員購物 App.png

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.

App_Design_Setting_EN.png

 

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.

Add_an_element_EN.png

EN3.png

 

Step 3

Enter the element title in the right editing area.

EN4.png

 

Step 4

Set the font alignment and color.

EN5.png

 

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.

EN6.png

 

Step 6

Next, select to show products or a product category.

EN7.png

 

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.

EN8.png

 

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

image_720-1.png

 

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.

EN9.png

 

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.

EN11.png

 

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.

EN12.png

 

D. Show product information

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

EN13.png

 

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. 

EN14.png

*Notes:

  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.
  4. 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 and Update to update the settings to the app.

EN15.png

 

 

 

 

 

Have more questions? Submit a request

Comments