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

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.


{% assign sizes = '' %}
{% for product in products limit: limit %}
{% for variant in product.variants %}
{% if variant.available %}
{% assign sizes = sizes | append: variant.options[1] | append: '_' %}
{% endif %}
{% endfor %}
{% endfor %}
{% assign sizesArr = sizes | split: '_' | uniq %}
<ul class="sortme">
<li class="clearfix filter">
<h4>Filter by Size in Stock</h4>
<select class="styled-select coll-filter">
<option value="">All</option>
{% for size in sizesArr %}
<option value="{{ size }}"{% if current_tags contains size %} selected{% endif %}>{{ size }}</option>
{% endfor %}
</select>
</li>
</ul>
<script>
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('.coll-picker').change(function() {
if (jQuery(this).val()) {
location.href = '/collections/' + jQuery(this).val();
}
else {
location.href = '/collections/all';
}
});
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var newURL = '/collections/{{ collection.handle }}';
if (newTags.length) {
newURL += '/' + newTags.join('+');
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
newURL += '?' + search;
}
location.href = newURL;
{% else %}
if (newTags.length) {
Shopify.queryParams.constraint = newTags.join('+');
}
else {
delete Shopify.queryParams.constraint;
}
location.search = jQuery.param(Shopify.queryParams);
{% endif %}
});
$(document).on('shopify:section:load', function(event) {
Shopify.queryParams = {};
if (location.search.length) {
for (var aKeyValue, i = 0, aCouples = location.search.substr(1).split('&'); i < aCouples.length; i++) {
aKeyValue = aCouples[i].split('=');
if (aKeyValue.length > 1) {
Shopify.queryParams[decodeURIComponent(aKeyValue[0])] = decodeURIComponent(aKeyValue[1]);
}
}
}
jQuery('.coll-picker').change(function() {
if (jQuery(this).val()) {
location.href = '/collections/' + jQuery(this).val();
}
else {
location.href = '/collections/all';
}
});
var collFilters = jQuery('.coll-filter');
collFilters.change(function() {
delete Shopify.queryParams.page;
var newTags = [];
collFilters.each(function() {
if (jQuery(this).val()) {
newTags.push(jQuery(this).val());
}
});
{% if collection.handle %}
var newURL = '/collections/{{ collection.handle }}';
if (newTags.length) {
newURL += '/' + newTags.join('+');
}
var search = jQuery.param(Shopify.queryParams);
if (search.length) {
newURL += '?' + search;
}
location.href = newURL;
{% else %}
if (newTags.length) {
Shopify.queryParams.constraint = newTags.join('+');
}
else {
delete Shopify.queryParams.constraint;
}
location.search = jQuery.param(Shopify.queryParams);
{% endif %}
});
});
</script>

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.


{% assign sizes = '' %}
{% assign outofstock = false %}
{% for tag in current_tags %}
{% if tag == 'XS' or tag == 'S' or tag == 'M' or tag == 'L' or tag == 'XL' %}
{% assign outofstock = true %}
{% endif %}
{% endfor %}
{% for variant in product.variants %}
{% if variant.available %}
{% assign sizes = sizes | append: variant.options[1] | append: ' ' %}
{% if current_tags contains variant.options[1] %}
{% assign outofstock = false %}
{% endif %}
{% endif %}
{% endfor %}
{% if outofstock == false %}
<!-- INSERT THE PRODUCT GRID HERE -->
{% endif %}

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.