Shopify uses collections and tags to help merchants organize and filter their products. Collections are great for gathering similar products into their own buckets or groups. Tags on the other hand are used to narrow down that group of products even further using key terms.
Simple collections
We'll use bike parts as an example for collections and tags. Say your store carries a range of tires, you could create a collection called "Tires" to hold all of those products. Users of your site could navigate to the tires collection and see your options. You can then use tags to find the specific types of tires you might be looking for. A user may be looking specifically for 20" BMX tires, you could tag your products with their sizes so the user can filter out what they don't want to see.
Case for nested collections
Collections have tons of powerful options for grouping products based on rules, but some larger product catalogues benefit from having more than just one layer of grouping. Sure if you only want to separate "bike tires" from "bike helmets" or "dog food" from "cat food", then Shopify's default collections are all you need. This is by no means a limitation of the platform, it is simply designed this way on purpose, but that doesn't mean there aren't ways to extend this functionality.
Thinking about bike parts again, what if you wanted to have multiple layers of product grouping? Say you wanted all the bike parts that go into the wheels on a bike: tires, rims, and tubes. You might want users to come to this general "Wheels and Tires" collection where they'll see these related but different kinds of products. The user will get a sense of your full range of products that might help them before they narrow down to a lower level, a more specific collection that only has one product type like tires, rims, or tubes. Once the user is in the second level collection they can then use tag filters just like before to see only what they want to see.
Nested collection steps
- General "Wheels and Tires" collection that holds multiple different but related product types.
- Narrow down to a second level of more specific collections, like tires, rims, or tubes.
- Use tags, like "size" or "shape", to filter down further in the second level collection.
How to create collection hierarchies in Shopify
It really doesn't take much code to get nested collections to work, the trickiest part is wrapping your head around how to organize your products and collections to make it work.
Note: This is not something you can just copy and paste into any other theme, you will need to know the specifics of your store and how the theme you are using works. We only recommend doing this if you are the theme developer.
Here's what we'll be building, notice how the navigation links update as the collections change.
Creating the collections
We're going to start making a collection called "Wheels and Tires", this will be the higher level general collection that holds the three different types of products together. We'll give the collection a few conditions to include the different types of products we want.
Next we'll create each of the lower level, more specific collections to hold each individual product type. We'll need one for product type: "tires", "wheels", and "tubes".
This is one of the many areas where Shopify shines, organizing products is made so easy with powerful yet intuitive tools. All the pages users will want to visit are now created, we just need a way to put them together in the right order.
Linking the collections together
There are two directions we can take here, a simple way with limited functionality, and a more complicated way that allows for users to navigate up and down the nesting of collections. We'll start simple.
The trick to creating the hierarchy is using navigation menus to act like structured data. In liquid we have access to the linklist object; with this we can target link lists based on their handle. This is the same technique you used to have to use for creating nested drop down menus in Shopify.
We need to make a navigation menu list for every collection that has child collections. So we'll make a "Wheels and Tires" menu; note the handle of the menu must match the handle of the collection. In this collection we'll link to each child collection, "Tires", "Wheels", and "Tubes".
Now that we have our navigation links we'll want to display them in the collection template, but we don't want them to show up in every collection. A collection containing helmets isn't related to our child collections, so we don't want to show the links here.
First we assign a variable that finds the links in a linklist object based on the collection handle, linklists[collection.handle].links. This is why we had to create a navigation menu with the same handle as the collection we want it to belong to. We then check to make sure there are links in that collection before looping over them and printing each one out in a list, a pretty common practice for most navigation menus.
{%- assign child_collection_links = linklists[collection.handle].links -%}
{%- if child_collection_links != blank -%}
<nav>
<ul>
{%- for link in child_collection_links -%}
<li>
<a href="{{ link.url}}">{{ link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
</nav>
{%- endif -%}
This code will need to be customized and styled based on your theme. You'll want to know how your templates and layout work so you can get this list where you want it to appear.
Now you can see the links to the child collections here under the header "Children".
Now that we have this tested and working we can dive even deeper by making child collections for each of our existing child collections. For example we could break the tires out into individual collections for each brand, "Continental Tires", "Kenda Tires", and "Thickslick Tires". Then repeat the process of creating a navigation menu linking to these collections with the handle "tires" so it will appear on the tires collection page.
This works great for diving deep into filtering, but once a user gets to one of the child pages they have no way of navigating back up. To achieve this we'll need to write a bit more logic into the theme.
Extending the nesting
In the next part of this post we'll go over how to take nesting to the next level by allowing users to navigate down and up the different levels. Read Nested Collections in Shopify Part 2 here.