How To Add Sub Collections In Shopify

It isn’t as easy to create a sub collection in Shopify as just making one. However, it is possible. What you need to do is to add tags to your Shopify products and then allow your products to be filtered out based on what tags the customer wants.

To do this, you will need to follow the steps below.

First thing you need to do is to login to your Shopify store, using your credentials.

Then go to your products page and check that every product has tags. Products can have numerous tags, and therefore, products can be in numerous sub collections.

Many themes have the option to enable a drop-down menu to filter collections based on the product tag. But you need to check that the theme you’re using has this setting. To do this, go to your ‘Online Store’ and then ‘Themes’ before finding the theme editor and navigating to the collection page in the theme preview.

When viewing the collection page, you should see the ‘Collection Pages’ tab in the theme editor. Click on the ‘Collections page’. If your theme includes the option to enable filtering by tag, then there will be an option that reads something like ‘Enable Filtering By Tag’ and a checkbox next to it. Check the box and then click on ‘Save’. This should enable the filtering and create sub collections for your store.

Not every theme has this option. If this is the case, then you need to add some code to your theme files to add this option. To do this go to your theme that you want to edit in the ‘Themes’ option on your Shopify store admin page.

Then click on ‘Actions’ and then ‘Edit Code’

Find the templates directory and click on the collection.liquid file.

In the location where you would like to add the drop-down menu to appear on the collection page, add the following code.

      <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 */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + 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>

Save your work when you’re complete.