People love putting things into groups. Biggest to smallest, fastest to slowest, cheapest to priciest—these are the buckets we instinctively sort the world into so we can better understand it. In fact, psychologists have found that when we struggle to categorize something, we actually like it less.
None of this is breaking news—but what is new is that it just got a whole lot easier to tap into the power of categories in your online store. That’s because Shopify has once again revamped its menu editing interface, which now allows merchants to create nested menus up to three levels deep.
What does nested navigation mean for you?
Perhaps most significantly, you’ll no longer need to follow the old and “not very obvious” method of creating drop-down menus in your Shopify admin. Now, instead of creating a whole bunch of identically-named menus and populating each link list individually, you can view and arrange all menus and categories at once.
You can even rearrange menu items by dragging and dropping them into the desired hierarchy, like so:
Besides being way prettier and easier to use than the old interface, the update has some other significant advantages for anyone looking to improve their site navigation—without any coding required.
All themes now support drop-down menus up to three levels deep.
While this was true of most of our Pixel Union Shopify themes prior to the update, we can now confidently say that all ten of our Shopify themes handle nested navigation with style. Here’s what our best-selling Atlantic theme looks like with mega navigation enabled:
And our large-catalog Pacific theme with the left-hand navigation enabled:
It even works on mobile, where users can tap through menus to drill down to the lower-level products and pages they’re looking for. Here’s Handy:
While you can effectively make any menu a nested menu in the Shopify admin, there are limits to the number of levels or subcategories that will display in certain areas of your storefront. The top-level navigation (the main menu typically located in the header) will support three tiers no matter what. A collection sidebar may only support two. Footer menus don’t support nested navigation—at least not yet.
It’s a lot easier to set up and customize mega menus.
We used to field a lot of questions from merchants confused about configuring mega menus (expandable menus that display a large number of options in a single drop-down layout). There were triggers and parent links and menu blocks—suffice to say that, like Shopify’s menu editing interface, it was way more complicated than it needed to be.
Now, if you want to add a mega menu, you only need to create a drop-down menu in which each second-tier item has at least one third-tier item. Like so:
Our themes that support mega menus (that’s Empire, Handy, Grid, Atlantic, Pacific, Startup, and Editions, for those of you keeping track at home) will automatically convert the basic drop-down display to a mega menu. Some of them —like Grid— even have extra customization options that allow you to add collection images to your mega menus. Nice, right?
You can create multiple mega menus.
Once merchants finally figured out how to configure their mega menus using the old theme editor method, their next question was often: How do I create more of them?
Until now, we had to let them down gently—due to both platform and theme restrictions, we could only support one mega menu at a time. But Shopify’s new interface blows things wide open. Now, the only limit to the number of mega menus you can create and display is your own creativity (and maybe the width of your screen).
This is especially great for large-catalog merchants wanting to accommodate a large number of options without creating outright visual chaos.
A store like REI (which has thousands of products ranging from tents to paddle boards to yoga pants) would be hard-pressed to cram all its product categories into a single menu, no matter how mega. Instead, they use multiple mega menus, first categorizing products by activity and then by product type.
With nested navigation, you can model your store’s navigation after REI’s, creating different menus for different literary genres or rooms or cuisines. Foreseeably, one of the most popular uses of multiple mega menus will be the ability to create separate menus for men’s and women’s clothing—something we get asked about at least once a week!
A parting thought
We’re excited about Shopify’s new nested navigation and can’t wait to see how merchants use it to create bigger, better, more intuitive navigation for their stores.
That said, just because you can put more into your menus doesn’t necessarily mean you should. The paradox of choice applies here: it’s easy to overwhelm your users when you can include every category and tag under the sun.
Try to keep it simple, and remember the golden rule of UX design: it’s always best to test.