Add more colors message in collection grid listings

To help indicate that a product has additional color options when listing in a collection grid, you can use this modification to display a message. 

Example:

This modification works when a product has a variant option called Color or Colour:

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:

1

Modify the snippet file

Open snippets/product-grid-item.liquid:

Scroll to the bottom of the file. Look for this line with the closing </a>:

It should be the third last line. Right above the closing </a> add a couple blank lines. Next, we will paste the following code there - Above the closing </a> where you created blank lines:

Code to paste:

{% unless product.has_only_default_variant %}
  {% for option in product.options_with_values %}
    {% assign downcased_option = option.name | downcase %}
      {% if downcased_option contains 'color' or downcased_option contains 'colour' %}
        {% if option.values.size > 1 %}
          {% assign is_color = true %}
             More {{ option.name }}s
          {% endif %}
      {% endif %}
  {% endfor %}
{% endunless %}

Be sure it's pasted after the closing </p> line and before the closing </a> line:

Save your file and test the new change. 

To modify what the line says, you can edit this line:

Try something like:

Resulting in:

Undo

Use the Older versions link at the top of the file if you need to rollback or undo this code change.

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing.