CheckoutWorks Shopify Partner

We fix Shopify bugs at a flat $49 per fix. Most fixes within 24 hours.

Fix My Bug →

Add to Cart Button Not Working on Shopify? Causes and Fixes

·Johnny Chen Founder & Shopify Developer at CheckoutWorks
Cover reading “ADD TO CART NOT WORKING?” beside an illustrated product page, simulated Console error, and empty cart.

If your Shopify Add to cart button does nothing, first find a repeatable pattern. Try another variant and product, then check the cart page to see whether the item was added despite a stale drawer. If the add really fails, compare the browser error at the moment of the click with a fresh copy of your theme and a controlled app test. Each result points to a different fix.

Find the conditions that trigger the failure

Start with the affected product in a private browser window. Select a variant, note the button label, click once, and open your store's /cart page. If the item's quantity increased, the add worked and the cart drawer or count failed to refresh. If the item did not appear, keep the exact error message or describe what happened: a disabled button, a spinner, a page reload, or no visible response.

Change one condition at a time and repeat the same click:

  • Variant: Does one option fail while another option on the same product works?
  • Product and page: Does another product work? Does a collection-page quick-add button behave differently from the product-page button?
  • Country and language: Switch using the storefront's country and language selectors, where available. Record the selected market and language with each result.
  • Browser and device: Compare a private window, another browser, and mobile. If only one browser fails, test its extensions or site data before changing the store.

Record the product URL, selected variant, country, language, browser, and result for each test. A pattern limited to one variant suggests a product or variant-state issue. A pattern limited to one country or language suggests a market-specific setting, translation, app, or theme path that needs closer inspection. These are clues, not proof of the cause.

For a single failing variant, confirm the product is active and published to the Online Store, and check inventory at a location that fulfills online orders. Shopify blocks a tracked, out-of-stock item by default. Enabling continued selling changes the selling policy; it should not be used to hide incorrect inventory. If the button reads Sold out while admin lists stock, see why a Shopify product shows sold out but has inventory. If the button is absent, check whether the assigned product template hides its Buy buttons block.

Watch the Console when the click fails

Open the product page in your browser's Developer Tools and select Console. Clear existing messages, reload the page, and note any red errors that appear before touching the button. Then click Add to cart and check whether a new red error appears at the same time as the failure. Take a screenshot that includes the message and the affected product page, or copy the exact message to share with a developer or app provider.

If the error was already there before the click, it may be unrelated. If no new error appears, the button can still be broken. Repeat the same test under the variant, country, language, or browser conditions that trigger the problem. The pattern and the timing of any error are more useful than a red message on its own.

Horizon test product page with size L selected and a simulated Add to cart error in Chrome Console

Controlled demonstration in a Horizon test theme. The Console error was simulated; it does not show a native Horizon bug.

Compare your theme with a fresh installation

First duplicate the current theme as a backup. That copy includes its existing customizations, so it is not a clean comparison. Then add a fresh, uncustomized copy of the same theme to your theme library and preview it without publishing. Shopify also recommends testing another theme when the issue persists across browsers. If a fresh copy of the exact version is unavailable, record the version difference before comparing results.

Fresh Horizon 4.2.0 theme listed as an unpublished draft in the Shopify theme library

A newly added Horizon 4.2.0 draft provides a comparison theme. This image shows the setup, before the Add to cart test.

Use the same product, variant, country, language, browser, and cart state in both previews. Check the Console again. If the issue appears only in your current theme, inspect recent theme edits, settings, and app embeds. If it also appears in a fresh copy of the same theme but works in a different theme, ask the theme developer to review it. If it appears across themes, continue checking apps and store-level product settings. A fresh theme can have different templates and app settings, so compare those before treating the result as proof.

Test whether an app causes the conflict

Use the duplicate theme for this test. In its theme editor, turn off all active storefront app embeds and hide app blocks, recording their original states first, including any market-specific settings. Shopify lets you control app embeds in the theme editor. Preview the duplicate with the same failing conditions after the change.

If Add to cart works with those app features off, turn them back on one at a time and retest until the failure returns. Send the reproduction steps and any Console error to the responsible app provider. If nothing changes, the test has not ruled out every app: some apps add code through theme edits or other integrations that a visible embed switch does not control. Avoid uninstalling every app as a first test, because that can interrupt unrelated store functions and may leave code behind.

Fix the confirmed cause and verify it

If the evidence points to a recent theme edit, compare that change with the last working version on a duplicate theme. Shopify's code editor Timeline may show earlier file contents, but restoring a version replaces the whole file. Preserve any later changes you still need and test the smallest correction. If a custom product form is sending the wrong variant, repair the selection and form logic; do not paste a generic Add to cart script that may bypass selling plans, line item properties, or the theme's cart behavior.

For a code or app conflict that needs deeper diagnosis, we can trace the failing path through our Shopify Bug Fix service. If you are comparing options first, see what a Shopify bug fix costs.

After a fix, repeat the original failing combination of product, variant, country, language, browser, and device. Test another available product and a sold-out variant too. Check the correct item and quantity on the cart page, and confirm the drawer and count update without refreshing. Review the change in the duplicate theme, then repeat the critical checks on the published storefront after it goes live. Before a major sale, our Shopify BFCM checklist covers these checks along with discounts, sold-out variants, and purchase tracking.

Get Shopify help _

Add to cart button broken?

We can find and fix the cause.

$49 USD

ONE FOCUSED FIX · FIXED OR REFUNDED

Fix my add to cart button