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.
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 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
Next, select products or a product category.
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.
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 7
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.
*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.
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.
Read more

Comments