Shopify add color swatches/dots to collection pages.

Shopify add color swatches to collection pages.txt

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