Add Available Sizes To My Product Grid On Shopify Store

This modification adds product sizes to the product grid/collection page of your Shopify store.

Editing your theme code to add this feature

• In the Template directory, create a new file called collection.available-size.liquid and copy the collection.liquid from the same directory.

• In the Snippets directory, find the product-card-grid.liquid file and add the following code at the specific place where you want to show the sizes, here we’ve added the after the price. Price code looks like this {% include 'product-price', variant: product.selected_or_first_available_variant %} :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{% if collection.template_suffix == "available-size" %}
 
<p>
{% for option in product.options %}
{% if option == 'Size' %}
{% if product.options_with_values[0].name=="Size" %}
{% for variant in product.variants %}
 
{{ variant.option1  }}
 
{% endfor%}
{% elsif product.options_with_values[1].name=="Size" %}
{% for variant in product.variants %}
 
{{ variant.option2  }}
 
{% endfor%}
{% else %}
{% for variant in product.variants %}
 
{{ variant.option3  }}
 
{% endfor%}
{% endif %}
 
{% endif %}
{% endfor %}
</p>
{% endif %}

In the Theme admin, go to a collection and set the template to collection.available-size, it’ll enable the available sizes in the product grid in the collection page


Congrats you’ve completed this feature