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