Mobile Navigation

I. What is mobile navigation?

Mobile navigation on a website refers to the design and functionality that enables users to access and navigate the site seamlessly on mobile devices, such as smartphones and tablets.

The goal is to provide an efficient and enjoyable browsing experience for users accessing the website on mobile devices, considering the limitations of smaller screens and touch interactions.

II. How to set up mobile navigation?

The basic concept involves a separate menu from the desktop version, allowing flexible arrangement of information blocks (e.g., social, selector, text, image).

Open the Theme Editor and find the Mobile navigation section in the Header Group.

1. General setting

• If you want to enable the language/currency selection feature to allow users to choose their preferred language/currency, tick the checkbox Show language selector/ Show currency selector.
• When Setup menu for mobile display, you can choose the background/text/divider color of the menu to display in light/dark mode
  
  

2. Customizing blocks

If you want to customize:
You can add and customize various blocks in mobile navigation:

• Cart: Display item count and activate the mini cart upon click.
• Account & Log: Redirect users to the Customer login page with a simple click.
• Image: Choose and link an image for mobile navigation, redirecting users upon click.
• Social Icons: Display configured social media icons.
• Text: Enable custom text display with styling options like bold, italic, list creation, and link insertion.

By organizing these blocks, you can create a streamlined and user-friendly mobile navigation experience.

III. How to set up Mobile Menu?

1. Basic Setup:

For a straightforward setup, choose a menu in the Mobile Navigation settings, and it will be displayed. The mobile navigation allows up to 3 levels, mirroring the menu configuration in the desktop navigation.

2. Advanced Setup (Up to 4 Levels):

a) Combining Mobile Navigation Setting and Menu Item Block:

If you set up a menu in both Mobile Navigation and the menu item block, the menu selected in section setting  will be disabled.

Each new menu block added equals a new menu item displayed on mobile navigation.

This allows up to 4 levels of menus, resembling the desktop setup.

b) Setting Menu in Menu Item Block:

• Menu Item: Enter the menu item name.
• Menu: Click "Select menu" to choose from existing menus or search.
• Menu Item Link: Enter the redirection link for users clicking the menu item.

Result Scenarios:

Setting up menus can be as simple as selecting a menu or creating a hierarchical structure with multiple blocks, providing flexibility similar to desktop navigation setup.