Swatches using variant image on collection pages

New Member
3 0 0

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: 



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;
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.