Add Color Swatches to Products on Shopify - Dawn Shopify theme

gistfile1.txt

 <variant-radios class="no-js-hidden" data-section="{{ section.id }}" data-url="{{ product.url }}" {{ block.shopify_attributes }}>
  {%- for option in product.options_with_values -%}
    {% assign option_name_downcase = option.name | downcase %}
    {%- if option_name_downcase contains 'color' or option_name_downcase contains 'colour' -%}
      <fieldset class="js product-form__input mt-8">
        <legend class="block text-xl text-dark-blue font-semibold tracking-normal leading-none">{{ option.name }}:</legend>
        {%- for value in option.values -%}
          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" class="w-24 h-24"
            name="{{ option.name }}"
            value="{{ value | escape }}"
            form="product-form-{{ section.id }}"
            {% if option.selected_value == value %}checked{% endif %}
          >
          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}" class="product-color-swatch product-color-swatch-{{ value | downcase | remove: '(+$25)' }}" style="background-color: {{ value | downcase | remove: '(+$25)' }};">
            <span class="visually-hidden">{{ value | remove: '(+$25)' }}</span>
          </label>
        {%- endfor -%}
      </fieldset>
    {%- else -%}
      <fieldset class="js product-form__input mt-8">
        <legend class="block text-xl text-dark-blue font-semibold tracking-normal leading-none">{{ option.name }}:</legend>
        {%- for value in option.values -%}
          <input type="radio" id="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}"
            name="{{ option.name }}"
            value="{{ value | escape }}"
            form="product-form-{{ section.id }}"
            {% if option.selected_value == value %}checked{% endif %}
          >
          <label for="{{ section.id }}-{{ option.name }}-{{ forloop.index0 }}">
            {{ value | remove: '(+$25)' }}
          </label>
        {%- endfor -%}
      </fieldset>
    {%- endif -%}
  {%- endfor -%}
  <script type="application/json">
    {{ product.variants | json }}
  </script>
</variant-radios>