Hello All,
I'm new to Shopify Development and I am learning how to write custom code in liquid. One of my goals is to add custom color swatches to my product pages.
Below is a snippet of my first attempt, but I ran into a problem with the logic. My product variants are imported from a Print-On-Demand vendor and each color variation has a variant for size as well. The POD vendor has a different SKU for each color/size variation.
As you can see from the code below, I am looping through the variants and assigning a swatch color based on the variant index.
This works in theory, but the problem is that I have 4 color variants - each with 6 different size variants. Therefore, my for loop reads the "Color" value of the first 4 items in the loop (which are all the same color, but 6 different sizes) and assigns the same color to each of the radio buttons in the color options UI.
My initial idea would be to maybe write a nested loop that factors in size as well, but I hit a wall attempting to do so. Any suggestions on how to resolve this issue?
<--------------------->
THEME: Dawn 10.0
FILE: product.-variant-options.liquid
(1) - ADDED VARIANT METAFIELD DEFINITION:
"Color" with content type "Color"
(2) ORIGINAL CODE (line 62):
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value -}}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
(3) REPLACED ORIGINAL CODE WITH THIS CODE:
{% if product.variants[forloop.index0].metafields.color.values and option.name == 'Color' %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}" class="swatch-label">
<span style="background-color: {{product.variants[forloop.index0].metafields.color.values}}; " class="swatch-color-ball"></span> <span class="swatch-color-name">{{ value | escape }}</span>
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
{% else %}
<label for="{{ section.id }}-{{ option.position }}-{{ forloop.index0 }}">
{{ value -}}
<span class="visually-hidden">{{ 'products.product.variant_sold_out_or_unavailable' | t }}</span>
</label>
{% endif %}
<------------------->
