Your Cart is Empty

by Michael P. Hill July 26, 2016

Navigation menus are one of the most important elements of your Shopify theme because they help orient and guide the user throughout your shop. These menus affect how shoppers discover your product offerings, as well as any other info they may be seeking.

Don’t worry about mega menus

Mega menus, which feature large dropdown panels that appear when a user hovers over a first level navigational element, are rather trendy these days.

Often these second level menus include not only additional links to subsections but also feature images, promotions and other content directly within the menu space.

Another common feature of mega menus is that, when a user interacts with one or more links at the second level, an additional menu is displayed or triggered. A simpler implementation of mega menus is to simply arrange links in a smaller dropdown menu with two or more columns.

The whole idea of mega menus is to give users quick and easy access to highly specific areas of the site, including sub-collections or other content, within the minimum amount of screen real estate.

While mega menus or multi-column dropdowns definitely look cool and can be helpful in getting users to navigate around your store, they can also be tricky to implement within the Shopify platform given the limitations of the navigation menus.

They also can add substantially to load time and can be challenging to effectively modify for responsive design for mobile users.

Also, for mega menus to be as effective as possible, they must be carefully designed and coded, which can add significantly to implementation costs if your theme doesn’t already include this feature.

Do focus on making your navigation clear and easy

Instead of spending time and energy implementing mega menus, make use of the existing navigational features of your theme.

Most Shopify themes include dropdown menus that can, in some cases, go several levels deep.

Unless your store has a very large number of different products, this type of navigation is typically highly effective, easier to maintain and just fine for helping customers find what they’re looking for.

It’s easy for store owners to get caught up in the glitz of a mega menu and want to implement it on their own site. However, this is often done more for the “slick factor” than practical reasons and more often than not, most sites don’t need such detailed navigation.

Do break down bigger menus

If one of your navigation menus is so large that it needs multiple columns or a mega menu-style design, there’s a good chance it’s going to be overwhelming to your customers no matter what you do to the look and feel.

Take this as a sign that you may need to rethink your site navigation and organization and work within the confines of your Shopify theme — these limitations are often in place for a reason.

Try and think of ways you can group your products into larger, more intuitive collections or categories so that shoppers can find them easily. This is especially true if you don’t have many products of a specific type; for example, rather than have three separate menu links for “plates,” “cups” and “cutlery” if you only have two or three products of each type, try grouping them all in a “Dishware” collection that you link to from your main navigation, and then tag individual products with any relevant terms instead.

Don’t worry about advanced filtering or faceted browsing

One of the other most common navigation-related requests from Shopify store owners is advanced filtering or faceted browsing.

Popularized by ecommerce giants such as Amazon, these menus allow users to, typically with collection level pages, only show products that match specific criteria, such as manufacturer, color, size or other characteristics. These systems can also include “drill down” capabilities that change dynamically based on the current selection.

While most Shopify themes do feature some filtering capabilities on collection pages as well as the ability to include custom menus in collection page sidebars, these typically aren’t as advanced as those you’d find the ecommerce giants using.

While it’s possible to implement these advanced filtering and faceted browsing capabilities with Shopify, it typically requires an app or custom code to do correctly. However, customizing a Shopify theme comes with its own challenges and apps can also cause additional issues so do consider whether the results will outweigh any investment of time and money

Do spend time organizing your store

Instead of implementing complex filtering and faceted navigation, spend time making sure your products are well organized into collections, including creating very specific collections with a handful of highly relevant products.

You can use collections to group products by a variety of characteristics, including most of those which advanced filtering and faceted navigation would use. For example, a collection could be created for just black men’s pants or all natural hand lotions.

If building this many collections isn’t practical for you, you can also use various methods to filter the same collection in different ways, to give the illusion of having more specific collections. For example, you can create a link to a collection in one of your menus and choose to filter it with tags to only display the items in that collection that match that tag:

Shopify navigation using tags

Another trick involves linking directly to URL paths that already contain a keyword in the address. For example, take this URL pattern: /search?type=product&q=term.

If a user visits this URL, he or she will see all products that match the keyword (that’s where “ term” appears in the example). Although this technically leverages the search tool, the experience is very similar to browsing collections in most themes.

Keep in mind that filtering and faceted browsing is often most effective for stores with extremely large inventories and a broad customer base. It’s also tricky to do right from a user experience standpoint and can end up being more confusing or too specific for less advanced shoppers.

Finally, don’t lose sight of the value of your Shopify store’s search function. This can be a great way to help users find specific products, though it does require you to ensure your products are comprehensively and accurately tagged.

Do use best practices for navigation throughout the site

Navigating the pages of an online shop is akin to a shopper browsing through the aisles of a brick-and-mortar store.

Visitors will sometimes want to browse, and other times they’ll want to head straight to the item they came for; keep both of these shopper types in mind and make it easy for them to move within and between the pages of your Shopify store.

Here are a few additional and easy-to-implement tips:

  • Use a sticky header option for your top bar, if you theme offers it; this keeps the main navigation menu locked in place at the top of the page even as the user scrolls down, so they always have access to your shop’s "directory"
  • Make links obvious (choose a color that stands out or style them with underlines, or other design accents) and use them often to provide the shopper with related info; this encourages exploration and discoverability in your shop
  • Make menu links finger-friendly on mobile: make sure the font size used for your shop’s navigation menu is big enough, and that the links are spaced far enough apart on mobile, so that they’re easy to tap accurately on small screens
Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.

1 Response

robert obrien
robert obrien

July 26, 2016

Reading this gave me new ideas on how to sort products and improve my navigation. I forgot that tags can be used. A long time ago tags were important for other purposes in shopify and they became less important with improved search. Now, for me at least, tags have a new renewed interest and use.
Thanks for the article.

Also in Shopify Theme Blog

This is big: Our Shopify theme updater app just got a must-have feature
This is big: Our Shopify theme updater app just got a must-have feature

by Michael P. Hill April 19, 2017 0 Comments

Updating Shopify themes has long been one of the most frustrating parts of running a Shopify store — and Out of the Sandbox took a giant step in making this easier with our free Shopify theme updater app. But guess what? We’ve taken this another step farther.
Read More
Parallax 3.2.0 Shopify theme update adds refined design, new features
Parallax 3.2.0 Shopify theme update adds refined design, new features

by Michael P. Hill April 11, 2017 0 Comments

Out of the Sandbox’s popular Shopify theme , Parallax, has now been upgraded to version 3.2.0! This latest release contains some key new features that make this dynamic theme even more flexible, and which will improve both the design and functionality of your Shopify store.
Read More
Section by section: 13 ways to use the rich text and image and page sections
Section by section: 13 ways to use the rich text and image and page sections

by Michael P. Hill April 04, 2017 0 Comments

Although all of the previous Shopify sections  we’ve covered in this series have specific layouts, there are two section types that are much more wide ranging and flexible — the rich text and image section and the page section. Find out how to use these two section types in a variety of ways.
Read More
News & Updates

Sign up to get the latest on sales, new releases and more …