How to create sub-collection with link lists

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, change titles, or even add more sub-collections with a few clicks.

And in case you are looking for solutions to other elements in your store, this article might be an ideal one. We are always available whenever you need help.

Leave a Reply