Mobile navigation extension

Author: An Do 289 views

Bottom navigation bars display three to five destinations at the bottom of a screen. An icon and an optional text label represent each destination. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.

This type of navigation would have a Home, a Cart, and a Search button. You can also add more buttons or links to this navigation to redirect the customer to the page you want like Collection, for example.

1. How to install the Mobile navigation extension?

To open the Extension popup, you have two ways:

Click on the Extension icon at the top left corner.
Under the Extension tab, click Add more.

On the Extension popup, you can see the Mobile navigation extension, click Install now to install it.

After installation, this extension will be shown on all the pages you have in your store, no need to drag the extension to your page. You can view the design in mobile and tablet mode from the EComposer’s editor and it can only function on the live page.

2. How to set up Mobile Navigation extension?

2.1 General

Enable extension: You can either choose to enable or disable this extension by ticking or unticking this option box
Hide mobile navigation when scrolling down: You can tick or untick this option to hide or show the navigation when scrolling down on mobile
There are Menu typography, Icon width, Background color, Icon color, Label color, and Menu spacing in this tab settings for you to adjust the Mobile navigation

2.2 Mobile item list

You can add more items to the mobile navigation. In each item, you could fill in the title and corresponding link and rearrange the position.

In the example below, the title is Home, and the link is “/“, when clicking on it, it would redirect the customer to your home page.

For the cart and search, we’ve automatically added a logic link in the backend to lead the visitor to the corresponding page. So you need to fill in the title and adjust its design.