intermediate Intermediate tutorials require familiarity with basic web design concepts, as well as basic knowledge of HTML, CSS and JavaScript.

Unsupported Customization

Unsupported customizations fall outside the scope of our support service. This means that we’re not able to help you if you run into problems. The good news is that we’ve classified each tutorial according to its level of difficulty, to help you decide whether or not to attempt it on your own.

There’s also a growing community on our forums - you’ll often find friendly and helpful advice there. You could also consider reaching out to a Shopify Expert to assist you with some of the more advanced customizations.

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. 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 link:

    #

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

    #

  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 %}
    <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.

#

Use a select element as a submenu

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

    #

  2. Click the Template Editor button.

    #

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

    #

  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 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 collection.handle %}
  newURL = '/collections/' + '{{ collection.handle }}';
  if (newTags.length) {
    newURL += '/' + newTags.join('+');
  }
  var search = jQuery.param(Shopify.queryParams);
  if (search.length) {
    newURL += '?' + search;
  }
  location.href = newURL;    
  {% else %}
  if (newTags.length) {
    Shopify.queryParams.constraint = newTags.join('+');        
  }
  else {
    delete Shopify.queryParams.constraint;
  }
  location.search = jQuery.param(Shopify.queryParams);
  {% endif %}      
});
</script>

Then click Save.

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

#

Prevent visitors from choosing more than one product tag when filtering by tag

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. From your shop admin, go to the Themes page.

  2. Click on the Template Editor button.

#

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

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

This customization is not supported by our Shopify Gurus. Learn more ›

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.