This article will show you how to add categories and subcategories to your Shopify site, creating an intuitive hierarchy for your visitors to explore and discover your products.

Shopify

Shopify is an e-commerce giant. They offer a complete package allowing you to sell your products online. However, the default way that Shopify organizes products is very flat; products can be sorted into collections, but there’s no indication of how to create a hierarchy where users can narrow down their focus to more specific categories to find what they’re looking for.

The need for categories

Users of e-commerce sites are used to drilling down through categories. For instance, to buy a phone, you might click on the main category Electronics, then click on the subcategory Cell Phones. You’d expect to see a menu with Electronics at the top, and a number of more specific sub items nested below.

It’s a simple and elegant system that seems to be missing in Shopify. Fortunately, there’s a relatively easy work-around. Follow along with the rest of the article to set up categories on your own site.

Setting up products

Products have the concept of tags. This is the functionality that we’re going to base our category system on. Think of each tag as a subcategory that will belong to a main category (like Cell Phones belong to Electronics).

To add a tag to a product, simply edit the product, and type your subcategories into the tags field at the bottom of the sidebar. To add multiple tags, put a comma between each one.

Save the product when you’re done.

Setting up collections

With a product tagged, we now have to set up collections to utilize those tags. Think of a collection as a main category that will contain subcategories within it.

1. Make a new collection.
2. Give it the name of the category you want it to represent. (eg. Electronics)
3. Under the condition section, click the first dropdown and select Product tag. You can then choose the tag you want to include in the box below.
4. If you want to include multiple tags, switch the condition from “all conditions” to “any condition,” and repeat the previous step to add more tags to the collection.
5. This next step is a little tricky. Scroll down to the heading Search engine listing preview and click the link Edit website SEO.
6. A field called URL and handle will appear. Whatever you type in that box becomes the handle. Remember this value for later.
   Save the collection.

Setting up menus

Each collection needs an accompanying menu. This is how you’ll display the hierarchy to your shop’s visitors.

1. Create a new menu.
2. Give it the same name as you named your collection.
3. Make sure the handle is the same as the handle in your collection.
4. Make a new link for each of the tags as you added to your collection.
5. Click on the Link dropdown for each one, and choose Collection. Repeat this for each link you’ve added.
6. Then select the collection you prepared earlier. Repeat this for each link you’ve added.
7. Finally, you need to go through each link and click the “filter with tags” button. Give each link a unique tag until it matches the tags you set up in your collection.
8. Save the menu.

Setting up your template

With the collections and menus set up, that’s technically all you need to display the hierarchy of your site. But there’s another step you can take to make navigation even more intuitive for your users. When you’re on a collection, the menu for that collection should appear in the sidebar so users can drill down to more specific subcategories. If they’re exploring one of the subcategories, the link for that subcategory should be highlighted to show where they are.

1. This section is slightly more technical, as you’re going to be editing the guts of your site’s template. Continue on to find out how.
2. Go to Online Store > Themes.
3. Click the button with the ellipses in it.
4. Choose Edit HTML/CSS from the dropdown that appears.
5. Open the document for your site’s sidebar. In many cases, it will be located in the Snippets folder, and be called collection-sidebar.liquid
6. Scroll through the code and find the place you want to display the menu in the sidebar.
7. Copy and paste this code onto the page:

{% if current_tags.size %}
{% assign current_tag = current_tags.first | handleize %}
{% else %}
{% assign current_tag = false %}
{% endif %}
<h3> {{ collection.title }} </h3>
<ul>
{% for link in linklists[collection.handle].links %}
<li>
<a class="{% if current_tag == link.handle %}active-class{% endif %}" href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>

8. Customize the active-class to be the same as the one used by your theme.
9. Save the theme.

Go to your site and test it out. If you’ve set up everything correctly, every collection with a matching menu will display that menu in the sidebar.

And that’s it. Making use of some of Shopify’s more obscure features, and a little ingenuity, you’ve set up a proper hierarchy for your shop. Your visitors will thank you for it.