How to fix incorrect color variant display with multiple size options?

Store Design
1

Hello,

I am following the video https://youtu.be/dtXg-OlL3qo for color metafield it is working fine for just 1 combination of variant like i have Purity option and size option and 3rd one is color option so when i added 2 option for purity and 3 option for color and 1 option for size the color variants looks fine in frontend but when i am adding another number in size option the color variant is not showing correct. attaching here screenshot also.

https://cdn.shopify.com/s/files/1/0674/7665/2346/files/this_is_product_backed_when_size_option_is_only_single_so_in_frontend_color_variant_is_showing_correct.png?v=1673682047

https://cdn.shopify.com/s/files/1/0674/7665/2346/files/This_is_product_backend_when_size_option_added.png?v=1673682047

2

Hello @SK0809

Can you kindly share your store link and password with me? I will check it and suggest you a solution if possible.

3

Hello @amanbatra

Here is the link https://1xupneahpbhyq62p-67476652346.shopifypreview.com/products_preview?preview_key=32bf4b7dd8699114bcd85a40761bb41f

password : Evol123

4

Hello @SK0809

This is coding bug & i need to check in code, so better you can provide access. Also why you are managing the colors from metafields,
You can code the color option like this
style=“background-color: {% if value == ‘gold’ %}#b76e79{% elsif %}color2{% elsif %}color3{% endif %}”
https://prnt.sc/yeLoTXD1I_Qe

5

Hello @amanbatra

I will follow the code but i have a doubt that product image will change by clicking on the variant ?

6

It’s just a CSS code and there will be no effect of this on the already working functionality. You can test this by placing the code and can let me know if there are further issues.