How to create sub-collections in Shopify with link lists
This blog post has been updated
Feb 23, 2018
Shopify has since rolled out their easy-to-use multi-level dropdown system. This article was written before this was available, thus much of the content here can be created much simpler using our Meteor Menu app for setting up Shopify sub-collection menus.
What’s the best way to do Shopify sub-collections?
If you’ve used Shopify for any amount of time, you’ll realize that it doesn’t support creating nested categories for all your products. Truthfully, if you have a million products and collections this might not be the best option for you. This method works great if you have less than a few hundered collections.
Use link lists to create your collection tree.
We’ll create a very simple tree:
Food
- Breakfast
- Cereal
- etc...
- Lunch
- Sandwich
- etc...
- Dinner
- Fish
- etc...
The principle is pretty simple - create all your collections then create the hierarchy with a navigation link list. So, create a new collection and take note of the collection handle. This will act as a “parent collection”.
Then, create all your sub-collections as standard Shopify collections however you want. Nothing special about them, just standard collections, and you can choose to manually add products or by criteria. Now head over to the navigation page in Shopify and create a new link list. Name it something relevant and give it a handle that corresponds to the parent collection. Prepend the handle with a “collection-“ so that you don’t deal with namespaces in the future. In this case our navigation handle is: “collection-food”.
Add all your sub-collections to the list. You can name and reorder them however you like.
Update your theme to show your sub-collections
Add a new file in your templates folder and name it “collection.sub-collections.liquid”.
templates > collection.sub-collections.liquid
{{ collection.title }}
{% assign collection_handle = "collection-" | append: collection.handle %}
<ul>
{% for link in linklists[collection_handle].links %}
{% assign sub_collection = link.object %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
</ul>
This is obviously a very basic pattern, but it gets you started. Basically, we’re just looping through the link list and printing out each collection as a link. You could take this a step further and get that collection’s image, description, or products. Take a look at the Shopify Docs for more details.
Now head into your Shopify admin and set the collection template to collection.sub-collections. Open that collection and you should see a breakdown of your sub-collections.
Food
- Breakfast
- Lunch
- Dinner
Why this is a good solution
The best reason, it’s really simple. It’s easy to setup and managing, you can reorder sub-collections, change titles, and add more sub-collections with a click. It also comes with the benefit that when Shopify adds sub-collections as a feature, you’ll be ready to rock, since you already have your collections all built and organized. Questions? Email me at hello@heliumdev.com
Find this helpful? You might also like our apps:
- Customer Fields allows you to build custom registration forms and retrieve valuable data from customers at just the right time.
- Meteor Mega Menu offers a variety of beautiful dropdown menu templates which you can attach to your exisiting Shopify navigation, meaning your store could have a menu makeover in minutes.