If you have used Shopify for a while, you’ll realize that Shopify doesn’t support creating sub-collections for all your products. In other words, Shopify considers collections as equal, there’s no parent or child collection. I’m sure many of you here wonder how to make sub-collections in Shopify.
Indeed, if your store has 1 million products, classifying collections would be a nightmare for you. But if you have less than a few hundred collections, link lists would work for you. By doing this, you can organize your products in 2 or more levels of product categories.
In today’s post, I’ll guide you on how to create sub-collections in Shopify through link lists.
Create sub-collections in Shopify
Adding sub-collections in Shopify isn’t so hard. Think about a very simple tree:
Women clothing
- Dress
- Long dress
- Skirt
- Camisole
- Etc…
- Shirt
- Tank
- Long sleeve blouse
- Slim fit
- etc...
- Shoes
- Heels
- Orange loafer
- Blue loafer
- Etc…
The principle is simple: create all the collections then create the hierarchy with a navigation link list. In this case, I will create 3 sub-collections: Dress, Shirt, and Shoes. Then, “Women clothing” will act as a parent collection.
Step 1: Create sub-collections
First of all, I create a collection according to my purpose.
From the Shopify admin > Products > Collections > Create collection
Type in your Collection title and give it a mind-blowing description (if you want to).
In this case, I created a sub-collection named Dress:
Then, add products to your new collection.
Don’t forget to hit Save.
I will create 2 more sub-collections under names: Shoes, and Shirt.
Step 2: Create a parent collection
The purpose of this is to have a parent collection that includes the 3 sub-collections I created above. I named the parent collection as Women Clothing.
The next step, we need to bring the Women Clothing collection to the main menu.
To do this, go to Online Store > Navigation > Add menu.
Now, you name your new menu. In this case, I name it as Collection Women Clothing.
Notice: the new menu’s title needs to follow this format:
Collection + [name of parent collection]
We need to follow this format as the code use navigation’s handle to run smoothly.
Next, back to your Navigation > Main menu > Add menu item.
Give it a name, and link it to Women Clothing sub-collection you created before.
Step 3: Update collection template
To create sub-collections in Shopify, now you need to update the collection template.
Go back to your Online store > Themes > Actions > Edit code.
Then, add the code below to the collection.liquid file in the Templates directory:
{%- assign collection_handle = collection.handle -%}
{%- assign subs = linklists[collection_handle].links -%}
{% if subs != blank %}
<div class="collection-subs">
<div class="container">
<div class="row">
{% for sub in subs %}
{% assign subitem_handle = sub.title | handle %}
<div class="col-md-3 col-xs-12">
<div class="sub-collection_item">
<div class="sub-collection_title">
<a href="{{ collections[subitem_handle].url }}">{{ collections[subitem_handle].title }}</a>
</div>
{% if collections[subitem_handle].image %}
<div class="image-custom" style="padding-top: 128%;">
<img class="img-fluid image-responsive" src="{{ collections[subitem_handle].image | img_url: 'master' }}" alt="Sub image">
</div>
{% else %}
<div class="image-custom" style="padding-top: 128%;">
{{ 'collection-1' | placeholder_svg_tag }}
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
Here is the exact place you need to add the code:
Step 4: Add style for sub-collections
In the search box, find theme.scss.liquid file in the Assets directory, then add the following code at the end of the file:
Below is the code for you:
.container {
max-width: 1200px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.col-md-3 {
padding-right: 15px;
padding-left: 15px;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-md-4 {
padding-right: 15px;
padding-left: 15px;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
}
.sub-collection_item {
position: relative;
margin-bottom: 20px;
.sub-collection_title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(#fff, 0.8);
min-width: 209px;
max-width: 409px;
text-align: center;
padding: 25px;
cursor: pointer;
z-index: 1;
transition: all 0.35s ease;
a {
color: rgb(57, 78, 103);
font-size: 18px;
line-height: 19px;
font-weight: 400;
letter-spacing: 0.4px;
text-transform: uppercase;
}
&:hover {
background: rgba(#30AAEC, 0.8);
a {
color: #fff;
}
}
}
}
.image-custom {
position: relative;
img, svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background: #fff;
transition-property: opacity;
object-fit: cover;
}
} Now, check your store to see the result.
Here is what I get:
Why this is a good solution
Obviously, you don’t have to install an application, just do some simple tweaks instead. It means your site speed won’t be affected. You can find Shopify sub-collections apps on the Shopify app store, both free and paid, but who knows if they affect your store or not?
I’m sure your question on how to make sub-collections in Shopify is now well-answered. This solution is very simple, easy to execute and manage. You can re-order your sub-collections as you want, changes titles, or even add more sub-collections with a few clicks.
