Want to create filterable collections based on variant options

Eli_Triona
Excursionist
46 0 7

I'm looking for a way to create a filter on collection pages using variant options. For example, if the variant option is a size or a color, I want to have a filter on the collection page that when you click on a variant option value (let's say a color like blue or red), then it will filter the collection showing only the chosen color.

I know that tags can be used for similar functionality, however I need to have filtering at the variant level, and it appears that variant options are the only attribute at that level.

For the proposes of this project, I do not want to use a 3rd party app (like Power Tools Filter Menu or others). There are fine apps, but I'm looking for a way to make this work without an app.

The closest thing I've found so far is this:
https://github.com/devtees/shopify-product-filter

It uses jQuery for the filtering, but seems to have a problem when pagination is involved (limited to filtering products on currently paginated page only).

Would love some ideas on how this might be accomplished!
 

Replies 9 (9)
Mircea_Piturca
Shopify Partner
1494 42 320

To bypass the 50 products per page limit create an alternate template with no layout. XHR that page, and get your products.

This is something similar, is a multi level filter based on metas: https://filter-3.myshopify.com/collections/guitar

This is the products page: https://filter-3.myshopify.com/collections/guitar?view=filter

Finally—Add variant descriptions to your products
Eli_Triona
Excursionist
46 0 7

That's an intersting idea. However, I believe that Shopify still limits the total output to 1,000, no?
It's certainly way better than 50, but for large catalogs provides some problematic user experiances.
I think it might work ok for most situations, but some specific scenarios where a collection is over 1,000 products it's not going to pull all results.

Correct me if I'm mistaken though! And many thanks for the idea :)

Mircea_Piturca
Shopify Partner
1494 42 320

Yes, you will hit the 1000 limit.

For most stores this will do just fine. I wonder if the Pro accounts have the same limitations.

Anyone from Shopify?

Finally—Add variant descriptions to your products
Eli_Triona
Excursionist
46 0 7

I'm using a Plus account and can confirm that 1,000 is still a limitation.

Mircea_Piturca
Shopify Partner
1494 42 320

OH :( bummer

If you find a solution for this I would love the hear it.

Thanks

Finally—Add variant descriptions to your products
Eli_Triona
Excursionist
46 0 7

Thanks Mircea, I think your soltuion could still help someone else with a smaller use case scenario. I'll keep digging for a better workaround on my project. Appreciate your input! :)

Anjan
New Member
6 0 0

HI ,

First of all thanks for such wonderful explanation.

I need to achieve same but using grphQL rest api call. 

Is there any way to achieve filter collection by using meta-fields value.  

Please have look my question : https://community.shopify.com/c/Shopify-POS/filter-collection-by-meta-fields-key-value-pair-using-gr...

GoodfyLabs
Explorer
60 0 8

Hey @Mircea_Piturca  are you there ?

I have checked your GitHub but could not find the code for this kind of Filter ... what is awesome and I would like to learn how to do.

Would you be willing to share ?

Thanks in advance 

William Alencar
GoodFy Labs
Brazilian Shopify Experts
Getting Satisfied Customers around the World
Skype : william.br1
Rohitparakh
Tourist
3 0 0

Can you please guide on how you achieved this in detail?