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!

• Related Articles

• Getting started with Alphonso

  Welcome to Alphonso - the advanced app builder designed to empower you to create exceptional mobile apps. This article will take you on a guided tour of Alphonso and the core pages. By the end, you'll have a general understanding of leveraging ...

• Push notifications in Alphonso

  Push notifications have been proven to be a direct and cost-efficient communication channel, fostering user engagement and retention. In this guide, we’ll explore the scope of push notifications in Alphonso and how to send push notifications. 1. ...

• Overview of design features

  Step into the realm of app design and let your creativity take flight! Alphonso empowers you to craft visually appealing apps without the need for coding knowledge. In this guide, we will provide a design overview of Alphonso, presenting steps for ...

• Build the brands page

  In this article, we'll provide you with an overview of the Alphonso brands page, step-by-step instructions, and best practices for building the page. Note: This user guide is applicable to BigCommerce. 1. About the brands page The Brands page in a ...

• Firebase in-app messaging

  Firebase in-app messages are powerful features that allow you to engage and communicate with your app users directly within your app's interface. In this article, we will explore the scope and prerequisites for using Firebase in-app and provide ...