Modify Variant Picker Js in Dawn

Technical Q&A

Topic summary

A developer added a custom ‘inactive’ variant metafield to suppress certain product options in the Dawn theme’s product-variant-options.liquid template. While the filtering works on initial page load, inactive options don’t reappear when users select different variants that should make them available again.

Problem identified: Client-side JavaScript needs updating to handle the custom inactive logic dynamically.

Solution found: The relevant code is in global.js, specifically within the VariantSelects and VariantRadios classes. The key issue was that VariantRadios extends VariantSelects and overrides certain methods, so modifications must be applied to both classes to ensure the custom logic executes properly. This explained why initial console.log statements weren’t appearing.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

I’ve added a new variant metafield ‘inactive’ and am checking it in the ‘product-variant-options.liquid’ dawn theme template to suppress options which have this metafield set to true. This is working as expected when the page first loads, but if a different option is selected which matches a variant which is not inactive, the option is not reappearing.

I am assuming that this would need to be controlled by some JS logic, which will need to determine on the client if the newly selected option matches a non inactive variant. I’ve been trying to track down where the js logic is that controls the enabling and disable of options so I can add my custom requirements.

Where in the dawn theme is this controlled? In the global.js I’ve found a few places that looked promising (VariantSelects, VariantRadios) but adding console.log calls don’t show anything in the browser.

Any pointers would be appreciated!

2

Turns out global.js was the correct location to modify this logic. Just be to add the logic to VariantRadio methods if they are overriding the VariantSelects method since VariantRadio extends VariantSelects. That was the issue I was seeing and why my console logs were not being called.