MobiCart
Bottom navigation is the tab bar at the foot of your Shopify mobile app, and in MobiCart you set it up in the Builder with no code: up to five tabs. This tutorial covers both halves: every setting in the merchant dashboard, and exactly what your shoppers see and tap on iPhone and Android.
In short: open the Builder, choose the Bottom navigation page, pick your tabs (Home, Categories, Search, Cart, Account), order them, set labels and icons, save a draft, check it on your phone, then publish.
Watch the video tutorial #
Prefer to watch? This 3-minute video walks through every step below.
What bottom navigation is, and why it matters #
Bottom navigation is a row of icons, usually with short labels, fixed to the bottom edge of an app. Each icon is a tab. One tap takes the shopper to a main area of the store, from any screen.
It sits where thumbs already rest, so the cart, the account and your categories are one tap away instead of hidden behind a menu. Both platforms treat it as the standard pattern: Apple calls it a tab bar and Google’s Material Design calls it a navigation bar, recommended for three to five destinations.
MobiCart draws the platform’s own bar, not an imitation. Icons are SF Symbols on iOS and Material icons on Android, so the bar looks and behaves the way shoppers expect on their phone.
Bottom navigation at a glance #
| Setting | What you can do | Default |
|---|---|---|
| Show bottom navigation | Turn the whole bar on or off | On |
| Show on category pages | Keep the bar under a category’s products, or give those pages the full screen | On |
| Tab labels | Always show, Selected tab only, or Icons only | Always show |
| Tabs | Up to 5, Home included | Home, Cart, Account |
| Tab label | Your own text, up to 20 characters, per language | The app’s built-in name |
| Tab icon | Choose from the icons offered for that tab type | Home, bag, person |
The five tab types #
| Tab type | What a tap does in the app | How many | Icons to choose from |
|---|---|---|---|
| Home | Returns to your Home page | Always exactly 1 | Home, Store |
| Categories | Opens the categories sheet for the menu you picked | As many as fit | 23 icons in 4 groups |
| Search | Opens search over Home | 0 or 1 | Search (fixed) |
| Cart | Opens the cart, with an item-count badge | 0 or 1 | Bag, Cart, Basket |
| Account | Opens the shopper’s account | 0 or 1 | Person, Person circle |
Part 1: Set up bottom navigation in the merchant dashboard #
Step 1: Open the Bottom navigation page #
Open MobiCart from your Shopify admin and go to the Builder. In the Pages list, choose Bottom navigation, described there as “The tab bar on every store screen”.
The left panel explains the bar, the phone in the middle shows it live, and every option is in the panel on the right. There are no blocks to drag on this page, because the bar is one unit.
Step 2: Turn the bar on, and decide about category pages #
Show bottom navigation switches the whole bar on or off. If you turn it off, your tabs are kept for when you turn it back on, and Cart and Account stay in Home’s header so shoppers can still reach them.
Show on category pages keeps the bar under a category’s products. Turn it off and category pages use the whole screen, which gives more room for product photos.
Step 3: Choose when labels show #
Tab labels has three options:
- Always show: every tab has its label under its icon. The clearest choice, and the default.
- Selected tab only: only the tab the shopper is on shows its label.
- Icons only: no labels at all. Use it only when every icon is obvious.
Step 4: Add, remove and reorder tabs #
A new app starts with three tabs: Home, Cart and Account. Under Add a tab, add Categories, Search, or any tab you removed earlier. The counter shows how full the bar is, for example “4 of 5 tabs”.
Three rules apply:
- The bar holds up to 5 tabs. When it is full, remove one to add another.
- Home is always there. It has no delete button, but you can move it anywhere in the bar. The app always opens on Home, wherever its tab sits.
- Cart, Account and Search appear once each. Categories is the only type you can add more than once.
Use the up and down arrows on a tab to change its position. The top tab in the list is the left-most tab in the app.
Step 5: Name each tab #
Type a label in the tab’s text field, up to 20 characters. Leave it blank and the app uses its own name for that tab (Home, Categories, Cart, Account, Search), already translated into the shopper’s language.
If you write your own labels and your app has more than one language, use the Builder’s Languages control to write the label in each one. Until a label is translated, shoppers see the default-language text.
Short labels work best. One word fits on every phone; two long words may not.
Step 6: Pick the icons #
Click a tab’s icon to open its choices. Each tab type offers only icons that fit it:
- Home: Home or Store
- Cart: Bag, Cart or Basket
- Account: Person or Person circle
- Search: always the search icon
A Categories tab gets a searchable library of 23 icons in four groups: General (grid, list, tag, star, new, heart, gift, sale), Fashion (shirt, hanger, shoe, handbag, watch, jewellery, beauty), Home and living (furniture, lighting, kitchen, garden) and More (kids, pets, sport, books). Type a word such as “shoes” or “sale” to filter.
Step 7: Connect a Categories tab to a menu #
Every Categories tab opens one menu. A new one starts on your store’s main menu; use the menu field on the tab to pick a different one.
Because you can add several Categories tabs, you can give your biggest departments their own tab. For example: a “Women” tab with the hanger icon on one menu, and a “Sale” tab with the sale icon on another.
Two things to know:
- Menus are shared. Editing a menu here also changes every block and tab that uses it.
- Each tab needs its own menu. The Builder warns you when a Categories tab has no menu (the app leaves that tab out) or when two tabs open the same menu.
Step 8: Preview, save and publish #
Above the phone preview, switch between Home and Category page to see the bar on both kinds of screen.
Then finish in three moves:
- Save as Draft. A draft is only visible on your preview device.
- Live preview. Scan the QR code with your phone to open your app in MobiCart Preview and tap through the real bar. Edits in the Builder refresh on the phone.
- Publish. This pushes the page live to your customers’ apps.
Building and previewing are free. See pricing for which platforms and features each plan includes. For the full launch steps, read Preview and publish your app.
Part 2: How bottom navigation works in the mobile app #
This is what your shoppers get once the bar is published.
What each tab does #
- Home returns to your Home page from anywhere. Home keeps its place, so a shopper who scrolled halfway down comes back to the same spot.
- Cart and Account open on top of Home, with a back button.
- Categories opens the categories sheet over Home, on the menu you chose for that tab.
- Search opens search over Home, ready to type.
Tapping a different tab closes whatever the last one left open. If search or a categories sheet is showing and the shopper taps Cart, it closes first and the cart opens cleanly.
The cart badge #
The Cart tab shows the number of items in the cart as a badge. Above 99 it reads 99+. An empty cart shows no badge.
Colors, icons and languages #
The bar takes its colors from your app’s color theme: the selected tab uses your primary color and the bar uses your surface color. You do not style it separately.
On iPhone the selected tab’s icon is filled and the others are outlined, which is the iOS convention. On Android the bar uses Material icons.
Labels follow the phone’s language. Blank labels use the app’s built-in translations; your own labels use the translation you wrote for that language.
Home’s header adjusts by itself #
Home’s header normally has buttons for the cart and the account. When the bar has a Cart or Account tab, the header leaves its own button out, so shoppers never see the same shortcut twice. Turn the bar off and those buttons come back.
Recommended setups #
| Store type | Tabs, left to right |
|---|---|
| Small catalog, one main menu | Home, Search, Cart, Account |
| Most stores | Home, Categories, Search, Cart, Account |
| Two big departments | Home, Women, Men, Cart, Account |
| Deal-driven store | Home, Categories, Sale, Cart, Account |
Practical rules that hold for all of them:
- Keep Cart in the bar. It is the tab that leads to a sale, and the badge reminds shoppers what they left in it.
- Use Always show for labels unless you have tested that shoppers understand every icon.
- Put the tabs shoppers use most at the edges, where thumbs reach first.
- Do not fill all five places just because you can. Four clear tabs beat five vague ones.
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| A Categories tab is missing in the app | The tab has no menu | Pick a menu on that tab, then publish |
| The bar does not show for some shoppers | Their app is an older version | Shoppers see the bar once their app is updated to the newest version |
| “Add a tab” shows no options | The bar already has 5 tabs | Remove a tab first |
| The bar is missing on category pages | Show on category pages is off | Turn it on |
| A warning says two tabs open the same menu | Two Categories tabs share a menu | Give one of them a different menu |
| Changes show on your phone but not for customers | The page is saved as a draft | Publish the page |
| The Search tab’s icon cannot be changed | Search always uses the search icon | Nothing to fix; change its label instead |
Frequently asked questions #
How many tabs can bottom navigation have in MobiCart? #
Up to five, including Home. The minimum is one, because Home cannot be removed.
Can I remove the Home tab? #
No. You can move it to any position, but the bar always has one Home tab and the app always opens on Home.
Can I add more than one Categories tab? #
Yes. Categories is the only tab type you can add several times, as long as there is room. Each one opens its own menu and can have its own label and icon.
Can I hide the bottom navigation completely? #
Yes. Turn off Show bottom navigation. Your tabs are kept, and Cart and Account move back to Home’s header.
Can I upload my own tab icons? #
No. Each tab type has a fixed set of icons, and Categories tabs have a library of 23. That keeps the bar native on both iOS and Android.
Can I translate tab labels? #
Yes. Blank labels are translated by the app automatically. Labels you write yourself can be written per language with the Builder’s Languages control.
Does bottom navigation work on both iPhone and Android? #
Yes. One setup in the Builder drives both. Each platform draws its own native bar with its own icon set.
Do I need code to change the bottom navigation? #
No. Everything in this tutorial is done in the Builder, and you can check the result on your own phone before any customer sees it.
Need a hand? #
Book a free 30-minute demo and we will set up your bottom navigation with you.
