Bottom Navigation | Shopper App

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.

Screenshot 2024-10-28 at 11.48.03 AM.png

 

Step 2. Enter element editor

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

 

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.

Screenshot 2024-11-05 at 3.03.15 PM.png

 

Step 4. Set default tabs

The 9 default tabs are "Home", "Shop", " Category", "Member Card", "Cart", "Message", "Account", "All Product" and "Wishlist".

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

Screenshot 2024-11-05 at 3.19.05 PM.png

 

You can perform the following actions:

  • Click thecloseeye.pngand openeye.png buttons on the right to show or hide it. You can turn on 3-5 tabs.
  • Click theScreenshot 2024-10-24 at 12.36.02 PM.pngbutton 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 theScreenshot 2024-10-24 at 4.13.30 PM.pngbutton on the left to adjust the order.

*Note: The tabs "All Products," "Wishlist," and "Custom" are part of the latest 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.

Screenshot 2024-11-05 at 3.45.46 PM.png

 

Step 5. Set custom tabs (optional)

In addition to the default tabs, you can click + Custom to create a new tab with custom text, icon image, and jump link.

*Note: The jump links only support URLs formatted with "http://" or "https://".

Screenshot 2024-11-05 at 3.38.08 PM.png

Screenshot 2024-11-05 at 3.38.58 PM.png

 

Step 6. Set colors

Click the Theme Setting icon on the left and select Color.

Screenshot 2024-11-05 at 3.33.41 PM.png

 

Set the background / font color in the "Bottom Navigation" section. You can use the color palette or enter a color code directly.

Screenshot 2024-11-05 at 3.36.07 PM.png

 

Read More

 

 

Have more questions? Submit a request

Comments