Multi-Level Shopify Sub-Menus

Recently I worked on a Shopify site (moderno theme) that required a multi-level navigation system for their extensive product inventory. Here are the steps:

1. Find a good menu-ing system

Dynamic Drive, Dev Snippets and CSS Play are good places to look. This is the fun part, but be careful as you can spend many hours wading through the plethora of options.

For this project, I went with cssMenus (a variant of the infamous and totally awesome Suckerfish menus). My main criteria for choosing the menu implementation were:

• CSS based
• SEO friendly
• Supports for nested menus at least 4 levels deep
• Easy to understand and implement

2. Integrate cssMenus into Shopify

This is straight-forward. First, upload the CSS and Javascript files to your theme (Admin > Assets > Theme Assets).

Now, add the following liquid code in the head section of theme.liquid:

{{ 'nav-vr.css' | asset_url | stylesheet_tag }}
{{ 'nav-vr.js' | asset_url | script_tag }}

Finally, set up your menu structure using standard <ul> and <li> HTML tags in collection.liquid. Here is an excerpt :

<ul id="navmenu-v">
 <li><a href="/collections/all">ALL PRODUCTS</a></li>
 <li><a href="/collections/dexterity">DEXTERITY</a>
 <ul>
 <li><a href="/collections/dexterity-usa">USA</a>
 <ul>
 <li><a href="/collections/dexterity-usa-colmor">Colmor</a></li>
 <li><a href="/collections/dexterity-usa-gilbert">Gilbert</a></li>
 </ul>
 </li>
 </ul>
 </li>
</ul>

I placed this code inside the "collection-desc" <div>.

3. Creating Collections for each menu item

You will notice in the excerpt above that each menu item is associated with a collection.

I created collections for parent items as well, so that users can click on "USA" to see products across the child menus "Colmor" and "Gilbert". The naming convention I used means the names can be used as a breadcrumb.

The final step is to associate each product with the relevant collections. You do this on the product page - just check off the appropriate collections (listed on the right hand side of the page).

Summing up

Creating this navigation system for Shopify took about 2 hours. A lot of that time was spent coding up the list of menu items as there were a lot! For more information or help with this technique, please feel free to contact at Shopify Concierge.

Comments

[TC]

That is a decent solution. A better one would be for the shopify team to simply program in the ability to create sub collections that can be associated with a top level collection.

[Enrique]

The styling doesn't show up for me. Why is that?

[BBG]

@Enrique what is your shop address? If the styling isn't showing up it is probably because the stylesheet isn't loading.

[Tatiana]

Hello Gavin! Greetings from sunny Madrid. We are trying to create subcategories in our upcoming Shopify store, but we can't manage to see the styling properly. Are you interested in doing a free-lance job for us and fix this solution within our shop? Thanx in advance! Tatiana PS: the password for the hidden frontstore of our shop is g0rge0us

[Gavin]

@Tatiana, There is now a tutorial on the Shopify wiki that does a better job of explaining this than my post, but if you would still like me to help I'd be happy to - please visit ShopifyConcierge. Thanks, Gavin.

[Teddy]

Hi I've been reading how to add the sub-menus and its a bit more complex then I thought it would be. if you have some time is it possible I could chat with you to help break this down?

[Gavin]

@Teddy, yes please feel free to contact me via Shopify Concierge: http://www.shopifyconcierge.com.