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 the
and
buttons on the right to show or hide it. You can turn on 3-5 tabs.
- Click the
button 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 the
button 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.
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://".
Step 6. Set colors
Click the Theme Setting icon on the left and select Color.
Set the background / font color in the "Bottom Navigation" section. You can use the color palette or enter a color code directly.
Read More
Comments