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.