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.

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.

Leave a comment

Comments will be approved before showing up.

Also in Shopify Theme Blog

Easy ways to break out of the mold with your Shopify theme
Easy ways to break out of the mold with your Shopify theme

by Michael P. Hill October 18, 2016

Using a pre-designed premium Shopify theme is a great way to get your online store and up running fast and affordably. But since there are likely many other shops using the same theme as you, how can you make your store look unique and stand out from the crowd?

Read More
Tips on adding and managing product reviews on your Shopify theme
Tips on adding and managing product reviews on your Shopify theme

by Michael P. Hill October 12, 2016

Adding product reviews to your Shopify theme is one the best ways to add a level of interactivity to your store that can also boost conversions and increase sales — but it’s a feature that’s not without challenges.
Read More
Under the hood: Why the Turbo Shopify theme is designed for speed
Under the hood: Why the Turbo Shopify theme is designed for speed

by Michael P. Hill October 05, 2016

Turbo, the newest premium Shopify theme from Out of the Sandbox, comes packed with features that make it one of the fastest Shopify themes around — but many of the features that give Turbo its vim and vigor are actually behind the scenes.
Read More
Stay on top of OOTS news!

Subscribe to our mailing list to be notified of theme updates, new releases and more.