How to add color swatches on colection page in Dawn theme

Kumar2573
Pathfinder
99 5 10
{% 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>




Expert Shopify Plus & shopify Developer & Theme customizer
- If the problem is solved remember to click ✅ to Accept Solution
- Press Like ?? if the answer was helpful
- Still, Facing issue, Reach out to me Email :- jitendra3496@gmail.com | Skype :- jitendra2573_1
- Direct Hire me :- Direct Contact me
Reply 1 (1)
flyteline
New Member
4 0 0

Hi,

Where do you ad this code? the collections.liquid? Where in the liquid do you place the code?