fbpx
HIDE

How to create sub-collection with link lists

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on pinterest
create sub collections in Shopify

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:

create sub-collections in Shopify collection

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.

create sub-collections in Shopify link list

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.

create sub-collections in Shopify 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. 

create sub-collections in Shopify add menu

Next, back to your Navigation > Main menu > Add menu item.

create sub-collections in Shopify 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:

create sub-collections in Shopify add 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:

create sub-collections in Shopify add style

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.

Still have questions?
Hannah Pham

Hannah Pham

Hannah is Content Lead at HappyPoints. She finds writing, designing, and developing all sorts of great content is her true passion. Hannah is the Marketer by day and the reader by night. Meet her on Linkedin.

Amazing!

I will get back to you within a day.

Have a nice time!