Creating subcategories of products

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:

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.

If your theme supports drop-down menus

  1. Click Main Menu.

  2. In the Menu items area, click Add menu item.

  3. Create the top-level menu links by doing the following steps:

    1. In the Name field, enter the collection name. For example, "Men".
    2. From the corresponding Link list, select "Collection".
    3. In the list that appears, select the collection name. When you are done adding the top-level links, it should look like this:
    List of newly-created menu links, with
  4. Return to the Navigation page.

  5. Click Add menu.

  6. Name the menu after the category name (for example, "Tops" or "Pants") so that both match. Then, populate those menus with links to filtered collections. For example, the "Women" menu will look like this:

    List of category menu links for the
  7. Click Save.

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

    Subcategories 6

Clickable buttons

Tip

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

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. On the left, under the Templates folder, locate and click the collection.liquid link to open the collection.liquid template in the online code editor.

    Collection dot liq
  3. Press ctrl + F on a PC or command + F on a Mac 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 %}
        <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>
    /* 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.

Clickable btn 4

Use a select element as a submenu

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

  2. On the left, under the Templates folder, locate and click the collection.liquid link to open the collection.liquid template in the online code editor.

    Collection dot liq
  3. Press ctrl + F on a PC or command + F on a Mac to find your collection description. Below your collection description — or above it, as you wish — paste this first code snippet:

    
    <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>
    
    

    Then, paste this second snippet at the very bottom of your collection.liquid template:

    <script>
    /* Product Tag Filters - Good for any number of filters on any type of collection page. */
    Shopify.queryParams = {};
    if (location.search.length) {
      for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
        aKeyValue = aCouples[i].split('=');
        if (aKeyValue.length > 1) {
          Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
        }
      }
    }
    var collFilters = jQuery('.coll-filter');
    collFilters.change(function() {
      var newTags = [];
      var newURL = '';
      collFilters.each(function() {
        if (jQuery(this).val()) {
          newTags.push(jQuery(this).val());
        }
      });
    
      if (newTags.length) {
        Shopify.queryParams.constraint = newTags.join('+');
      }
      else {
        delete Shopify.queryParams.constraint;
      }
      location.search = jQuery.param(Shopify.queryParams);
    
    });
    </script>
    
  4. Save your changes.

Take look at your drop-down on your collection page.

Select

Prevent visitors from choosing multiple tags

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 filters will produce no result.

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

  1. Find the theme you want to edit, click Actions, and then click Edit HTML/CSS.

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

  3. 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 add_ so that the code becomes:

    
    {{ tag | link_to_tag: tag }}
    
    
  4. Save your template.

Want to discuss this page?

Visit the Shopify Community