How to Create Sub Collections on Shopify?

Oct 31, 2022

Shopify is one of the most popular platforms for creating online stores as well as websites. Most people love Shopify, but sometimes we need to tailor the platform to our needs and needs.

A significant need is to create Shopify sub-collections, They are used to organize the site structure in such a way that child collections are nested into parent collections. These child collections are called sub-collections.

In this article, we focus on achieving the above and look at several ways to create Shopify sub-collections.

Let's explore with us now!

What is Shopify sub-collections?

Subcategories of parent categories or collections are called sub-collections. They aid online users in selecting their preferred products through filtering. Most Shopify themes allow for the addition of sub-collections because doing so enables customers to quickly find the relevant item.

Shopify's sub-collections are often referred to as categories. It plays an important role in online purchases. While you can divide things into various categories, customers may want to be more specific if you have a large inventory.

For example, they might be looking for a man's shirt for a child under five.

In a nutshell, Shopify Sub collections are the features that differentiate your Shopify store from others. They allow you to further develop your products, giving your customers a more guided shopping journey. They are used to organize the structure of the site, so that child collections are nested into parent collections. These are Sub-collections.

Shopify sub-collections advantages

Greater Navigational Experience

Shopify sub-collections are a great method to highlight what your store has to offer and make it simpler for visitors to browse your site.

One of the most crucial factors in determining whether someone would buy your product or service is the user experience, which is an essential part of any purchase.

Higher cross-sell rates for Shopify sub-collections

They might also help you position your goods effectively to boost sales.

Additionally, you can create gift bundles for any occasion or season using Shopify sub-collections, giving your customers helpful suggestions and enabling you to evaluate which product combinations are most successful.

In addition, a business owner may use Shopify sub-collections to create gift bundles for each occasion or season, giving your customers helpful recommendations while also enabling you to test which product combinations are most successful.

A collection list page is what this is known as.

With these cutting-edge methods for integrating Shopify sub-collections into your shopping experience, you can increase cross-selling opportunities while assisting your customers in discovering things they might not have known they needed.

Enhanced SEO

Additionally, if your sub-collection is correctly organized, it might even aid improve your SEO.

Sub-collection Shopify in Shopify uses a URL structure known as a physical silo to create a natural hierarchy tree on your website.

Google can easily crawl your website and gain a better understanding of your company because of the physical silo.

This suggests that Google is more inclined to trust your website and app when trying to match it with relevant searches, and that your pages are more likely to rank higher in the search results and receive more clicks.

How to Create Sub Collections on Shopify?

Shopify sub-collections creation is more challenging than main collection creation. But it is feasible. Your Shopify products must have tags added in order to allow customers to filter products based on those tags.

Step 1: Create sub-collections

Start by entering your login information into your Shopify account.

I start by making a collection that serves my objective.

Create a collection from the “Shopify admin > Products > Collections” page.

Give it a mind-blowing description and enter the title of your collection (if you want to).

In this instance, I made the Dress: sub-collection.

shopify-sub-collections-1

Add more items to your new collection after that.

Do not neglect to click Save.

I'll add 2 additional sub-collection titles for shoes and shirts.

Step 2: Create a parent collection

This serves as a parent collection for the three sub-collections I mentioned above. The parent collection is titled Women's Clothing.

shopify-sub-collections-2

The Women Clothing collection has to be added to the main menu as the next step.

Go to Online Store > Navigation > Add menu to accomplish this.

shopify-sub-collections-3

You now give your new menu a name. I'll refer to it in this instance as Collection Women Clothing.

Keep in mind that the title of the new menu must adhere to this structure: A collection + [the name of the parent collection]

This format must be used because the code relies on the navigation's handle to function properly.

Return to your Navigation > Main menu > Add menu item.

shopify-sub-collections-4

Give it a name, then connect it to the women clothing sub-collection you already made.

shopify-sub-collections-5

Step 3: Update collection template

In Shopify, you must now edit the collection template in order to establish sub-collections.

Return to your online store, select Themes, then click Actions, then Edit Code.

After that, incorporate the following code into the group.

Liquid document located 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 %}


This is the precise spot where the code has to be added:

shopify-sub-collections-6

Step 4: Add style for sub-collections

Locate theme.scss.liquid in the Assets' directory using the search bar, and then add the following code at the end of the file:

shopify-sub-collections-7

Here is the code you need:

.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;
  }
} 

Check your store now to discover the outcome.

What I get is this:

shopify-sub-collections-8

Conclusion

It can be trickier than you think to add Shopify sub collections to Shopify. But you may help yourself by following the procedures listed above.

But you may help yourself by following the procedures listed above. Get in touch with our Shopify development services right away if you don't know how to do it and don't want to perform any coding!

Alice Pham

Writer and Blogger about Technology and Marketing. I also share my knowledge of Shopify, WordPress, and WooCommerce. Contact me on Twitter @thuyphuong082/ Linkedin Alice Pham

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.