Customize the bottom-tab menu

The bottom-tab menu is the row of tabs along the bottom of your app. You edit it in the builder: rename each tab, pick its icon, show or hide it, change the order, add a badge, and add custom tabs that open the page, collection, product or cart you want.

Open the menu editor

Open App builder, then choose Navigation under Screens in the workspace picker. Your tabs are listed on the left and a live phone preview is on the right. Click a tab in the list, or tap it in the phone, to open its settings. The preview highlights the tab you're editing, so you can see exactly which one you are changing.

Your app starts with five built-in tabs: Home, Shop, Wishlist, Account and Search. Home and Search are fixed: they are always shown and stay in place at each end of the bar (they show a lock and read Always). The other tabs you can rename, reorder, hide or show.

Rename a tab and pick its icon

In a tab's settings, type the wording your shoppers see into Tab label; keep it to 20 characters, and it can't be empty. Below it, pick the icon that appears above the label in the app. Keep labels short and pair each one with a clear icon so the bar stays readable on a small screen. (Source: Apple Human Interface Guidelines - Tab bars.)

Show, hide and reorder tabs

Use the eye button on a tab's row, or the switch in its settings, to show or hide it. Between 2 and 5 tabs can be visible at once. The 5-tab ceiling is a platform limit, not a Vunda one: Android's navigation bar holds at most five destinations. (Source: Material Design - Navigation bar.) When a tab can't be switched on or off, its settings say why.

The list reads Drag to reorder: drag a row by its handle, or open a tab and use Move up or Move down in its settings. Home stays pinned to the start and Search to the end; everything else reorders freely in between.

Choose what the Shop tab shows

Open the Shop tab's settings and pick What shoppers browse:

• Your collections shows every collection that has products in it, each with its image, two to a row. New collections appear on their own, so there is nothing to keep up to date. Under Order, choose A to Z or Recently updated first. A collection without an image of its own uses its first product's image.
• A Shopify menu lists the categories you arrange yourself in Shopify, in your order, with sub-categories that open underneath. Create the menu in Shopify under Content > Menus, then type its Menu handle: Shopify shows the handle under the menu name. Open menus in Shopify takes you there. (Source: Shopify Help Center - Menus and links.)

As you choose, Vunda checks with Shopify and tells you exactly what shoppers will see, and the phone preview shows it. Only menu items that link to a collection or a product appear in the Shop tab. Pages, outside links and the home page are left out, and the check names them. Shopify's own Main menu (Home, Catalog, Contact) usually has nothing the Shop tab can show, so make a separate menu for your app.

Your app never shows an empty Shop tab. If the menu you chose doesn't exist or has nothing to show, the Shop tab shows your collections instead. If you have no collections with products yet, shoppers see Nothing to browse yet with a button to search.

The Shopify menu option works with the same markers as the menu strip: add _new_line to an item's name to show a New badge, or _hide_me to hide it (and anything under it) from your app without removing it from your online store.

Add a badge to a tab

Every tab has a Badge setting. Choose what the small count bubble shows: No badge, Wishlist count, or Cart count (the number of items in the shopper's cart). These are live counts your app fills in for each shopper and only shows when above zero, so you pick the source here, not a number. The preview shows a sample count on tabs that have a badge.

Add a custom tab

Click Add tab to create a custom tab; you can have up to three. Choose where it opens under Links to: a page, a collection, a product or the cart, then pick the specific page, collection or product. The tab takes that destination's name as its label unless you have already typed your own, and it switches on once it has a destination (if fewer than 5 tabs are visible). A custom tab with no destination stays hidden and is not saved as a visible tab.

To get rid of a custom tab, click Remove tab in its settings (or the delete button on its row). This frees the slot for another custom tab. If you remove one by mistake, discard your changes from the save bar.

Save your changes

Use the save bar at the top to save, or discard to roll back. There is nothing to publish separately for a menu edit. Shoppers see changes after their app refreshes its menu and is reopened, usually within two restarts. Check the preview on the right before you save to confirm the bar reads the way you want.