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 %} :

{% 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