How To Add Sub Collections In Shopify - Shopify Theme Detector
Spy on Your Competitors - Extended Free Trial!  GO!
How To Add Sub Collections In Shopify

How To Add Sub Collections In Shopify

Last modified: July 15, 2020

FAQ
Shopify Free Trial

Sub collections, or categories are an important part of online shopping. You can organize products into numerous categories, but when you have a large catalog, customers might want to be specific. For instance, they might be looking for a boy’s shirt for a child that is under five. This could be a sub collection.

By offering sub collections to your customers, you should be able to build on revenues and improve conversion rates. This is through better shopping experiences and making it quicker for customers to shop on your online store. At the same time, it can be better for management of your store. If you have sub collections, you can find it easier to make changes to products.

Keep Reading

* This button will show the rest of the post and open up an offer from Shopify

Creating A Sub Collection On Your Shopify Store

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.

Step 1 – Login To Your Shopify Store

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

Step 2 – Products

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.

Step 3 – Theme Settings

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.

Step 4 – Adding Code

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’

Step 5 – Templates

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

Step 6 – Adding The Code

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>

Step 7 – Save

Save your work when you’re complete.

Final Word: How To Add Sub Collections In Shopify

Adding sub collections can be more tricky on Shopify than you first might think. However, the steps above will help. If you’re unsure about how to do this, and would not like to touch any coding, then you could download this app. It will help you add sub collections without any coding.

Recap:
Got Something To Say?

Your email address will not be published. Required fields are marked *