Swatches using variant image on collection pages

Highlighted
Tourist
3 0 2

I am trying to add some code to display the variants of a product in the collection pages. I have managed to find some simple code that when added to "product-card-grid.liquid" underneath the price code, it displays little swatch options of the product like this: 

 

example.jpg

It pulls the colors from the variants when they are named something simple which the majority of mine aren't.
But I was really hoping to have it changed to pull the associated image from a variant and use that instead of the color.
Does anyone know how I could edit the existing code to do this instead?

The code for displaying variant color swatches is:

{% capture option_titles %}Color,color,Colour,colour{% endcapture %}
  {% assign option_titles = option_titles | split:',' %} {% for option in product.options %}
  {% if option_titles contains option %}
  {% capture option_index %}option{{ forloop.index }}{% endcapture %}
  {% assign option_values = product.variants | map: option_index | uniq %}
  {% if option_values.size != 1 %} {% for opt in option_values %} 
  
  <div style="background-color:{{ opt | downcase }};" class="option_circles"></div>
  {% endfor %}      {% endif %}   {% endif %} {% endfor %}     
  <style>   .option_circles
  {     
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  border:1px solid #ccc;
  }
  </style>
 
I've tried adding random code from various tutorials etc. but can't get the desired result.
Any help with this would be very appreciated as it seems that this is a pretty common request and 99% of solutions are to use a paid app, which I feel is excessive for what seems to be a relatively simple code addition.
1 Like
Highlighted

@Yeezus wrote:

I am trying to add some code to display the variants of a product in the collection pages. I have managed to find some simple code that when added to "product-card-grid.liquid" underneath the price code, it displays little swatch options of the product like this: 

 

example.jpg

It pulls the colors from the variants when they are named something simple which the majority of mine aren't.
But I was really hoping to have it changed to pull the associated image from a variant and use that instead of the color.
Does anyone know how I could edit the existing code to do this instead?

The code for displaying variant color swatches is:

{% capture option_titles %}Color,color,Colour,colour{% endcapture %}
  {% assign option_titles = option_titles | split:',' %} {% for option in product.options %}
  {% if option_titles contains option %}
  {% capture option_index %}option{{ forloop.index }}{% endcapture %}
  {% assign option_values = product.variants | map: option_index | uniq %}
  {% if option_values.size != 1 %} {% for opt in option_values %} 
  
  <div style="background-color:{{ opt | downcase }};" class="option_circles"></div>
  {% endfor %}      {% endif %}   {% endif %} {% endfor %}     
  <style>   .option_circles
  {     
  height: 25px;
  width: 25px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  border:1px solid #ccc;
  }
  </style>
 
I've tried adding random code from various tutorials etc. but can't get the desired result.
Any help with this would be very appreciated as it seems that this is a pretty common request and 99% of solutions are to use a paid app, which I feel is excessive for what seems to be a relatively simple code addition.

Hi @Yeezus  have you find a solution ?  I will take a look on this ... 

William Alencar
GoodFy Brasil
0 Likes
Highlighted
New Member
4 0 0

Hi, I have solved the problems. if you also have solved it, i hope this answer will help others. Here is what I do. 

At first, I wanna use variant images as swatches only in the product page. and this post came out and it works perfectly. 

https://help.outofthesandbox.com/hc/en-us/articles/115007100368-How-to-Use-Variant-Images-as-Swatche...

and then I think about changing it on the category page. and it worked. It is the nearly exact same steps as what we do in product page ( check the post above), ONLY ONE SMALL CHANGE

 

Online Store > Themes , click the Actions button and select Edit Code. In the code, navigate to Snippets > collection-swatch.liquid  In this snippet, around line 19 depending on your theme and version 

 

other steps are same as what we do in product page

 

0 Likes
Highlighted
New Member
2 0 0

I want to replace color swatches with variant image swatch in collection pages. Please help me. I need like this collection page: 

 

Screenshot_20200829-110654_Wrike.jpg

Please help me . I need code. Thanks.

0 Likes
Highlighted
New Member
4 0 0

Hi, i have posted the steps on my previous reply 

QQ截图20200831104924.png

 

My theme name is "responsive" and I will send my code but idk if this will help 

 

1. Online store > theme > edit code: 

2. Go to Sinppets > collection-swatch.liquid

3. For my theme: it's line 19

 

<a href="{{ variant.url | within: collection }}" class="swatch">
<span data-image="{{ variant.featured_image | product_img_url: '480x' }}" style="background-image: url({{ variant.image | img_url: 'small' }}); background-color: {{ value | split: ' ' | last | handle }};"></span>
</a>

 

4. You can compare your original code in this part and try to reply to the red lines I marked. 

5. Note: always remember to duplicate your theme before you made changes to the code, especially when you are not that sure if the change will reach your expectations or not. Thus you can always switch to the previous normal version of your site. 

 

hope this will help

0 Likes
Highlighted
New Member
2 0 0

My theme is "radey" . Please see my screenshot. The have no collection-swatch.liquid. it's have one swatch.liquid. Please help me.

 

screencapture-tcs108-myshopify-admin-themes-109587333279-2020-09-02-12_29_30.png

0 Likes
Highlighted
New Member
4 0 0

Hi, 

 

I'm not a technical expert, just a marketer who found a way to solve the problem coincidentally, however, this method is only limited to the theme " responsive" which I use currently. You can find your theme support for this issue. I'm sorry 

0 Likes