How to Create Shopify Sub Collections (Collections Within Collections)

Shopify collections group products so customers can shop more quickly and easily.

Use them to select top products and give bestsellers or seasonal items a prominent place.

This improves conversions and brings more sales to the business.

Setting up Shopify subcollections can be difficult, especially when the guidance you find mainly promotes plugins or services. The steps below explain the process directly.

You can follow the setup yourself.

These simplified instructions cover Shopify subcollections and link lists for someone setting up their first store.

For the setup steps without the explanation of subcollections and their uses, click here.

For product tag filter instructions, click here.

Start below with what subcollections are and how they help a Shopify store.

Consider a Shopify store selling craft supplies.

You could make a collection for each main category, including knitting, crocheting and sewing.

Within those collections, use subcollections for products such as knitting needles, yarn and fabric.

You may also need to distinguish plastic knitting needles from metal ones.

Yarn comes in different colours too.

Continuing to nest subcollections soon makes the structure confusing.

Use product tags for these finer specifications instead of creating more nested subcollections.

The product tag steps follow later.

Collections vs. Categories vs. Subcollection vs. Subcategories

You may have seen Shopify subcollections and link lists described as “categories” and “sub categories”.

Those names mean the same as collections and subcollections in this context.

People who say Shopify categories often mean the collections feature described here, but use the wrong name.

Collections group the store’s products into categories. A link list is a different feature.

Calling subcollections subcategories is technically accurate, but mixing the terms can confuse readers.

What Are The Benefits Of Sub Collections?

1. Better Navigation Experience

Show customers what you sell and help them navigate the store with subcollections.

The shopping experience strongly influences whether someone buys a product or service.

2. Higher Cross-Sell

The way you present products in subcollections can also increase sales.

Group separately sold products that together make a package, such as party supplies, sporting goods or cookware.

Curate gift packages for different occasions or seasons. These give customers ideas and let you test which combinations sell best.

This arrangement is a collection list page.

These uses of subcollections encourage cross-selling and help customers discover products they had not thought of buying.

3. Improved SEO

A well-organised subcollection tree can improve SEO as well.

Google has difficulty understanding a disorganised site. Shopify subcollection URLs give it a clearer structure for understanding what you sell, improving visibility in search.

Google can then match the site and app to relevant searches more confidently. Pages are more likely to rank higher and attract clicks.

Dedicated Sub Collections vs. Filtering Collections With Product Tags

Collections and subcollections organise products into broad categories.

Tags describe the finer categories and specifications of each product.

For example, a craft-supplies category might contain a knitting subcategory with a further yarn subcategory.

At that point, show the customer products instead of taking them through more subcollection pages.

A yarn shopper might need worsted-weight or bulky-weight yarn.

They may also need a particular TPI or colour.

Use product tags to identify these details.

Subcollections help shoppers who are still deciding. For someone seeking size-3 yellow yarn from Red Heart, tags provide a quick way to filter for that exact product.

Organised subcollection URLs and tag filters help customers find products whether they know exactly what they want or need to browse.

Some shoppers can describe what they need without knowing which category or filter to choose. Adding AI shopping assistants lets them ask in their own words and find relevant products from your catalogue.

Some Shopify themes do not support subcollections.

Every free Shopify theme supports them and includes free Shopify customer support. Results can differ with paid third-party themes.

Some themes from Out of the Sandbox include built-in subcollection pages, as shown here.

Ask the theme developer and read user reviews to check compatibility for your theme.

1. Create A Template For Sub Collection Pages

Login to Shopify admin, then open Online Store and Themes.

Open Actions in the centre pane and choose Edit code.

Choose Add a new template in the Templates folder.

Use the dropdown in the pop-up and name the template:

list-collections

A new entry appears in Templates with the label:

{/}list-collections.liquid

Open the entry to see a window containing a few lines of prefilled code.

2. Add Your Theme Code

Append a code block to that entry. The code you need depends on the store’s theme.

This example uses “Debut”. Find the code for your own theme on this Shopify support page.

Put the theme code after the existing code in list-collections.

Select Save.

3. Add Your New Subcollection Page

In the left navigation, choose Pages under Online Store.

Select Add page.

Give the subcollection a title.

That title becomes the subcollection’s name in the navigation menu.

Choose page.list-collection in the Template dropdown.

Select Save.

4. Add Subcollection To Your Navigation Menu

The new subcollection page is now live and ready to set up.

Add the page to the navigation bar’s link list so customers can find it.

Choose Navigation under Online Store on the left.

Select Add Menu.

Use the title from step three, then select Add menu item.

Enter your chosen subcollection title in Name.

Click the Link field and choose Collections from its menu instead of pasting a URL.

Choose any Collection page you have created. It becomes a child collection nested under the parent collection page.

Product tag filters, like subcollections, require changes in the Shopify theme settings.

Add product tags first using these steps.

1. Check Whether Your Theme Has Built-In Tag Filtering

Most themes have tag filtering settings; find them in Shopify admin as follows.

Open Online Store in the left navigation and select Themes.

Select Customize.

In the top dropdown, choose Collection Pages.

Select Collection Pages on the left as well.

A theme with built-in tag filtering has an Enable tag filtering checkbox.

Your theme may label it Enable filtering by tag or use similar wording.

If the checkbox is present, tick it and select Save to finish.

Without the checkbox, add product collection tags manually.

2. Manually Add Tag Dropdown Navigation Menus

Choose either dropdowns or radio buttons. Using both can cause errors, so I recommend choosing one.

Open Actions in the centre pane and choose Edit code.

Find this item in the Templates folder:

{/}collection.liquid

Insert the following code in the file:

<div class="clearfix filter">
  <p>Browse by tag:</p>
  <select class="coll-filter">
    <option value="">All</option>
    {% for tag in collection.all_tags %} {% if current_tags contains tag %}
    <option value="{{ tag | handle }}" selected>{{ tag }}</option>
    {% else %}
    <option value="{{ tag | handle }}">{{ tag }}</option>
    {% endif %} {% endfor %}
  </select>
</div>

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  const collFilters = document.querySelectorAll('.coll-filter');

  if (collFilters.length > 0) {
    collFilters.forEach((collFilter) => {
      collFilter.addEventListener('change', function(){
        var newTags = [];
        collFilters.forEach((collFilter) => {
          for(var i = 0; i <= collFilter.length-1; i++){
            if(collFilter[i].selected == true && collFilter[i].value != "") {
              newTags.push(collFilter[i].value);
            }
          }
        });

        if (newTags.length) {
          var query = newTags.join('+');
          window.location.href = '/collections/{{ collection.handle }}/' + query;
        }
        else {
          {% if collection.handle %}
          window.location.href = '/collections/{{ collection.handle }}';
          {% elsif collection.products.first.type == collection.title %}
          window.location.href = '{{ collection.title | url_for_type }}';
          {% elsif collection.products.first.vendor == collection.title %}
          window.location.href = '{{ collection.title | url_for_vendor }}';
          {% endif %}
        }
      });
    });
  }
</script>

The correct position depends on your collection setup. You may need to adjust it and try different positions.

Find the location in Shopify’s .liquid files that suits the collection.

3. Manually Create Tag Radio Buttons

Radio buttons take the same amount of work to create as dropdown menus.

Repeat the procedure from step 2 above, using this code in its place:

<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    <a href="/collections/{{ collection.handle }}{% if collection.sort_by %}?sort_by={{ collection.sort_by }}{% endif %}">All</a>
    {% elsif collection.current_type %}
    <a href="{{ collection.current_type | url_for_type | sort_by: collection.sort_by }}">All</a>
    {% elsif collection.current_vendor %}
    <a href="{{ collection.current_vendor | url_for_vendor | sort_by: collection.sort_by }}">All</a>
    {% endif %}
  </li>
  {% for tag in collection.all_tags %}
  {% if current_tags contains tag %}
  <li class="active">
    {{ tag | link_to_remove_tag: tag }}
  </li>
  {% else %}
  <li>
    {{ tag | link_to_tag: tag }}
  </li>
  {% endif %}
  {% endfor %}
</ul>
<style>
  .clearfix:before, .clearfix:after { content: ""; display: table; }
  .clearfix:after { clear: both; }
  .clearfix { zoom: 1; }
  /* Subnavigation styles */
  .subnav { clear: both; list-style-type: none; margin: 35px 0; padding: 0; }
  .subnav li { display: block; float: left; }
  .subnav li a {
    display: block;
    height: 28px;
    line-height: 28px;
    padding: 0 7px;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
    background: #eee;
    margin: 0 7px 7px 0;
    color: #666;
  }
  .subnav li a:hover, .subnav li.active a {
    background: #666;
    color: #fff;
  }
</style>

As with dropdowns, try different positions to find where the radio buttons work best.