How does the 'add to cart' button gray out when stock is out?

Technical Q&A
1

Hello,

I was wondering if someone can breakdown for me how the “add to cart” button grays out when the variant does not have any stock?

I am currently learning to become a shopify dev and was wondering if someone can help me out? Also, if you have any helpful resources on how you learned liquid please drop the links in the comment section, that’ll be much appreciated!

2

Hi @Fern21 ,

You need to add JS code to check variant and then add disabled for button, it will help button become gray.

Code:

if (variant && variant.available) {
in stock
} else {
out stock
}

You can also find documents at: https://shopify.dev/api/liquid/objects

Hope it helps!

If you find my answer helpful for you, please mark it as a solution. Thank you and good luck