More Variants available - Debut Theme

Solved
LondonHomeCo
Tourist
5 0 1

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.

Accepted Solution (1)

Accepted Solutions
Quyen_Beo
Pathfinder
93 14 24

This is an 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

Quyen_Beo_0-1621444171867.png

 

{% 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

Quyen_Beo_0-1621444288643.png

 

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.

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me

View solution in original post

Replies 3 (3)
Quyen_Beo
Pathfinder
93 14 24

This is an 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

Quyen_Beo_0-1621444171867.png

 

{% 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

Quyen_Beo_0-1621444288643.png

 

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.

Was my reply helpful? Please Like and ✔️ Accept Solution. This mean alot to me

View solution in original post

LondonHomeCo
Tourist
5 0 1

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

LondonHomeCo_0-1621506026175.png

Thats the finished result

LondonHomeCo
Tourist
5 0 1

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