Color swaches using metafiled in shopify

{% if swatch == 'Color' %}
    {%- if product.metafields.coloroptions != blank -%}
             
              {%- for field in product.metafields.coloroptions -%}
              <div data-value="{{ field | first | escape }}" class="swatch-element color {{ field | first | escape }} available">
                <div class="tooltip">{{ field | first | escape }}</div>
                    <a href="/products/{{ field | last }}">
                      {% assign phandle = field | last %}
                      {% assign additionaproduct = all_products[phandle] %}
                      {% assign getimage = 0 %}
                      {% assign additionalcolorimg = '' %}
                      {% assign multiimgs = additionaproduct.images | reverse %}
                      {% for image in multiimgs %} ​
                      {% if getimage == 0 %}
                      {% assign additionalcolorimg = image.src | img_url: 'small' %}
                      {% endif %}
                      {% endfor %}
                      <label for="section-product-template-swatch-0-{{ field | first | handle }}" style="background-color: {{ field | first | handle }}; background-image: url({{ additionalcolorimg }})"></label>
                    </a>
              </div>
              {%- endfor -%}
             
            {%- endif -%}
    {% endif %}