Color Picker for Product in Product List

Color Picker for Product in Product List

Rostislav333
Shopify Partner
9 0 0

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>

 

Reply 1 (1)

Shopaw
Visitor
3 0 0

Hello, Would you be willing to consider using a third-party app directly to achieve the option you want, which also ensures that there will be no problems in the shopping cart?

 

https://apps.shopify.com/shopaw-product-builder

 

Shopaw_0-1704255057064.png