Do not include Out of Stock items in dropdown when using Buy Button

New Member
2 0 0

Hi,

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.

Is there something we can add to the javascript code to make the variant drop down not include out of stock options and only include available options, so that "Out of Stock" never appears and only variants that are in stock appear? See attachments for reference.

 

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.

-MattScreen Shot 2020-11-24 at 2.28.33 PM.pngScreen Shot 2020-11-24 at 2.28.44 PM.png

0 Likes
Shopify Partner
16 0 1

Hey Matthewkaz, 

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 -

1.png

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  

 
 

 

ModeMagic
Featured on Shopify Staff Picks
Offering free store consultation for increased sales and conversions
Grab your limited time offer on install today!
0 Likes