How to filter by size in Stock on Shopify on the Collection page

Alright, so this was something I searched for around the shopify universe and was not able to come up with a guide, so here we go.

We are going to start by adding a nice filter on the theme to filter by the sizes that are available between ALL products on the currently selected page. The guide below ASSUMES that the size is the 2nd option. if it is the first for you, change the 1 to a 0.

I am adding this code to the theme alongside the other filters, which is often in a snippet called filters, but might just be in your collection-template.liquid section.

Next we need to add the tags of each size (or color depending how you're doing this) to the products in the store. This is by far the most annoying part of making this happen on your store.

By adding the tags, we ensure that the right products ALL show up on the site when the filter by the size, which really acts as a tag filter with Shopify's URL filtering

Now its time to make sure that we ONLY show the products that are in stock. So we will do this by removing matching the variants available in that specific product, with the tag filter, and determine if it matches.

The code below will go in the area on your site that has the product grid item. Usually this is called product-grid.liquid and is a snippet, but it will be clear if you find the product for loop in the collection template.

With those two codes added you should be good to go in any theme to filter any collection by the size or color in stock.

---

Back to blog