BFCM FLASH SALE! 30% off Turbo with code BFCM30

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 Help or Technical Support?

Instead of posting support questions as a comment on this article, please visit our Help Center to browse frequently asked questions or submit a support request directly to our team.

Get Help & Support Now

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

BFCM Prep: Roundup of Black Friday and Cyber Monday tips and advice
BFCM Prep: Roundup of Black Friday and Cyber Monday tips and advice

by Michael P. Hill November 21, 2017 0 Comments

As Black Friday and Cyber Monday quickly approach, here's a quick look at a collection of great resources and ideas for your store during the busy holiday shopping season that you can use  — including quick and easy tips to drive your Shopify store to a BFCM win plus how to switch up your Shopify theme's look and feel.
Read More
BFCM Prep: 10+ 'Last minute' dos and don'ts to get ready for ecommerce's big days
BFCM Prep: 10+ 'Last minute' dos and don'ts to get ready for ecommerce's big days

by Michael P. Hill November 13, 2017 0 Comments

The number of days to Black Friday and Cyber Monday is growing smaller every day — and you might be looking for some last minute ideas for your Shopify store. Here's a quick "last minute" checklist of ideas that you can implement with just a little effort on your part.

Read More
Section By Section: 8 tips on using Turbo's new text columns with images section
Section By Section: 8 tips on using Turbo's new text columns with images section

by Michael P. Hill November 08, 2017 0 Comments

Along with a   new style preset, Chicago, and some other great new features, version 2.2 of the Turbo   Shopify theme  also introduced a new type of section: Text columns with images. This new section lets you use a mix of image and text content in a column layout.

Read More
News & Updates

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