Shopify Add to Cart Button Not Working? 10 Fixes That Actually Work

There is one bug that turns a normal Tuesday into a very bad Tuesday: a customer clicks Add to Cart and nothing happens.

No cart drawer. No little number ticking up in the corner. Just a button that spins forever or sits there looking clickable while doing absolutely nothing. Meanwhile your ads are still running, your traffic is still coming in, and every single one of those visitors is bouncing.

I have seen store owners lose two full days of sales to this before they even noticed. The traffic looked normal. The Shopify dashboard looked normal. Only the orders were missing.

The good news is that this is almost never a mystery. The Add to Cart flow on Shopify has maybe six or seven moving parts, and the problem is always sitting in one of them. This guide walks you through all of them in the order that actually saves time, starting with the checks that take thirty seconds and ending with the ones that need a bit of code.

First, Figure Out What Kind of Broken You Are Dealing With

Before you touch anything, describe the symptom out loud. Seriously. The fix depends entirely on which of these you are seeing:

The button is greyed out or disabled. Usually inventory or variant related.
The button is missing completely. Usually product status, price, or publishing.
You click and nothing happens at all. Usually JavaScript.
The button spins forever. Usually a failed cart request or an app conflict.
The item does get added, but you only see it after a refresh. Usually a cart drawer or theme section problem.
It only breaks on mobile. Usually CSS, an overlay, or a script loading too slowly.
It only breaks on some products. Usually variant or inventory data on those specific products.

Write down which one it is. Now you can stop guessing and start eliminating.

Fix 1: Rule Out Your Own Browser Before You Blame Your Store

This feels too obvious to include and it is still the reason a good percentage of these panics end in nothing.

Open your store in an incognito window. Then try a different browser. Then try your phone on mobile data instead of wifi. If Add to Cart works in incognito but not in your normal window, your problem is a cached script, a stale cookie, or a browser extension. Ad blockers and privacy extensions in particular love to break cart requests, because they see anything that looks like tracking and shut it down.

Also clear your Shopify theme cache by making any tiny edit and saving, then reload. Shopify serves cached assets aggressively, and if you recently edited theme code, you may be looking at the old version while your customers see the new one.

If it fails in incognito, on a second browser, and on mobile, then it is real. Keep going.

Fix 2: Check Inventory at the Variant Level, Not the Product Level

This is the single most common cause of a greyed out or missing Add to Cart button, and the trap is that people check the wrong place.

Every variant has its own inventory setting. A product can show 400 units in stock overall while the specific variant a customer selected sits at zero. Your theme reads the selected variant, sees no stock, and disables the button. From the customer’s side it looks like the whole store is broken.

Here is what to check:

Go to Products, open the product, and click into the individual variant that is failing.
Look at the Inventory section. Is Track quantity on? If it is on and the quantity is zero, the button will be disabled.
If you want to keep selling anyway, enable Continue selling when out of stock.
Check inventory per location. If you have multiple locations and the stock only exists at a location that is not enabled for your online store, Shopify treats it as unavailable.

Multi location inventory catches a lot of people. The product looks in stock in the admin because you are seeing the total across all locations, but your online store sales channel is only pulling from one of them.

One more thing on this: if a third party app manages your inventory, such as a print on demand or dropshipping tool, the Track quantity toggle may be greyed out entirely in Shopify. In that case the app is the source of truth, and you need to fix the stock inside the app, not in Shopify.

Fix 3: Confirm the Product Is Active, Published and Priced

If the button is missing entirely rather than disabled, this section is probably your answer.

Shopify quietly hides the buy button in a few situations that have nothing to do with code:

Product status is Draft or Archived. Only Active products get a working buy button on the storefront.
The product is not published to the Online Store sales channel. Check the Publishing box on the product page and make sure Online Store is ticked.
The price is 0.00 or blank. A lot of themes suppress the Add to Cart button on zero priced items because Shopify does not treat them as purchasable through the normal flow. If you are running a free sample or a gift, set the price to a token amount and discount it, or handle it through a different mechanism.
The product is excluded from a market. If you use Shopify Markets and the product is not available in the visitor’s country, the button can disappear for them while looking perfectly fine to you.

That last one is sneaky. Test with a VPN set to the country your customers are actually browsing from.

Fix 4: Check If Your Store Password Is Still On

If your store is still password protected, some themes disable interactive elements behind the password page, and preview links can behave oddly. This mostly bites new stores that are testing before launch and cannot understand why the cart does nothing.

Go to Online Store > Preferences and check the password protection setting. If you are still in development, test through the theme preview rather than the password page, and remember that a few apps do not inject their scripts at all on password protected stores.

Fix 5: Open the Console and Read the JavaScript Errors

This is where most people get nervous and it really is not that bad. You do not need to understand the code. You just need to read the red text.

Right click anywhere on your product page, choose Inspect, and click the Console tab. Reload the page. Then click Add to Cart and watch what appears.

What you are looking for:

Red error messages. Copy the whole thing. Even if it means nothing to you, it will mean everything to a developer or to an app support team.
A filename in the error. If it says something like global.js or product-form.js, the break is in your theme. If it says a filename with an app name in it, you have found your culprit.
Errors that appear the moment the page loads, before you click anything. When JavaScript throws an error early, everything after that point in the file stops running. That is why you sometimes see the cart button, image zoom, the mobile menu and the search dropdown all fail at once. One broken script took the whole page down with it.

Now switch to the Network tab, click Add to Cart, and look for a request to /cart/add.js. If you see it and it returns a 200 status, the item genuinely went into the cart and your problem is purely visual, which points you to Fix 8. If the request never fires, the button click is not being handled at all. If it fires and returns a 4xx or 5xx error, click it and read the response message, because Shopify usually tells you exactly what went wrong in plain English.

Fix 6: Hunt Down App Conflicts and Leftover App Code

Apps are the number one cause of the “it worked yesterday” version of this problem.

Anything that touches the product page can break the cart: upsell apps, bundle apps, subscription apps, product option apps, sticky cart bars, currency converters, review widgets, quiz apps, page builders. They all inject JavaScript, and when two of them try to control the same button, one of them loses.

Work through this:

Think back to what changed. Did you install anything in the last week? Did an app auto update? Did you change a plan?
Disable app embeds one at a time. Go to Online Store > Themes > Customize > App embeds and toggle them off individually, testing the cart after each one. This is tedious but it isolates the problem faster than anything else.
Check for orphaned code from uninstalled apps. This one causes real damage. When you uninstall an app, its script tags and theme edits do not always get removed. You are left with code calling a service that no longer exists, which throws an error and takes the rest of your JavaScript down with it. Search your theme.liquid file for script tags that reference apps you no longer use and remove them.
Watch out for two apps doing the same job. Two upsell apps, or an upsell app plus a theme built in upsell, will fight over the cart. Pick one.

This is a good moment to be honest about your app stack. Every app you install is another script running on your product page and another thing that can break. If you are running four separate apps to cover your order flow, consolidating them into one tool that was built to handle those jobs together is often the real fix. One script beats five all competing for the same button.

Fix 7: Inspect the Product Form and Button Markup

If you have ruled out apps and the console is pointing at a theme file, it is time to look at the code. Always duplicate your theme before editing anything.

Go to Online Store > Themes > Edit code and open your main product section, usually sections/main-product.liquid or something similar depending on your theme.

Things that commonly go wrong here:

A broken or missing form tag. The Add to Cart button must sit inside a form created with {% form 'product', product %}. If a past edit moved the button outside that form, or if a closing tag got deleted, the click has nowhere to go.
A missing variant ID input. The form needs a hidden input carrying the selected variant ID. If the variant selector is not updating that value, Shopify does not know what to add.
The button type is wrong. It needs type="submit" and the name="add" attribute. A plain button with neither does nothing.
A disabled attribute stuck on permanently. Some themes add disabled based on availability logic, and a bad edit can leave it applied no matter what.
Nested forms. If an app or a past edit wrapped a second form around the product form, browsers will not handle it correctly. HTML does not allow one form inside another.

If your theme is more than a year or two old, check whether an update is available. Older themes sometimes break when Shopify changes something on their end, and running an outdated version means you are missing fixes that already exist.

Fix 8: Fix the Cart Drawer When Items Add But Nothing Shows

This is the version where the product actually does go into the cart, but the customer sees no confirmation until they refresh the page. From their side it looks identical to a broken button, so they click again, add three of the same thing, get confused, and leave.

The cause is usually that your theme cannot find the element it needs to update. Shopify’s cart drawer works by re-rendering specific sections of the page after the add request, and it identifies them by ID. Dawn and most modern themes use cart-icon-bubble and cart-notification for this. If you are on a heavily customised or older theme, or someone rebuilt the header, those IDs may not exist.

To fix it, open your header section and make sure the element containing the cart count has a unique ID, then confirm the theme’s cart JavaScript is referencing that exact ID. If you are not comfortable doing this, this is a reasonable point to hand it to a developer, because it is a quick job for someone who knows the theme.

Also check whether you have both a cart drawer and a cart notification popup enabled at the same time. Some themes let you pick one, and having both configured can cause neither to appear.

Fix 9: Look for Invisible Overlays Blocking the Click

If the button looks perfect, the console is clean, and nothing happens when you click, something may be sitting on top of it.

This happens more often than you would think. A sticky announcement bar, a cookie banner, a chat widget, a promotional popup, or a badly positioned sticky Add to Cart bar can end up covering the real button with a transparent layer. You are clicking the overlay, not the button.

To check, right click directly on the Add to Cart button and choose Inspect. If the element that gets highlighted in the code panel is not your button, you have found your overlay. Look at its z-index and position values, or just disable the app that created it and test again.

This one is heavily mobile specific. A layout that behaves on a desktop screen can collapse on a 375 pixel wide phone and shove elements on top of each other. Always test on a real phone, not just a resized browser window.

Fix 10: Test With a Clean Copy of Dawn to Isolate the Cause

When you have tried everything and you still cannot tell whether the problem is your theme or something deeper, this test settles it.

Install a fresh copy of Dawn from the Shopify theme store. Do not publish it. Preview it, go to the same product, and try Add to Cart.

It works on Dawn? Your theme or its customisations are the problem. Now you know where to focus, and you can either restore an earlier backup of your theme, reinstall a clean copy of your theme, or hand it to a developer with a clear brief.
It fails on Dawn too? The problem is not your theme. It is product data, an app embed that runs across all themes, a Markets setting, or something on Shopify’s end. Check the Shopify status page, then contact Shopify Support with everything you have gathered.

Either way you have cut the problem in half, and that is worth the ten minutes it takes.

Bonus: When the Cart Is the Problem, Not the Button

Here is something worth sitting with once you have the button working again.

Every one of the fixes above exists because the standard Shopify buying flow has a lot of steps. Product page, add to cart, cart page, checkout, contact info, shipping, payment. That is a lot of surface area for something to break, and it is a lot of clicks for a customer who already decided they wanted the thing.

For stores selling cash on delivery, that flow is worse than unnecessary. Your customer is not entering card details. They do not need a payment step. Asking them to walk through a full multi page checkout just to type a name and a phone number is friction you are choosing to keep.

This is why direct order forms have taken over COD heavy markets. Instead of Add to Cart, the customer sees a short form right on the product page: name, phone, address, done. Fewer steps, fewer scripts, and dramatically fewer places for something to silently fail.

If you go that route, look for a form that also handles the jobs you would otherwise bolt on separately: upsells and quantity offers at the point of decision, OTP phone verification and IP blocking to cut fake orders and reduce RTO, and clean pixel tracking to your ad platforms.

That last one matters more than people expect. When your cart flow breaks, your pixel data breaks with it. Meta stops seeing conversions, your campaigns start optimising toward the wrong signals, and your cost per acquisition drifts upward for weeks after the technical problem is fixed. A broken Add to Cart button stays expensive long after you repair it.

A Quick Prevention Checklist

Once you are back up, spend twenty minutes on these so you do not repeat this week:

Duplicate your theme before every edit. A backup that takes ten seconds to create can save you a day.
Install apps one at a time and test the full product to checkout journey after each one.
Uninstall apps you are not using, and check theme.liquid for leftover script tags afterwards.
Set up an uptime or checkout monitor that places a test order automatically. If you only find out about broken carts when a customer emails you, you are finding out too late.
Test on a real phone every time you change the product page. Most of your traffic is mobile and most of these bugs are mobile.
Watch for the silent signal: sessions holding steady while add to cart rate drops. That gap is your early warning system, and it shows up in Shopify Analytics before anyone complains.

Frequently Asked Questions

Why is my Shopify Add to Cart button greyed out? Almost always inventory. The specific variant selected is out of stock, or stock only exists at a location that is not enabled for your online store. Check inventory at the variant level rather than the product level, and enable Continue selling when out of stock if you want to keep taking orders.

Why does my Add to Cart button spin forever? The cart request is being sent but never completing, or the JavaScript that should close the loading state has crashed. Open the browser console and the Network tab, look for the /cart/add.js request, and check whether it returns an error. This pattern very often points to an app conflict or broken theme JavaScript.

Why does Add to Cart only work after I refresh the page? The item is being added correctly, but your theme cannot update the cart display without a reload. This is usually a missing or renamed section ID in your header, such as cart-icon-bubble. It is a theme code fix rather than a settings fix.

My Add to Cart button disappeared completely. What happened? Check that the product is Active, published to the Online Store sales channel, and has a price above zero. If all three are correct, check whether Shopify Markets is excluding the product from the visitor’s country.

Can an app break my Add to Cart button? Yes, and it is one of the most common causes. Upsell apps, product option apps, page builders and sticky cart bars all inject JavaScript into the product page. Uninstalled apps can also leave behind code that keeps throwing errors. Disable app embeds one at a time to find the offender.

Do I need a developer to fix this? Usually not. Fixes 1 through 6 are all settings and testing, no code required, and they solve the large majority of cases. Only theme code edits and cart drawer section IDs really call for a developer, and by that point you will be able to tell them exactly where the problem is instead of paying someone to search.

Wrapping Up

A broken Add to Cart button feels catastrophic in the moment, but it is a solvable problem with a short list of suspects. Work top to bottom: your browser, then inventory, then product status, then the console, then apps, then theme code. Do not start by editing random Liquid files, because trial and error edits usually create a second problem on top of the first one.

And once it is fixed, take a minute to ask whether the flow itself is serving you. If you are selling cash on delivery, every step between “I want this” and “order placed” is a step where you can lose the sale, whether from a bug or just from impatience. Cutting that journey down to a single form on the product page removes the failure points instead of repairing them.

You can try Neo COD Form & Upsell free on the Shopify App Store and see how a shorter path to purchase performs against your current setup.