Navigation is one of the most important parts of your Shopify theme — after all, without links and menus, shoppers can’t find their way around your store or locate all the great collections and products you offer.
Shopify has always included a built in navigation system, originally known as “link lists” but now called simply “navigation” — but the system has now been upgraded with a new feature called “nesting.”
Nesting is a fancy way of saying that navigation menus can now have three levels:
Non-nested navigation menus can still be used for other menus, such as those in the footer or blog sidebar or as way to set up advanced theme features such as sections or pages that display or link to the content contained in the menu — and it’s important to note that, depending on your Shopify theme, not all menu locations in your theme will support nesting.
One key point to be aware of is that Shopify has created a “backward-compatibility layer” that takes care of themes that haven’t been updated to support the new code structure required by nested navigation — though in some cases, once any part of any menu on your site is edited, it may need to be rebuilt.
This layer has been created and is run and maintained by Shopify, not theme developers, so if you run into any issues, it’s a good idea to start with Shopify Support for assistance.
One of the other key things to be aware of with nested navigation is that nested menus only support a total of three layers (what Shopify sometimes to refers to as sub-sub links).
Put another way, Shopify nested navigation can only support two levels under the main navigation link.
While this limitation may cause issues in some cases, it’s important to remember that it’s easy to get carried away with multi-level menus.
In general, while dropdown and flyout navigation menus are a great way to let shoppers “drill down” and find the exact collection or product they are looking for, overusing them can actually create a navigation setup that is hard to use:
To use the new nested navigation feature, go under Sales Channels > Online Store > Navigation (or click here) and then select one of the menus or create a new one.
Stores with the nested navigation feature enabled will see this screen to build a menu:
Stores that do not have the feature set up will see the same interface but a warning message will appear in a yellow box.
If you need assistance enabling nested navigation or aren’t sure why it’s not set up, contact Shopify Support.
Creating navigation menus in the new system is relatively straightforward — with the exception of how to create a sub-sub link.
To do this, you first need to create the link as a sub link. Once that’s been done, click and hold your mouse button down on the six small dots on the left side of the box containing the link you want to make a sub-sub link. Then, drag it under and slightly to the right of the link you’d like to be its parent.
You’ll notice that the purple line and dot, instead of stretching all the way across the box, becomes “indented” slightly on the left side.
This same drag-and-drop interface is also used to rearrange links — but it’s important to note that, to make a link element nested, you typically need to drag your mouse slightly to the right.
This new interface also features:
All Out of the Sandbox themes have been upgraded to natively support the new nested navigation feature as of the version released Jan. 9, 2018.
While Turbo does support the feature, an upcoming update will add additional support for the feature.
However, as mentioned, Shopify also has developed a way to make older versions “backward compatible” on older versions of themes, so your menus should continue to work.
While menus created under the old system should continue to work, Shopify is warning that, once you open a menu to make changes to it, you will need to rebuild the entire menu structure.
You will, however, see the new menu management system the first time you go under Sales Channels > Online Store > Navigation after upgrading and publishing the newest version of your Shopify theme. Don’t forget that the easiest and best way to upgrade your theme is with our exclusive Theme Updater App.
One of the (many) great benefits of using an Out of the Sandbox theme is that you get unlimited access to our extensive Shopify theme support center. Out of the Sandbox made a significant update to its support center in 2017, migrating to a more advanced, reliable system.