Navigation

Overview

The Navigation section serves as your storefront’s main navigation bar, combining essential elements such as menus, logo, search, account access, and cart features. This central location is vital for helping visitors explore collections and connect with your brand across both desktop and mobile devices. A thoughtfully configured Navigation section not only promotes engagement but also ensures smooth and intuitive browsing throughout your site.

⚠️ Important: A clear and accessible navigation system makes it easier for customers to locate products and helps foster trust from their very first visit.

Key components and functionality

Introduction

Settings within the Navigation section are designed to enhance user experience and boost accessibility for all shoppers. Adjust how, when, and where navigation options appear for both desktop and mobile visitors to cultivate effortless browsing and engagement.

Menu interaction settings

Menu interaction settings govern the way visitors open and interact with dropdown menus, directly impacting the usability and accessibility of your site’s navigation.

Show first mobile menu item open

Control whether the first mobile menu item expands automatically upon loading.

Default: enabled

1. Enabled expands the first submenu on mobile by default, making featured links more visible.

2. Disabled keeps all submenus collapsed, maintaining a compact and minimal mobile menu until a user interacts.

This option is useful for highlighting important links or calls to action right away for mobile visitors.

Supported block types

The Navigation section enables you to mix and arrange several block types, giving you the flexibility to design simple to feature-rich navigation bars that fit your business and customer needs.

1. Account icon

2. Cart

3. Hamburger menu

4. Logo

5. Main menu

6. Predictive search

You are free to combine and reorder these blocks to deliver the best user experience for your store.

Usage notes

Navigation is fully responsive, adapting your navigation layout for every device size and orientation. Use optimized images, ensure accessible color contrast, and test your navigation thoroughly across tablets, phones, and desktops. Clear menu options and the on click interaction setting will help deliver a streamlined, accessible navigation for all shoppers.

1. Test the navigation layout on desktop, tablet, and mobile to guarantee usability and appearance.

2. Limit navigation depth to make browsing faster and easier for visitors.

3. Thoughtfully arrange and align navigation blocks so shoppers can focus on your most important content and actions.

4. Emphasize readability and usability by choosing strong color contrasts and simple iconography.

💡 Tip: Review your navigation and search blocks on various device types. Even small changes in menu structure or visibility can have a significant impact on the shopping experience.

The Navigation section is a powerful tool for uniting branding, usability, and essential store features in one high-visibility area. You can create a navigation bar that welcomes, guides, and supports your customers at every stage of their visit by experimenting with the order and settings of each block.