Mobile navigation bar

A guide to enable and customize the mobile navigation bar

What is the mobile navigation bar?

The mobile navigation bar is a fixed navigation menu that remains visible at the bottom of the mobile screen as the users scroll up/down. A navigation bar helps your users navigate through your website with ease on limited mobile screens. It is different from the sticky header that appears on the top.

This article will help you set up the mobile navigation bar for your Shopify store.

How to customize your mobile navigation bar?

Steps:

1. In the theme editor (Customize), click Mobile navigation bar

2. Edit the settings

3. Save.

Blocks settings

This section has four pre-built blocks: Home, Products, Search, and Cart. You can choose to show/hide one particular block based on your store's objectives.

• Home: Get back to the home page.

• All products: Redirect customers to the all product page.

• Search: Let customers search for products.

• Cart: Let customers check the items they have added or check out.

• Custom link: Redirect customers to an attached link page as desired, see more here.

Section settings

You can show/hide the button labels by checking/unchecking the box.

You can also choose the cart type (drawer/page) and cart icon (shopping cart/shopping bag) for your mobile navigation bar. Locate Mobile navigation bar, choose Theme settings and make necessary changes.

Custom link settings

To show a custom link, you can follow these steps:

1. Block settings

In Mobile navigation bar section, choose Add block > Custom link.

2. Link settings:

In the custom link block, you can edit three elements:

• Title: Fill in the title of the section you want to add to the mobile navigation menu (this will be shown as the button label).

• Link: Paste a link or choose the section you want to add to the mobile navigation menu.

• Icon: Choose your favorite icon.