Disable Buy It Now button for Out Of Stock Products

Store Design

Topic summary

Goal: disable the Buy It Now button on out-of-stock products.

Recent updates: The store URL (https://teameteas.com/) was shared; theme password and theme code (main-product.liquid) have been requested but not provided yet, so no fix has been applied.

Proposed solutions:

  • Liquid (Shopify’s templating language): reuse the same condition used to show the “Sold out” state to wrap the Buy It Now (dynamic checkout) button so it only renders when the product/variant is in stock.
  • JavaScript: hide/disable the button when inventory is 0; used by some preorder/back-in-stock apps.
  • CSS: hide the button visually (quick but superficial).
  • Preorder apps: configure a preorder or “notify me” flow that automatically hides the Buy It Now button for out-of-stock items (examples mentioned: Early Bird, STOQ), and optionally capture preorders.

Open items: Provide theme password or paste the main-product.liquid code so helpers can give exact snippets. Decide whether to implement via Liquid (preferred for clean rendering) or via JS/CSS/app.

Status: Ongoing; awaiting access/code to proceed.

Summarized with AI on December 13. AI used: gpt-5.
1

How to disable the Buy It Now button for products that are out of stock?

1 Like
2

Hello,

Please share “Store URL”

Thanks!

3

We do this automatically in our pre-order app (Early Bird) using Javascript (when we show a back-order or “Notify me” button), but I think it’d be simpler to do this in Liquid if you have some theme coding knowledge.

You can find the conditions used to show the Sold out button, and copy that logic to wrap around the Buy it Now button, so it only renders it if the product is in stock.

1 Like
4

Hello @TE-A-ME

Please share your store URL and password.
So that I will check and let you know the exact solution here.

5

Hi @TE-A-ME ,

Please send me the code of main-product.liquid file, I will help you check it

6

https://teameteas.com/

7

@TE-A-ME Your best bet is modifying theme code - you can do it through Javascript or you can hide the button altogether with CSS.

IMO, if you’re considering removing the Buy it Now button, you should definitely consider using a preorder flow on the product. Most preorder apps - including STOQ, which we run full time - will automatically hide the Buy it now button on out of stock products that are configured for preorder. So not only do you have the issue of hiding it resolved, you can also get preorders on them and have a chance to get orders in ahead of any restocks. :slightly_smiling_face: