Mobile navigation extension

The Mobile Navigation extension enhances the mobile shopping experience by adding a convenient bottom navigation bar to your storefront. It provides customers with quick and easy access to essential pages such as Home, Cart, and Search, helping them navigate your store more efficiently.

You can also add custom navigation items and links to direct customers to other important pages, such as Collections, Products, or any page you choose. With a simple and accessible navigation layout, this extension helps improve usability, streamline navigation, and make key store pages easier to reach on mobile devices.

1. How to install the Extension ?

Step 1: From your EComposer dashboard, go to CRO Extensions from the left sidebar menu.
Step 2: Search for the Mobile navigation extension.
Step 3: Click Details and install the extension on your store.

After installation, the extension will be automatically applied to all pages in your store. You do not need to manually add or drag the extension to individual pages. You can preview and customize its design in mobile and tablet modes directly from the EComposer editor. Please note that the extension is only functional on the live page.

Note: You can use this extension on EComposer Pro and Premium plans. Upgrade now to unlock

2. Configuring the extension

2.1 General

• Enable extension: Turn the Mobile Navigation extension on or off using this toggle.
• Hide mobile navigation when scrolling down: Enable this option to automatically hide the mobile navigation bar when scrolling down. Disable it to keep the navigation bar visible while scrolling.
• Menu typography: Customize the typography of the menu labels, including font style, size, weight, and other available text settings.
• Icon width: Adjust the width of the navigation icons to control their overall size and appearance.
• Background color: Set the background color of the mobile navigation bar.
• Icon color: Customize the color of the navigation icons.
• Label color: Customize the color of the menu labels displayed below the icons.
• Menu spacing: Adjust the spacing between navigation items to control the overall layout and alignment of the mobile navigation bar.

2.2 Mobile item list

You can add multiple items to the mobile navigation. For each item, you can configure its title, icon, and link, then drag and drop the items to rearrange their order.

• Title: Enter the name you want to display for the navigation item.
• Icon: Select an icon from the available options or add a custom SVG icon.
• Link: Enter or paste the URL where customers will be redirected when they click the navigation item.
• Rearrange items: Drag and drop the items to change their display order in the mobile navigation.
• Delete item: Click the delete icon to remove an item from the mobile navigation.

For example, in the image above, the item title is Home, the selected icon is a home icon, and the link is /. When customers click this item, they will be redirected to your store’s home page.

• Cart and Search: The Cart and Search items use built-in links that are automatically configured in the backend. When clicked, customers will be redirected to the corresponding Cart or Search page. You only need to customize the title, icon, and available styling options for these items.
• Count background color: Customize the background color of the cart item count displayed on the Cart icon.
• Count text color: Customize the text color of the cart item count displayed on the Cart icon.

• Wishlist: The Wishlist item retrieves wishlist data from EComposer’s Wishlist extension. Make sure the Wishlist extension is installed and configured before using this item.
• Title: Enter the title that you want to display for the Wishlist item.
• Icon: Select or customize the icon displayed for the Wishlist item.
• Wishlist count: The Wishlist icon can display the number of products currently added to the customer’s wishlist.