A user is attempting to detect when product options change on a page using BookThatApp (BTA), a third-party booking widget. The variantChanged callback from BTA’s documentation only fires on page load, not when users select different options like height from a dropdown.
Attempted Solutions:
Implemented BTA’s recommended callback approach
Tried the theme’s (Warehouse) native variant:change event listener
Neither method triggers when options are changed
Key Issue:
BTA replaces the theme’s standard product form section, which may prevent normal variant change events from firing. The height selector appears to be part of BTA’s widget rather than a standard Shopify variant.
Current Status:
BTA support directed the user back to their documentation (the already-tried approach)
Community members suggest the problem stems from BTA’s code coming from an iframe
One suggestion recommends switching to Easify Product Options app as an alternative
Unresolved: No working solution identified for detecting option changes with the current BTA implementation
Summarized with AI on November 14.
AI used: claude-sonnet-4-5-20250929.
I have a product which uses BookThatApp (BTA) to let a user select a date, then several other product options are available before they can click “Book Now” to add the product to the cart. I am trying to detect when a product option is changed. For instance, if they select a height from the drop-down.
I added the script below to my theme.liquid before rendering BTA as per their documentation. However, the console.log only fires on page load and nothing is logged when I select a different option value on the screen. Is there something missing in my approach to this that I’m not understanding?
Similarly, Warehouse and Prestige theme also use same:
document.addEventListener('variant:change', function(event) {
let variant = event.detail.variant; // Gives you access to the whole variant details
let previousVariant = event.detail.previousVariant; // Gives you access to the details of the previously selected variant
let product = event.detail.product; // Gives you access to the whole product that the variant belongs to
let form = event.target; // The form that triggers the change
});
I’ll recommend to go through your theme documentation then find the ‘javascript for developers’ or similar FAQ.
Thank you for your response. I am using Warehouse which stores their documentation in custom.js. It includes a similar snippet to what you suggested. I first confirmed that custom.js was indeed executing by hitting a breakpoint before the Event Listener. I then tried setting a breakpoint to confirm whether it fired when I changed an option but it was not hit. Neither was a console.log - even on page load.
However, the reason I was using the snippet in my original question is because BTA “replaces the product form section found on your theme’s product page” and that snippet was from their docs.
An alternative solution worth considering is the Easify Product Options app. This app allows you to seamlessly create custom options such as date selection and booking information (height, weight, shoe size…), directly on your product page. Here’s an example :
The height is an option from the BookThatApp (BTA) 3rd party widget. However, the snippet used for the event handler is what they provided in their docs.
:
