How to autoselect the second available variant on the change of the first variant in product page

Store Design
1

Hello All,
I am a Shopify developer and have a question related to the product page and its variants.

I have a product with 7 colors and 2 size options From 1 to 6 colors are available for small size and only the 7th color is available for the medium sizes.
Now you know that if user select medium size and switch to all of the 1 to 6 colors it will show unavailable/sold out.

Kindly check the screenshot for a better understanding. Screenshot by Lightshot

Can we make these two fields connected?
If the user select 1 to 6 color the second variant also changes automatically and for 7th also the second variant change by itself. How can I change the second variant/dropdown based on the first variant,/dropdowns change. So that user does not show that the product is unavailable.
How to make these two variants connected?

I guess I should make some change in liquid code or maybe in javascript for when the first variant/color is selected. I have been not able to find any solution on the internet. And I am stuck on it and any help or information on it will be highly appreciated.

Thanks a lot to the community in advance.

2

Hi @sbdev

For that need custom development with Js code cant send any step here.

Its work based on theme variant select Callback function,

1 Like
3

Hello Brijesh,

Thank you for your response. Yes, I have also found that it requires a javascript select callback function. Can you or anyone provide any reference of that codebase which will go to make this work? Any link, blog, example, or any code base will be helpful.

Thanks.