Variant filter on Collection pages with Shopify

Question

I'm trying to setup a filter in my collection pages.

So far I manage to setup a great custom tag filter like below:

                <div class="collection-sort">

{% assign tags = 'Black, Slate, Military Green' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %}
<select id="FilterBy" class="collection-sort__input">
  <option value="/collections/{{ collection.handle }}">Choose Color</option>
  {% for tag in tags %}
  {% if current_tags contains tag %}
  <option value="/collections/{{ collection.handle }}/{{tag}} " selected>{{ tag }}</option>
  {% elsif collection.all_tags contains tag %}
  <option value="/collections/{{ collection.handle }}/{{tag}}">{{ tag }}</option>
  {% endif %}
  {% endfor %}
</select>
</div>

However, I'm looking to have a dynamic Size filter ( using Variant)

For this I tried the following:

<div class="collection-sort">


  <span value="">Choose Size</span>

          {% for variant in collection.variants %}
         {% if variant.available %}
  <span value="{{ variant.id }}" >{{ variant.size}}</span>
{% else %}
  <span value="{{ variant.id }}" >{{ variant.size }}</span>
 {% endif %}
        {% endfor %}

</div>

But nothing appear i my dropdown . . . all my product have size entered as product option / variant . . .

Anyone managed to make this work ? It will be very helpful !

Thanks a lot

Answer 1

There are too many issue with your code in order for it to output anything.

Lets disect them one by one.

Collections does not have variants

With this line of code:

{% for variant in collection.variants %}

You are targeting the variants inside a collection but collections doesn't have variants. Products do have variants.

So the logic here is not correct.

Variants options are stored in different way

With the following code: {{ variant.size }} you are trying to get the variant option called size but it doesn't work that way.

You will have to get the option using the objects option1 , option2 or option3 . If your variant option size is the first one you will get it this way: variant.option1 .

The bad part

What you are trying to achive is not possible with liquid because of Shopify limitation.

In order to achieve this you will need to loop all of the products and take their variant options and filter only the unique ones and because of the hard limit ot 50 products per request this is a lost fight.

Workarounds ( there are a few )

All of the workarounds will require you to create a link_list that will hold all the available sizes that you will have to enter manually.

1) The most common one is to use a tag for the size and filter by tag, since the collections can filter products directly by tag.

2) Use collections that will store products based on the size and redirect to them when you filter a specific size.

3) Create a infinite AJAX requests that pull products based on your filter by checking if each product have the selected value and using the pagination as a way to load the next page.

These are the main options without using an App.

Good luck!