Show Other Available Colors on Product Grid

Code involved: CSS, HTML, Liquid

Theme used in the demo: Debut

This tutorial will cover how to add the other color variations you have in a product style on the product grid.  For example, say you sell a solid color T-Shirt that comes in White, Blue, Yellow, and Green.  You would most likely set this up as one product with 4 color variants. 

On your homepage or collection grid, the customer will only see the main image (one color).  One solution is to show what other colors are available in the product grid, such as in the image below.


Color Variants

  1. In the code editor, locate the snippet to show the product card on the product grid. In the Debut theme, it is called product-card-grid.
  2. Below the code where the price is shown, add the following code:
<div style="font-size:0.7em; margin-top:5px">
{% if product.options contains 'Color' %}
<a href="{{ product.url | within: collection }}">Available in:
{% for option in product.options_with_values %}
{% if == 'Color' %}
{% for value in option.values %}
{{ value }},
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}

The above code will only work if you named your variant option as "Color".  If you named it something else, just replace the word "Color" in the above code with the word you used. 

What the code says in English:  If there is an option called "Color" in the product's variant, then show this within the DIV.  Then, when you come across the option "Color", loop through all colors within the option and display it.

A quick and easy way to improve the customer experience on your site and to make sure you're not missing out on sales because a customer makes the assumption you don't have the color when browsing across your site. 

We would love to see how you used this code, add your store in the comments.  If you're having any troubles include any questions and comments as well. 

Leave a comment

Please note, comments must be approved before they are published