Optimize app navigation with bottom tab

Optimize app navigation with bottom tab

Enhance user experience and streamline navigation in your app with the convenient bottom bar feature. This article shows you how to design and customize the bottom bar to suit your needs. From choosing icons to adding custom buttons, we've got you covered.

1. About bottom tab

The bottom tab serves as a quick and main navigation hub in your app. This user interface component is at the bottom of the screen, allowing users to easily navigate between different sections of the app. 

With Alphonso, you have the flexibility to choose whether to display buttons with or without accompanying text. Additionally, by default, the bottom tab includes Home, Cart, and Profile, and they are also mandatory buttons. You can add some other buttons, but please note that Alphoso supports up to 5 buttons for easy access.

We provide a range of buttons to choose from when designing your bottom bar. Currently, our button collection includes Home, Categories, Cart, Notification, Profile, Wishlist, and Search. 
Note: To change the colors of the bottom tab background and icons, go to Theme. In the Color section, click More Colors, then choose the colors you prefer. 


2. How to design the bottom tab?

To access Alphonso, in your BigCommerce backend, navigate to Apps > My Apps > JMango360 Mobile.
To set up and  configure the bottom tab, follow these simple instructions:
Step 1: Go to Design > Bottom Tab. 

Step 2: Drag and drop the icons onto the bottom tab. Each button is already linked to a specific screen based on its name.


Step 3: To make changes to a button, hover over it and click Design. 
  1. Title: Edit the name of the button according to your preference.
  2. Icon: Use the default icon or replace it with a new one from the icons library. 
  3. Page: Select the page you want to link to from the button.
Step 4: Toggle Show title to display or hide the button titles.


Step 5: To finish, click Save draft in the bottom right corner. 
Please note that saving a draft affects only the design page, allowing you to make further changes. To make the current design available to all mobile users, click Publish to Mobile.

If you have any further questions about using the bottom tab, we’re happy to help! Please reach out to us at customer.success@jmango360.com!