An eCommerce store is nothing without great navigation. After all, you, as a Shopify merchant, want visitors to be able to traverse through your site without hassle and find what they are looking for with the help of an optimized Shopify navigation menu.
Website navigation is the process of visitors flowing from one page to another whilst browsing. This process is informed by the collection of links on a menu, navigation bar, footer, and sidebar, and is an integral part of the user experience. In fact, 8 out of 10 users leave an online store if it fails to provide convenient website navigation, and 76 percent of shoppers believe it is the most important element of web design.
So what exactly should website navigation do?
What Should Good Website Navigation Do?
The primary thing good site navigation should achieve is giving users the ability to move around and browse with ease. If navigation is not intuitive, visitors will become frustrated and leave the site. In order to facilitate this, your Shopify store should do the following.
Provide limited selection
Good navigation should condense your entire store to provide shoppers with a smaller selection of links to click so they can view relevant products. As human brains can only hold 7 things in their short-term memory at one time, it is vital to keep the main navigation tabs around this number to avoid overwhelming visitors. There too should be a limited amount of clicks for a shopper to find the item they are after.
Have clear labeling
The navigation bar should also have clear labels using familiar copy to demonstrate exactly where in the website users will be taken to. There should be no ambiguity in the naming of the labels. It means that they should be descriptive and distinct categories. Research by Resnick, M.L. & Sanchez, J. (2004) found that the quality of labels had a great effect on the amount of products users were able to find. Thus, clear and concise labeling can go a long way in aiding in product discovery and purchase likelihood.
Tell people where they are
It is also important for visitors to your website to clearly see where they are currently and how to go back. This is in order to instill confidence and avoid confusion from the user as they browse through your store. Visitors to your site should be able to determine the website they are on and the page topic at a glance.
Now that we understand the functions good navigation provides, let’s dive into practical steps you can take to achieve top-notch navigation for your Shopify store.
If you don't like to read, watch this video instead:
Best Navigation Practices For Your Shopify Store
Customer-focused site mapping
To truly understand how to ensure frictionless and intuitive navigation, you first need to get into the shoes of your customer. A useful exercise in achieving a customer-centric navigation design is to create different user scenarios to reverse engineer the best navigational structure for your store.
A user scenario is the creation of a customer goal in order to better understand how they would achieve the goal via your eCommerce store. Once that goal is established, it is much easier to figure out how they would go about achieving it, which can be used as a basis for convenient navigation.
When creating your user scenarios, take into account the following:
- The demographic of the user
- The situation that prompts the user to seek the product or service
- The user’s specific goal
- The path to completing the task
- Points of friction in the user experience
With the help of a user scenario, e-merchants can gain knowledge of how people would move through their site to complete the task. This information can be used to guide and inform the site map. (Source: UX For The Masses)
Being the first thing visitors to your site will see and where 23% of their attention is cumulatively spent, the menu bar is the focal point of your navigation efforts.
We know that limited menu items using clear, familiar and unambiguous copy is imperative. Fortunately, Shopify allows you to customize your menu bar so that it relates to your products and pages. The first step here would be to categorize your website into no more than seven menu items. Allocate non-generic names to them, for example, rather than having a menu item labeled Products, instead try something more specific such as Dresses or T-shirts.
Yummy Bazaar breaks down their items into familiar food categories for their main menu. (Source: Yummy Bazaar)
Once these are established, organize them in order of importance as these should be displayed in order from left to right and allocate the appropriate collection pages to each one. You can then head to your Shopify admin page to edit your menu.
Under Themes click on Navigation. Then click on Main menu. Here, you can edit the name of each menu item.
The menu items will most likely require further specification that will neatly arrange your inventory into palatable chunks. For example, if one of your menu items is Dresses, you may have hundreds of dresses which are too many for visitors to sift through without frustration. Hence, you would benefit from a sub-menu item like Formal Dresses to narrow down the number of products a customer is presented with.
There are a couple of menu bar design options which will allow you to display your product categories under the main menu labels.
A dropdown menu presents users with a vertical sub-menu of collections related to the main menu item in a single list-like fashion. They are great as they can aid in saving space on the main menu bar and have been a long feature of websites, so users are familiar with how they work.
These should be short, not falling below the fold, to avoid customers having to scroll to view the entire list. Additionally, to ensure visitors know where they are and where they are going in relation to your store, it is useful to therefore keep the menu label in view.
Let’s take a look at how to create a navigation dropdown menu in Shopify.
From your Shopify admin page, under Online Store go to Navigation and then click on the name of your main menu. Choose or add a menu item to be the header for your drop-down menu. You can now add a new menu item to each of the nested headers using drag-and-drop.
Mega menu and breadcrumb navigation
If you are a store with a large amount of products, dropdown menus with items that do not go below the fold may be difficult to achieve. A mega menu could, therefore, be a much better option. They are a type of expandable menu in which multiple options are displayed in a two-dimensional dropdown layout.
Red Dress has a massive collection of fashion items. Rather than listing them all in a lengthy dropdown menu, the mega menu allows visitors to the site to quickly navigate to a page containing their desired product type with descriptive sub-menu items that are displayed horizontally, in turn saving space. (Source: Red Dress)
Although they provide greater flexibility over the grouping of collections, they should still be limited and easy to scan so as to not overwhelm your visitors.
Apps such as Buddha Mega Menu and Smart Mega Menu and Navigation equip your store with mega menus where even images can be added for a greater visual impact.
Breadcrumb navigation is another useful option for larger stores. Based on the path they took, the hierarchy of the website, or the attributes of the items displayed on a particular page, it provides a visual representation of where on the site a user is.
Amazon uses breadcrumb navigation based on the hierarchy of its store. With its expansive range of products, this type of navigation is useful in providing visitors with context about where they are on the site.
This can greatly reduce the number of actions customers will need to take to navigate to a higher-level page. Also, it is great in assisting visitors to discover other pages and sections of your website. You can add breadcrumb navigation to your Shopify store by following this guide.
Considerations for mobile
The smaller screen size of mobile devices present additional challenges when it comes to navigation, particularly for the menu bar.
On these devices, dropdown menus are not a viable option as they take up a lot of space on the screen, resulting in users needing to scroll to view all menu items. This is a huge pitfall as scrolling down the menu can easily result in an unwanted click. This may send the visitor to an incorrect page, which would cause major frustration. Additionally, the width of the screen will most likely be unable to accommodate all the main menu options neatly.
Opting for a hamburger bar will, therefore, be a great tool in overcoming these issues. Rather than listing the menu items horizontally, the hamburger bar sits at the top corner of the screen and collapses to present the main menu options. You can also include a small selection of priority actions alongside the hamburger bar for quicker navigation to popular pages.
WWF condensed their navigation bar so that it accommodates mobile screen sizes. As well as having a collapsible hamburger menu on the mobile site, they also include a separate tab for their most popular site actions. (Source: WWF)
Furthermore, as mobile devices are touchscreen, when designing your mobile menu ensure that the tappable menu items have sufficient space between them and are large. This will help to prevent visitors to your site accidentally clicking on the wrong option.
Navigation is a crucial part of the user experience on a website. It allows visitors to your site to move through it with ease leading to greater discovery, which in turn could lead to more sales! By incorporating some of the practices mentioned in this article, we’re sure that you’ll be able to provide visitors to your Shopify store with an impeccable browsing experience.