Collections: Display product sizes on collection pages

Example on hover:

Example when prices are always shown:

Note: Faded options are sold-out. However, this only works with single variant products (fade effect). If your products have more than one variant (example: Size and Color), this customization won't fade sold out items. If you have a mix of single variant and multi-variant products, we recommend removing the fade effect for a more consistent message to your customers. You will have that option in the CSS to show or hide the fade effect. 

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Add code to product-grid-item.liquid

From the Snippets folder, open product-grid-item.liquid:

Scroll to the bottom of the file. Find the this line:

That's the start of the product reviews code. 

Make a few blank lines above that line:

Then, past the following code in that area:

<span style="display:block; margin-top:5px">
{% 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 %}
            <span class="size-values {% unless variant_avialable %}soldout{% endunless %} text-center">{{ value | escape }}</span>
          {% endfor %}      
        {% endif %}
    {% endfor %}
  {% endunless %}      
{% endunless %} 
</span>

Example:

Save the file.

Option: Two variants

The code works when you have a variant label called "Size" or "size". If you have some products that are labeled differently, for example "Cut" or "cut", then you can modify the code to work with both labels. The change is quite simple. Replace this line in the code from above:

        {% if downcased_option contains 'size' %}

With this line:

        {% if downcased_option contains 'size' or downcased_option contains 'cut' %}

That will show the sizes for products that are labeled with: "Size", "size", "Cut" or "cut".

2

Add style code to display the product sizes

Style Code

Option 1 - Fade effect for sold-out sizes (works for single-variant products):

/* -- Collection size swatches -- */
span.size-values {
    background-color: $colorSplash;
    color: set-accent-text-color($colorSplash);
    padding: 4px 10px;
    margin-right: 2px;
}

span.size-values.soldout {background-color: lighten($colorSplash, 20%);}

@include at-query($max, $small) {
span.size-values {
    padding: 2px 4px;
    margin-right: 1px;
}
  span.size-values.soldout {
    opacity:0.3;
    display:none;
  }
}  
/* -- end size swatches -- */

OR

Option 2 - No fade effect (best to use when displaying a mix of single and multi-variant products):

/* -- Collection size swatches -- */
span.size-values {
    background-color: $colorSplash;
    color: set-accent-text-color($colorSplash);
    padding: 4px 10px;
    margin-right: 2px;
}

@include at-query($max, $small) {
span.size-values {
    padding: 2px 4px;
    margin-right: 1px;
}
  span.size-values.soldout {
    display:none;
  }
}  
/* -- end size swatches -- */

Where to add the code:

Where to add CSS in your theme

Additional Notes

Your collection grids will now show variant sizes if your variants are called Size or size. You can customize the code in Step 1 if your variants are labeled something else. The product size background color is picked up from your Accent color option in the theme settings. If you need a different color, modify the style code in Step 2. The sizes are not linked to the exact variant, they will click through to the main product page just like clicking on any other part of that product. 

Result:

Mobile sizes boxes are smaller and sold-out options are not shown to save space: