Filters are everything! Whether you are shopping the sale section of your favorite online brand for some new jeans and only want to see your size, or looking at analytics for your business and only want to see customers from a certain region, filters are key. Google, one of the most, if not the most, popular website on the internet is really just a huge filter for an endless stream of options. 

Long story short, filters are great! From a technical perspective, filters can be achieved in a couple different ways. One way is by using variants within the product, while another option that some Shopify themes might offer is by using product tags that have the products’ size values. 

The product tags solution has a distinct advantage: the sorting will work no matter how many different ways you have written the variant name. Let’s get more specific and take the size “XS” for example. On different products the shop administrator could, in theory, name the size values for the variants as any of these following options: x-small,  xs, XS and all of them refer to the same size. Of course, as you may have already guessed, that’s not a great practice, because normalizing these sizes if you ever needed to sort them would be difficult, but perhaps there is a business reason for all of these sizes to be written differently, and I’m sure it’s not the craziest thing you’ve seen when diving into a new client site...

Nevertheless...

If we want to filter a collection on the sizes when the variants names differ the most simple solution would be to decide on a standard set of sizes like: XS, S, M, L, XL, 2XL, 3XL and set those as the product tags. With this naming convention in mind, we would go through all the products and rather than changing the variants’ names, we would set size tags for them from these standard ones that we have developed. Anything named any of the values between the variants: x-small,  xs, XS, we would add the product tag XS for it. Simple enough! Then we would go through and do the same for the rest of the website for the rest of the products.

After setting all the product tags comes the coding. This is where this solution really offers us some advantages… 

Let’s say that we want to display a list of available sizes found in a collection in one sidebar but we also want them to be ordered from XS to 3XL. This would be difficult if you were using the non-normalized variant names so the product tags become important. First, you must go through all the products in the collection and for each of them you should check if they include the tag names that you would like to cover... for example if the product has the tag M you could use:

assign sizes = sizes | append: "M_" %}

… This means that when the “M” tag is found, you can append the size “M” to a string(“sizes”) that contains all of the sizes found. The result will be a long string “sizes” that has all the sizes found in that collection. Now we need to reduce it to a string that lists the size only once so that it can be ordered directly. 

For this we can use another variable:

{% assign ordered_letters_sizes = '' %}
{% if sizes contains "_XS_" %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "XS_" %} {% endif %}
{% if sizes contains "_S_" %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "S_" %} {% endif %}
{% if sizes contains "_M_"  %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "M_" %} {% endif %}
{% if sizes contains "_L_"  %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "L_" %} {% endif %}
{% if sizes contains "_XL_"  %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "XL_" %} {% endif %}
{% if sizes contains "_2XL_"  %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "2XL_" %} {% endif %}
{% if sizes contains "_3XL_"  %} {% assign ordered_letters_sizes = ordered_letters_sizes | append: "3XL_" %} {% endif %}

In the end the ordered_letters_sizes is a string that contains only one iteration of each available size in that collection ordered. If you’ve been following along from the beginning, all we are doing here is a string-based normalization of sizing so that rather than working with a number of different strings that all mean the same thing, you’ve now boiled it down to one product tag for each size… with just one standard name.

Once you are here, you can split this string and create buttons from it that lead to the filtered collection, for example, for the button that has the letter “M” as label, it will open the link:

https://www.shop-name.com/collections/collection-name/M

And all the products with the size “M” appear even if the variant options names are: “m” or “medium” or “md” or “med” even if some of these letters are capitals like “M”, “Medium” and so on.

And there you have it! With a little work, we have not only standardized the sizing for an entire website, but allowed the end user to filter by just one size, and also set up a standard system for future product naming and organizing.

You can use this same trick for all of your standardizing of product variants. Sizing is an easy example, but perhaps you have entire product categories that NEED to be named differently but fall under the same group, and you’d still like to be able to both order them specifically, and allow your users to filter by each category. 

No matter what you are trying to accomplish or what the Shopify store sells, maintaining a clean and normalized set of product categories will not only allow you to manage your inventory more easily as you continue to scale and grow the business, but also allow your users to have easy access to exactly what they are looking for!