Skip to main content
All CollectionsHow to build a Shopify mobile app
How to customise the bottom tab menu
How to customise the bottom tab menu

Learn how to customise the bottom tab menu and upload custom icons

Josh Gare avatar
Written by Josh Gare
Updated over 2 years ago

The 'Bottom Tab Menu' is the tab bar at the bottom of the app that helps customers navigate the app. It contains shortcuts to different pages and you can add up to 5 shortcuts in total. As such, you want to ensure that you showcase the most important pages.

To help you get started, the bottom tab menu has been set-up for you with shortcuts to the following pages:

  1. Homepage

  2. Shop Menu

  3. Basket

  4. Wishlist

  5. Account

However, you can customise the bottom tab menu as much as you like.

Customising the bottom tab menu

There are a number of ways that you can customise the bottom tab menu:

  1. Re-order pages

  2. Replace pages

  3. Select your favourite icons from the icon library

  4. Upload your own custom icons

  5. Style the bottom tab menu

πŸ’‘ Pro Tip:

  • Ensure that you use different colours for the default and selected states to let users know which page they are currently on.

1. Re-ordering Pages

In order to re-order the shortcuts on the bottom tab bar, all you need to do is drag & drop menu items to their desired location.

2. Replacing Pages

If you want to change a shortcut and showcase another page instead, follow these steps:

  1. Click 'EDIT' on the menu item.

  2. Click on the 'LINKS TO' dropdown and select a page.

3. The Icon Library

Each page comes with a library of 10 icons for you to choose from. However, you can upload your own custom icons if you prefer.

4. Uploading Custom Icons

In order to upload custom icons, follow these steps:

  1. Click on the 'UPLOAD CUSTOM ICONS' toggle at the top of the side panel.

  2. Replace the existing icons with your own custom icons.

πŸ’‘ Pro Tip:

  • When uploading custom icons, ensure that you upload a different version of the same icon for the default and selected states to let users know which page they are currently on.

5. Styling the bottom tab menu

There are a number of ways that you can style the bottom tab menu:

  1. Change the background colour.

  2. Change the default icon colour.

  3. Change the selected icon colour.

  4. Add / remove menu titles.

  5. Change the default font colour.

  6. Change the selected font colour

πŸ’‘ Pro Tip:

  • Ensure that you use different colours for the default and selected states to let users know which page they are currently on and try and match the icon colours with the font colours.

Did this answer your question?