It’s no surprise, we love Shopify. Sometimes though we feel the need to jazz it-up and make adjustments to Shopify to better suit our, and our clients’, needs. In Shopify a Collection is any group of products chosen by you, that typically will all have something in common, which make the shopping experience easier for customers. For example, a customer might search for a collection of products that would fall under the category as, “items on sale”. To learn a little more about collections check out this Shopify resource. To learn more about improving collections, just keep reading.
Related: [Mini Tutorial] Uploading Shopify Assets
Shopify Collections
Shopify collections are flat: like the desert; like expressions on the faces of the most mundane; like crushed dreams…Okay, I’ll stop. But your store doesn’t need to be! So how do we squeeze some depth out of them? Tags, brah. In this tutorial, we are going to make subcategories, and list those subcategories in the sidebar of our collections page.
Estimated tutorial length: 17 years – j/k
Note: we’ll be using the Timber theme as a starting point.
Our Steps to Adding Subcategories
First of all, let’s create a link list for our Collection and its subcategories:
Step 1:
In your store admin, create a Collection with a bunch of products in it. If you need sample data in a pinch, try this nifty sample data generator written by my esteemed colleague.For the purposes of this example, let’s name our Collection “Shirts”.
Step 2:
Now, “navigate” your way over to “Navigation” (
) and create a link list. Name this link list the same name as your collection: “Shirts”. (Spoiler alert: matching the name will be important.)
(Note: be sure to add your tags by clicking the “filter with tags” link)
Step 3:
Add a link. Or a bunch of links. Name them whatever you want. Link them to the “Shirts” Collection, and filter them by tags. For reasons I don’t want to go into here, thereby unravelling the mysteries of the Internet*, use a space-separated naming convention for your tag names, ex: “tank tops, tube tops, ol’ fashioned waistcoats”. Also note: tag names should match the link names.
Step 4:
In the Collection Sidebar snippet ([theme root]/snippets/collection-sidebar.liquid), let’s be all cool and output the corresponding link-list for our collection:
Step 5:
Now I’m just going to go ahead and explain this code:
Lines 1 through 5:
The current_tags Liquid array is populated in the Collection page when the collection is currently being filtered by tags. We’re going to use this to later determine which filters to give “active” states (for styling).
Lines 8 through 16:
Here we display to the user which tags we are filtering by. If we aren’t filtering by any tags, then we’ll just output the collection name.
Lines 19 through 32:
This is where the magic happens: because our link-list handle matches our collection handle, we can call the link-list we want from our collection sidebar snippet! Now we just loop through it, and output the links. We give the links a “current” class if they are currently active, and we also add a “Clear Filter” link if there are any active filters!
Related: Mini Tutorial: 5 Tips for Better Shopify Theming
Le Result
Now, when a user visits a collection, they will see the appropriate subcategories in the sidebar. Each one links to the collection filtered by the subcategory. When a subcategory is clicked, it will be given an “active” state for styling. And best of all, this is all dynamic. So, it’s just going to work.
Happy coding 
* For you keeners out there that want to know why: the tags defined in link lists always get saved as space-separated terms, ie, if you save a dasherized tag (ex: “tank-tops”), it will be saved as a space-separated one (ex. “tank tops”). Resistance is futile.
Related: [Mini-Tutorial] Setting Up a Team Workflow for Shopify Theming
The post [Mini-Tutorial]
How to Add Subcategories in Shopify appeared first on Demac Media.
