Mobile bottom navigation bar

Add a sticky, app-like bar of icons with quick links and actions for your shoppers.

How-to guide Pro Navigation 9 min read

The bar stays on screen while shoppers scroll, like a mobile app’s tab bar, giving one-tap access to home, the menu, cart, search, chat or a phone call. An item can also open a small submenu, such as a More item with account, contact and FAQ links.

The bottom bar editor with the settings tabs on the left, the Menu items list and a live preview of the bar — The bottom bar editor: settings tabs (1) and live preview (2). Switch the preview device with the buttons at the bottom left of the preview.

The settings tabs are Menu items, General, Typography, Colors, Position, Advanced and Version history.

Create a bottom bar

Create the bar

On the app Home page, click Add bottom navigation — or in Menu manager, click Create menu and choose Mobile bottom bar.

Home: (1) quick actions to create or import a menu, (2) the button that activates the app embed
Set up the items

In Menu items, edit the default items and add your own. See Add and edit items.

The bottom bar editor: settings tabs (1) and live preview (2). Switch the preview device with the buttons at the bottom left of the preview.
Style the bar

Adjust the General, Typography and Colors tabs. See Style the bar.

General settings, including the submenu position and open style.
Choose where it appears

In Position, choose the devices and the position on screen. See Choose where the bar appears.

Turn the bar on for mobile (1) and desktop (2), then choose a position.
Save and publish

Click Save, then Publish at the top right. See Publish the bar.

Add and edit items

Show the item actions

In Menu items, hover over an item to show Edit, Duplicate and Delete. Drag an item by its handle to reorder it.

Hover over an item to edit, duplicate or delete it.
Add items and submenus

Click Add item to add an item at that level, or Add submenu on an item to nest items under it. Nested items open as a submenu, up to three levels.
Set the icon, title and link

Click Edit to open Edit menu item. Choose an Icon (click Change), enter a Title, then click the Link field.

Click the Link field to choose the item's action.
Choose an action

In Select link, click Select next to an action (1). The Link box (2) gets the start of the link, for example /collections/ for Products by collection. Complete it as shown in the Syntax column, such as /collections/summer-sale, and click Update (3).

Click Select (1), complete the link (2), then click Update (3).

Item settings

Icon: Click Change to choose an icon or upload an image.
Title: The text under the icon.
Link: What happens on tap. Click it to open Select link (see Item actions).
Open in new tab: Opens the link in a new browser tab.
Description: Optional short text shown with the item.
Icon size: Icon size in px.
Box > Border radius: Rounds the item box’s corners, 0 to 100 px.
Box > Box padding: Space inside the item box, 0 to 100 px.
Box > Position: Moves the item left (negative) or right (positive), -100 to 100 px.
Color: Text, icon, icon background and background colors for this item only, each with a hover color. Clear settings returns to the bar’s colors.
Badge: A small label on the item, with Title, Badge text color and Badge background color.
Visibility: Hides the item on some devices or for some shoppers, or shows it only between two dates. See Display rules.
Advanced: Extra classname adds a CSS class for custom CSS. Divide adds a divider line next to the item.

Item actions

Select link groups actions into eight sections. Click the info icon next to an action to see an example.

1. Link to your store internal pages: Exact short url /[your-url], Home page /, All products /collections/all, Products by collection /collections/[collection-handle], A product detail /products/[your-product-shorturl], All blog posts /blogs/news, A blog posts detail /blogs/news/[your-blog-shorturl], A page detail /pages/[your-page-shorturl], Cart page /cart, Search page /search, Contact form /pages/contact.
2. Open panels (Compatible with popular themes): Open Menu (mobile) gm-open:MobileMenu, Open Cart gm-open:Cart, Open Search gm-open:Search.
3. Open other applications (E.g. Shopify inbox...): Open Chatbox gm-open:Inbox opens the Shopify Inbox chat.
4. Scroll on page: Scroll to top gm-scroll:Top, Scroll to bottom gm-scroll:Bottom, Scroll to a on-page element gm-scroll:OnPage(htmlElement).
5. Call javascript function: gm-javascript:Function runs a JavaScript function on your site.
6. Support tools: Make a phone call tel:, Send a SMS message sms:, Send an email mailto:, Chat with Messenger, Whatsapp, Telegram, Line or Zalo.
7. Share: Copy current URL gm-share:CopyUrl, Share to Facebook gm-share:Facebook, Share to X (Twitter) gm-share:X.
8. Link to extend websites: Full url (any full web address), Don’t redirect #.

Select link sections for open panels, other applications and scrolling — Sections 2 to 4: open panels, other applications and scrolling.

Select link sections for JavaScript functions and support tools — Sections 5 and 6: JavaScript and support tools.

Select link sections for sharing and external links — Sections 7 and 8: share and external links.

Examples:

gm-scroll:Top(150) — scrolls to the top, leaving a 150 px margin.
gm-scroll:OnPage(#page-title) — scrolls to the element with the ID page-title.
tel:+0123456789 — calls this number.
sms:+012345678?body=I need help — opens an SMS with the text filled in.
https://wa.me/0123456789 — opens a WhatsApp chat. Use the country code, without +.

Style the bar

The General settings tab with Submenu position and Submenu open style highlighted — General settings, including the submenu position and open style.

Main menu (Level 1)

Menu rounded: Corner radius of the bar, 0 to 50 px.
Item spacing: Space between items, 0 to 50 px.
Padding inline · Padding block: Horizontal and vertical space inside each item, 0 to 100 px.
Use box shadow: Adds a shadow around the bar.

Submenu (Level 2, 3)

Submenu position: Left, Right, Center or Full width.
Submenu open style: Dropdown or Slideout.
Submenu width: 100 to 900 px.
Padding inline · Padding block: Horizontal and vertical space inside each submenu item, 0 to 100 px.

Icon & text

Icon size · Submenu icon size: Icon sizes for the bar and its submenus, 0 to 100 px.
Main menu gap: text - icon · Submenu gap: text - icon: Space between icon and text, 0 to 50 px.

Advanced

Hide menu text: Icons only in the bar.
Hide submenu text: Icons only in submenus.
Hide submenu description: Hides item descriptions in submenus.

Choose where the bar appears

Choose the devices

In Position, turn on Display on mobile (1), Display on desktop (2), or both.

Turn the bar on for mobile (1) and desktop (2), then choose a position.
Pick a position

Click a layout under each switch:
- Mobile — Bottom, Top, Center left, Center right, Bottom left or Bottom right.
- Desktop — Bottom center, Bottom left, Bottom right, Bottom full width, Center left or Center right.
Hide while scrolling (optional)

Select Hide when scrolling down so the bar doesn’t cover content while the shopper scrolls down.

Advanced settings

Market availability: Shows the bar only in selected markets. See Show menus by market.
Menu z-index: Stacking order. Raise it if other elements cover the bar; lower it if the bar covers popups.
Menu opacity: Bar transparency, 0 to 100%.
Bottom margin: Space between the bar and the bottom of the screen.
Stylesheet / CSS: Custom CSS for the bar.
JavaScript: Custom JavaScript for the bar.

Display rules

Where	Setting	Effect
Position tab	Display on mobile, Display on desktop	Shows or hides the whole bar per device.
Advanced tab	Market availability	Shows the whole bar only in selected markets.
Item > Visibility	Hide on desktop, Hide on mobile	Hides one item on a device.
Item > Visibility	Hide when logged in, Only show when logged in	Shows one item only to guests, or only to logged-in customers.
Item > Visibility	Schedule publishing	Shows one item only between Date starting and Date ending.

Publish the bar

Publish

Click Save, then Publish at the top right, choose the theme and confirm. The dialog works as for a mega menu (see Publish a menu). The status changes from Draft to Active.

Publish menu dialog: (1) Choose theme, (2) Preview and Publish
Check your storefront

Open your storefront on a phone, or in a narrow browser window.

Change or remove it

Take it off your storefront — click Disable at the top of the editor.
Restore an earlier version — open the Version history tab. See Version history.

Troubleshooting

The bar doesn't appear on my storefront

The bar loads through the app embed, like all menus. Make sure the app embed is on for that theme — see Enable the app embed.

An Open panels action does nothing

Open panels actions open your theme’s own menu drawer, cart drawer or search, so they work with popular themes. If nothing happens on yours, link to the page instead (for example Cart page /cart), or contact us.

The bar overlaps a chat button or cookie banner

Raise Bottom margin or change Menu z-index in the Advanced tab, or choose another position in the Position tab.

Was this helpful?

Report an issue

Mobile bottom navigation bar

Create a bottom bar

Create the bar

Set up the items

Style the bar

Choose where it appears

Save and publish

Add and edit items

Show the item actions

Add items and submenus

Set the icon, title and link

Choose an action

Item settings

Item actions

Style the bar

Choose where the bar appears

Choose the devices

Pick a position

Hide while scrolling (optional)

Advanced settings

Display rules

Publish the bar

Publish

Check your storefront

Change or remove it

Troubleshooting

Related pages