Creating subcategories of products

Reminder

This is an unsupported customization. Learn more here ›

You can use product tags to create subcategories of products in Shopify. The navigation link to a subcategory has the format:

/collections/collection-handle/product-tag-handle

To create and display subcategories for your products, you need to:

    In this article:

  1. Define your categories and subcategories
  2. Display your subcategories on your storefront
  3. Prevent visitors from choosing more than one product tag in a search

Define your categories and subcategories

The example for this customization creates subcategories for two main categories of product (Women and Men.) Each main category will contain the following subcategories:

  • tops
  • pants
  • shoes
  • accessories.

To define your categories and subcategories:

  1. Create smart or custom collections for all your main categories (Women and Men in our example.)

  2. Go to each individual product page and add a product tag corresponding to the subcategory to which the product belongs. For example, you could give all your tops the tag tops, all your dresses the tag dresses, all accessories the tag accessories, and so on.

When you've defined your categories and subcategories, you need to decide how you want to display them.

Display your subcategories on your storefront

When you've defined your categories and subcategories, you can display them on your website in several different ways. The most popular include:

When you've configured the display you'll also need to prevent customers from choosing 2 subcategories at once.

Not all themes support drop-down menus. Look here to see if your theme supports them.

If your theme supports drop-down menus:

  1. From your shop admin, click the Navigation tab to go to your Link lists

    #

  2. Find the Main Menu link list and click Edit Link list.

    #

  3. Add links to your main categories of products, that is, links to your collections (for our example, Men and Women). Our Main Menu will look like this:

    #

  4. Return to the Links page and Add link list first for Men, then Women. Name the link list after the category name (the parent link) so that both match. Then, populate those link lists with links to filtered collections. Using our same old example, the Women link list will look like this:

    #

  5. Click Save.

  6. Take a look at your drop-down menu on the Collections page of your store.

    #


Clickable buttons

Information

If you want only one product tag to be clickable, follow this tutorial: I want only one product tag to be selectable

  1. From your shop admin, go to the Themes page.

    #

  2. Click on the Template Editor.

    #

  3. Under the Templates folder, locate and click the collection.liquid file to open it in the online code editor.

    #

  4. Use CMD-F (MAC) or CTRL-F (Windows) to find your collection description. Below your collection description — or above it, if you wish — paste the code below, and click Save:

<ul class="subnav clearfix">
  <li{% unless current_tags %} class="active"{% endunless %}>
    {% if collection.handle %}
    {% comment %}Good for /collections/all collection and regular collections{% endcomment %}
    <a href="/collections/{{ collection.handle }}">All</a>
    {% comment %}Good for automatic type collections{% endcomment %}
    {% elsif collection.products.first.type == collection.title %}
    <a href="{{ collection.title | url_for_type }}">All</a>
    {% comment %}Good for automatic vendor collections{% endcomment %}
    {% elsif collection.products.first.vendor == collection.title %}
    <a href="{{ collection.title | url_for_vendor }}">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>
/* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */ 
.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>

Take a look at your clickable buttons on your collection page.

#

Use a select element as a submenu

  1. From your shop admin, go to the Themes page.

    #

  2. Click on the Template Editor.

    #

  3. Under the Templates folder, locate and click the collection.liquid file to open it in the online code editor.

    #

  4. Use CMD-F (MAC) or CTRL-F (Windows) to find your collection description. Below your collection description — or above it, as you wish — paste one of the two code snippets below, and click Save:

<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 */
  /* Brought to you by Caroline Schnapp */
  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>

Take a look at your clickable buttons on your collection page.

#

Prevent visitors from choosing more than one product tag in a search

Sometimes, a customer will filter a collection by picking two or more product tags. If you don't have product variants that are listed under both tags, the filter will come up empty.

You will need to make a very small edit to your Shopify Theme to prevent this.

  1. From your shop admin, go to the Themes page.
  2. Click on the Template Editor button.

    #

  3. Under the Templates folder, locate and click on the collection.liquid to open it in the online code editor.

  4. In the online code editor, use CTRL-F on Windows or CMD-F on Mac to find this piece of code:

{{ tag | link_to_add_tag: tag }}

Remove the underscore add part so that the code becomes:

{{ tag | link_to_tag: tag }}

Save your template.

Ready to put what you've learned into action?

Build an online store with Shopify Try it Free

Experience the future of retail now

Shopify Point of Sale Try it Free