On my main page I have a block with a product catalog and I need to display radio buttons with colors and sizes. I'm bringing out product-variant-picker snippet from Dawn. I need to style the color buttons to match this color. For this purpose I created a metafield. The problem is that I display the label of the radio button, but due to the fact that one size has one color, the same color is displayed twice, but when you add to the cart, everything is added correctly. The problem is in the metafield output.
For example, a product has 4 colors and two sizes. That is, he has 8 options. And when I display the code below, I have 4 color buttons as it should be, but the first two are the same color and the second two are a different color. This is due to the fact that there are two variants of the same color. Can this be solved?
{% if option.name == 'Color' %}
<label
class="color-swatch"
style="background-color: {{ product.variants[forloop.index0].metafields.custom.color }}"
for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}"
>
{{ variant.metafields.custom.color }}
</label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value }}
</label>
