I would like to add the size variations one the collection pages so it’s easier for costumers to see if it’s still available in their size.
AI-generated summary
Shopify collection pages are being customized to show product size variants directly in the product grid, so shoppers can quickly see available sizes without opening each product page. Screenshots were used to show both the desired result and the current display.
Current progress:
- The store URL and the
product-grid-item.liquidsnippet were shared. - A Liquid code update was provided to loop through product options and print values for the option named “size”.
- The change is reported as working, so sizes now appear on collection pages.
Latest issues raised:
- The spacing between the product name and the size list is too large.
- The font size for the size labels should be smaller.
- Out-of-stock sizes are still being displayed, and the request is to hide unavailable sizes.
Status: partially solved. Showing sizes on collection pages works, but the styling and stock-filtering behavior remain unresolved. No final code for hiding unavailable sizes or adjusting spacing/font size was provided yet.
Sorry you are facing this issue, it would be my pleasure to help you.
Welcome to the Shopify community! 
Thanks for your good question.
Please share your site URL,
I will check out the issue and provide you a solution here.
can you please share code here so i will update
{% comment %}
This snippet is used to showcase each product during the loop,
‘for product in collection.products’ in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = ‘large–one-quarter medium–one-half’
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = ‘large–one-third medium–one-half’ %}
{% endunless %}
{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- assign variant = product.selected_or_first_available_variant -%}
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}
{% if featured_image.src== blank %}
![{{ featured_image.alt | escape }}]()
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
![{{ featured_image.alt | escape }}]()
![{{ featured_image.alt | escape }}]()
{% endif %}
{% if sold_out %}
{% elsif on_sale %}
{{ product.title }}
—
{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
+
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{{ 'products.product.sold_out_html' | t }}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
{% endif %}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ ‘general.accessibility.unit_price_separator’ | t }}
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endcapture -%}
{{ ‘products.general.unit_price’ | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
{%- endif -%}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}can you please try this code
{% comment %}
This snippet is used to showcase each product during the loop,
'for product in collection.products' in collection.liquid.
A liquid variable (grid_item_width) is set just before the this
snippet is included to change the size of the container.
Once the variable is set on a page, all future instances of this
snippet will use that width. Overwrite the variable to adjust this.
Example
- assign grid_item_width = 'large--one-quarter medium--one-half'
{% endcomment %}
{% unless grid_item_width %}
{% assign grid_item_width = 'large--one-third medium--one-half' %}
{% endunless %}
{% unless width %}
{%- assign width = 310 -%}
{% endunless %}
{% unless height %}
{%- assign height = 415 -%}
{% endunless %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- assign variant = product.selected_or_first_available_variant -%}
{% capture img_id_class %}ProductImage-{{ product.featured_media.id }}{% endcapture %}
{% capture img_wrapper_id %}ProductImageWrapper-{{ product.featured_media.id }}{% endcapture %}
{%- assign featured_image = product.featured_media.preview_image %}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% if featured_image.src== blank %}
{% else %}
{% include 'image-style' with image: featured_image, small_style: true, width: width, height: height, wrapper_id: img_wrapper_id, img_id_class: img_id_class %}
{% endif %}
{% if sold_out %}
{{ 'products.product.sold_out_html' | t }}
{% elsif on_sale %}
{% capture saved_amount %}{{ product.compare_at_price | minus: product.price | money_without_trailing_zeros }}{% endcapture %}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{% endif %}
{{ product.title }}
—
{% if on_sale %}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{% endif %}
{% if product.price_varies %}
{{ product.price_min | money_without_trailing_zeros }}
+
{% else %}
{{ product.price | money_without_trailing_zeros }}
{% endif %}
{%- if product.price_varies == false and variant.unit_price_measurement -%}
{%- capture unit_price_separator -%}
/ {{ 'general.accessibility.unit_price_separator' | t }}
{%- endcapture -%}
{%- capture unit_price_base_unit -%}
{%- if variant.unit_price_measurement.reference_value != 1 -%}
{{- variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ variant.unit_price_measurement.reference_unit }}
{%- endcapture -%}
{{ 'products.general.unit_price' | t }}
{{ variant.unit_price | money }}{{- unit_price_separator -}}{{- unit_price_base_unit -}}
{%- endif -%}
{% if section.settings.product_vendor_enable %}
{{ product.vendor }}
{% endif %}
{% unless sold_out %}
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
{% assign downcased_option = option.name | downcase %}
{% if downcased_option contains 'size' %}
{% assign is_size = true %}
{% for value in option.values %}
{% assign variant_avialable = true %}
{% if product.options.size == 1 %}
{% unless product.variants[forloop.index0].available %}
{% assign variant_avialable = false %}
{% endunless %}
{% endif %}
{{ value | escape }}
{% endfor %}
{% endif %}
{% endfor %}
{% endunless %}
{% endunless %}
and it’s showing also the out of stock size is it’s possible to not show the size that isn’t available anymore?