We have configured a Buy Button for one of your collections to display on one of our other sites.
However, when the first variant to be displayed is out of stock, it still shows up in the options and the "Add to Cart" button changes to "Out of Stock", making it look like all of the variants are probably out of stock. But if you do select a variant that is in stock, you can then click the "Add to Cart" button.
I see in that there is 'variantInStock' at https://github.com/Shopify/buy-button-js/blob/master/src/components/product.js, but I don't know how use that within the buy button configuration (https://shopify.github.io/buy-button-js/advanced/).
Thank you very much for your help.
While I don't have a direct answer to your question, I had an observation. Since the 'Out of Stock' button appears at the bottom of the image, it may be possible that customers miss out and end up adding to the cart. A simple way to avoid this is by using product labels that highlight unique features of a product or share the stock status up-front, making it more visible to customers. Here's what it can look like -
You can do this in 5 mins with ModeMagic, a Shopify app that helps you add product labels & badges to your store in 3 steps. You can start for free with 10 free credits and upgrade based on your store need. Click HERE to install the app!
Wish you great luck with this BFCM