Bottom Navigation | Shopper App – SHOPLINE Help Center

4. EC + SC (EN).png

12. 品牌會員購物 App.png

The Bottom Navigation bar appears at the bottom of your app’s homepage, allowing customers to quickly access key pages like Homepage, Shopping Cart, or Wishlist. You can customize the content, icons, and color.

Step 1. Go to app page editor

Go to SHOPLINE Admin > [Mobile App Management] > [App Design] > [Current Template]. Click Set up to enter the app page editor.

Step 2. Enter element editor

In the left-side element panel, click Bottom Navigation at the bottom.

Step 3. Set to display text or not

The feature is enabled by default, you can click to turn it off. When the toggle is off, only icons will display on the bottom navigation.

Step 4. Set default tabs

The 10 default tabs are "Home", "Shop", " Category", "Member Card", "Cart", "Message", "Account", "All Products", "Wishlist", and "Promotions".

The "Home", "Category", "Message" and "Account" tabs are turned on by default.

You can perform the following actions:

Click theand buttons on the right to show or hide it. You can turn on 3-5 tabs.
Click thebutton on the right to set the text and icon image. You can select to use the default icon image or custom icon image. If you select to use the custom image, please upload both the normal and selected states. The recommended size is 60*60 px and supports PNG / JPG / JPEG formats.
Click thebutton on the left to adjust the order.

*Note: The tabs "All Products," "Wishlist," and "Custom" are part of the platform version 1.12; the "Promotions" is part of the platform version 1.13. Go to [App Management] > [App Publish Settings] to view your current version.

It is recommended to update your app and confirm high user adoption of the latest version before turning on these tabs. If you turn on these tabs but customers have not updated to the latest version, clicking these tabs will redirect them to the homepage.