Top Ranking｜Shopper App

With the "Top Ranking" page, you can highlight your store’s top-selling or promotional products in a ranking format on the app, helping boost sales and drive more purchases.

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

The article will cover the following:

Create Top Ranking page
Set the display element

1. Create Top Ranking page

Step 1

Go to SHOPLINE Admin > [Shopper App Management] > [App Design], and click the Top Ranking tab.

Step 2

Click Create to set up a Top Ranking page. You can create up to 5 pages.

Step 3

Follow the instructions below to complete the setup.

i. Display quantity

The system displays 10 products by default, and you can set up to 50 products.

ii. Select style

Click to select a product ranking style, and you can view the actual display effect in the preview area.

*Note: When fewer than 3 products are available, all products will be displayed top to bottom without style differentiation.

Style 1
Style 2

iii. Select products

Select products: Check the products in the left-side product list. Adjust the order or remove selections in the right-side selected products list. You can select up to 50 products.
Select categories: Check the product categories you want to display. Only the first 50 products in each category are supported. To adjust the product order, go to [Products & Categories] > [Categories].

iv. Recommended products

Enable this toggle, the top 50 products that customers have recently browsed will be displayed at the end of the product ranking.

Step 4

Click Update and use in the top-right corner.

Step 5

The "Top Ranking" page will display the pages you have created, you can edit settings or delete them.

*Note: Pages that are already set to display on the homepage cannot be deleted.

2. Set the display element

Go to SHOPLINE Admin > [Shopper App Management] > [App Design] > [Current Template]. Click Set up to enter the app editor page. The following 3 elements support the "Top Ranking" page configuration, which you can set up as needed:

i. Main Tab

Add a custom tab, and select the "Top Ranking" redirect page.

ii. Sidebar Navigation

Top Section
Middle Section: Add a custom group, enable the "Redirect link" and select "Top Ranking".

iii. Bottom Navigation