Shopify OS 2.0 / Craft theme – variant metafield not updating on variant change

Technical Q&A
, , ,
1

I’m working on a Shopify store using the Craft theme with .
I have a variant-level metafield (e.g. custom.availability with values in_stock / preorder) that needs to update dynamically when the customer switches variants (color / size).

What I’ve tried:

Liquid only (product.selected_or_first_available_variant.metafields…) → works only on page load, not on variant change.

JS listeners in global.js:

variant:change event → not fired in Craft.

document.addEventListener(‘change’, …) → not fired by .

Fetching /variants/{id}.js manually → works in isolation, but I can’t reliably hook into the variant change event without hacks.

Editor dynamic sources → variant metafields are not available in the theme editor.

Goal:

Update a small availability message (“In stock” / “Ships in 2-weeks”) when the variant changes

Without duplicating products

Ideally without fragile JS hacks

Is there a supported or recommended way to listen to variant changes in Craft / OS 2.0, or is custom JS the only option here?

Thank you!

2

Hi fmtzmuriel. I installed Craft on my own dev store to take a look for you.

Not sure how heavily you’ve customised your theme but with a fresh install of Craft, I’m able to access the the variant change event on line 1069 of global.js inside the connectedCallback of the variant-selects web component.

See GIF below.

Clipboard-20260108-013741-485

You should be able to ‘hook into the variant change event’ here.

To answer your last question: yes, I believe custom JS is the only option here but shouldn’t be too hard to implement by someone who understands the code.

Chris

3

Hi Chris, thanks for your reply!
The variant change event is loading but what isn’t is switching from “in stock ready to ship” to “will be ready to ship in 2 weeks”.
I tried a variety of things, but nothing worked.
In the meantime, I’m using the “Vaiant Description OMG” app that I found in one of the community posts, and so far it’s working!

I’ll consider hiring a Shopify dev once my MVP is live. Not sure I can afford it now.

Fabiola

4

I’ve shared some solutions for this, say:

5

Hi fmtzmuriel.

Apologies. I thought Shopify would notify me of your reply but they didn’t. Only seeing now that I logged back on to check.

In regards to your issue, how I’d approach it is to loop through all variants, output the custom.availability metafield for each in a JSON object. Then you can match the metafield value against the variant id and show the correct text on variant switch.

[
  {% for variant in product.variants %}
    {
      "id" : {{ variant.id }},
      "availability" : "{{ variant.metafields.custom.availability }}"
    }
    {% unless forloop.last %},{% endunless %}
  {% endfor %}
]

I’d recommend against using an app for something so basic.

Did you need help writing the Javascript?