More Variants available - Debut Theme

[LondonHomeCo]

I want to add something like 'more colours available' on the collection page by a product when that product has colour variants. What is the code for this and where does it need to be added for debut theme? Additionally but not as important id like the text of 'more colours available' to be a certain colour (Blue) (#1878B9). Any help would be greatly appreciated.

[Quyen_Beo · Accepted solution]

1. If just 'more colours available'
+ If you're using Debut theme, from this file assets/product-card-grid.liquid. Add these line of code to detect if product has many colors

{% for product_option in product.options_with_values %}
      {% if product_option.name == 'Color' or product_option.name == 'Colour' %}
          {% if product_option.values.size > 1 %}
  			<p>More colours available</p>
          {% endif %}
  	  {% endif %}
  {% endfor %}

Result should be like this

2. If you want showing color swatches
+ You can follow this document if you are familiar with code https://avada.io/shopify/docs/add-color-swatches-on-collection-page.html or search with keyword: 'Shopify show color swatch on collection page'
+ If not, you should hire a developer to do it for you. This would take about 4-6 hours to make.

[LondonHomeCo]

Thank you very much, that worked perfectly. I also added <p style="color: #1878B9;">More Colours Available</p>

Thats the finished result

[LondonHomeCo]

Thank You for your help. how can i now do the same thing but for venture theme. Thank you in advance