How to add nested navigation to Shopify themes

[“In this article we will discuss how to implement a fully content managed multi-level navigation system within au00a0Shopify</a>u00a0theme.nnShopify themes useu00a0Liquid</a>, a flexible and powerful template language, to output data from a store into a template. If you aren’t familiar with Liquid, and Shopify theme building in general then I recommend checking out the officialu00a0Shopify theme documentation</a>.nn

Getting started</h1>nnIf you have ever worked with platforms like WordPress you might be familiar with admin interfaces that allow you to create multi level navigation. When output in a template file these often result in a nested unordered list which, using CSS, we can style into a variety of design patterns. For example a drop down menu or a sidebar menu that reveals more detailed filtering when the top level menus are clicked or hovered over. All approaches give us the ability to offer deeper navigation into our sites without too much complication.nnnnOn first inspecting the navigation function in Shopify you might think that it doesn’t offer us this capability. However armed with a little Liquid knowledge we can take easily achieve multi-level menus in our themes. By using the navigation functionality we can offer our clients an easy way to manage their menus whilst giving us, as theme designers, the desired nested unordered lists for CSS styling.nnOur aim in this tutorial is to create a nested unordered list which we can fully control from within the Shopify admin area and for these changes to be reflected in our store.nnAnd here’s the end result:nn

<ul>n<li><a href="/">Home</a></li>n<li><a href="/collections/cups">Coffee Cups</a>n<ul>n<li><a href="/products/edible-coffee-cup">Edible Coffee Cup</a></li>n<li><a href="/products/moustache-mug">Moustache Mug</a></li>n</ul>n</li>n<li><a href="/collections/all">All Products</a></li>n<li><a href="/pages/about">About</a></li>n<li><a href="/blogs/news">Blog</a></li>n</ul></pre>nnUnlike other platforms Shopify doesn't have the option of having one "super menu" which we can nest our sub-menu items in. That said it's not a complicated procedure to get this working. By following a simple naming convention it's possible to generate multi level menu structures.nnIf you wish to code along with the tutorial the simplest way to do so is to sign up for a freeu00a0

Keir Whitaker

Keir Whitaker works at Shopify & co-hosts The Back to Front Show podcast. He regulary writes about, and shares links on, ecommerce, the web industry & podcasting.