Broke up product-form for UX purposes, and now the variants don't talk to each other perfectly.

New Member
4 0 0

A bit more of a complicated issue here, but I broke up my product-form for UX purposes. See images below for an example of what I did.

For the most part, it all works fine. The only issue now is when selecting variants, the unavailable ones will not update after selecting new variants. For example, iPhone 12 Pro is available in black, but iPhone 11 is not. When the page loads on iPhone 12, black is available, but after selecting iPhone 11, the black is still "available" even though there is no inventory. And similar, other colours iPhone 11 is available for don't update as available. Is there a way to fix these so they talk to each other again?


Screen Shot 2021-02-24 at 4.05.33 PM.png


Screen Shot 2021-02-24 at 4.05.45 PM.png

(some swatches are missing, haven't updated those assets yet).  

Shopify Expert
2926 143 1021

Hi Brett, 

Different themes do it in a different ways, and it may depend on theme settings. And then there are theme mods.
So it's not possible to suggest anything without even knowing your them. Seeing it first-hand will be even better.

It may still be beneficial to show out of stock variants, say if you want to add back in stock notifications, or want your clients see images and pricing for them...

If you want to hide choices for sold-out variants you'd need to turn on/implement linked option code -- see And you may need developers' help if your theme does not have it.

Want to hire me to tweak a theme? Mail me at!
My post solved your problem? Like it!