How to make Collection filter by products variants (colors, sizes, price .. . )?

Shopify Partner
14 0 2

Hey, 

I'm building my first Shopify theme and I'm wondering how to add advanced filter functionality to my theme but I read the Shopify dev docs and we can just make a filter by tags and I want to know to make a filter by color and size functionality like this store https://bc-sf-filter-demo-1.myshopify.com/collections/dresses but without using any apps  

0 Likes
Shopify Partner
3 0 1

Hey Iliasshad,

 

There's no out of the box way to achieve what BoostCommerce have displayed in their demo there annoyingly.

 

But there's always things you can do to provide more advanced filtering. The most straightforward way would be to create a number of tag naming conventions. For example, if Product A is red you would tag it with "color-red". If Product B is Large you would tag it with "size-blue".

 

Then in your collection.liquid file you can provide a list of colours and sizes, which when clicked would link to the filtered version of that collection: https://your-store.com/collections/t-shirts/color-red. You can use JavaScript to allow multiple filters like so: https://your-store.com/collections/t-shirts/color-red+size-blue.

 

I hope that helped!

 

Adam

Builder (of the web)
1 Like
New Member
4 0 0

Hey, 

 

 I'm wondering how to add advanced filter functionality to my theme but I read the Shopify dev docs and we can just make a filter by tags and I want to know to make a filter by color and size functionality like this store. Using the varaiants options 

 

https://dylanjh.com/blogs/14-how-to-filter-by-size-in-stock-on-shopify-on-the-collection-page is not a valid link.

 

0 Likes