Shopify themes, liquid, logos, and UX
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. https://prnt.sc/v0b7xa
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.
Hi @sbdev
For that need custom development with Js code cant send any step here.
Its work based on theme variant select Callback function,
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.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024