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):
{{ value -}}
{{ ‘products.product.variant_sold_out_or_unavailable’ | t }}
(3) REPLACED ORIGINAL CODE WITH THIS CODE:
{% if product.variants[forloop.index0].metafields.color.values and option.name == ‘Color’ %}
{{ value | escape }}
{{ ‘products.product.variant_sold_out_or_unavailable’ | t }}
{% else %}
{{ value -}}
{{ ‘products.product.variant_sold_out_or_unavailable’ | t }}
{% endif %}
<------------------->