Shopify problem guideJune 25, 2026

Shopify Add to Cart button keeps spinning: what usually causes it

When a Shopify Add to Cart button keeps spinning, it usually means the storefront started the cart request but something interrupted the flow before the interface could recover.

Sometimes the item was added to the cart, but the cart drawer never updated. Sometimes the add-to-cart request failed. Sometimes a JavaScript error, app conflict, subscription widget, cart drawer script, or tracking script got in the way.

The important thing is this: a spinning Add to Cart button is usually not "just a button problem." It is often a sign that the product page, theme JavaScript, cart drawer, app stack, or subscription flow needs a closer look.

Shopify product page with an Add to Cart button stuck in a loading state

The short version

If your Shopify Add to Cart button keeps spinning, the most common causes are:

  • A JavaScript error on the product page
  • The cart request fails or returns an error
  • The cart drawer does not update after a successful add
  • Duplicate Add to Cart scripts are fighting each other
  • A subscription app is not passing the right selling plan data
  • A cart upsell or drawer app is intercepting the cart flow
  • The product form is missing required data
  • The selected variant is unavailable or invalid
  • A popup, review widget, chat widget, or third-party script is interfering
  • The loading state gets triggered but never cleared

The fix depends on where the flow is breaking.

A good developer should not just remove the spinner. They should figure out why the buying flow is getting stuck.

What the shopper sees

From the customer's side, this usually looks simple:

They click Add to Cart.

The button changes to a spinner, loading state, or disabled state.

Then nothing happens.

The cart drawer may not open. The cart count may not update. The page may feel frozen. The customer may click again, refresh, or leave.

That is what makes this kind of issue important. It happens directly at the moment someone is trying to buy.

What is supposed to happen

A normal Shopify add-to-cart flow usually works like this:

01

The customer selects a variant or purchase option.

02

The product form sends the selected item to the cart.

03

Shopify returns a response.

04

The theme or cart app updates the cart state.

05

The button loading state clears.

06

The cart drawer opens, cart count updates, or the customer sees a success message.

When the button keeps spinning, one of those steps probably did not finish cleanly.

The tricky part is that the item may still be added to the cart even if the interface looks stuck. That is why the diagnosis matters.

Common cause 1: a JavaScript error stops the cart flow

A single JavaScript error can stop the rest of the Add to Cart flow from finishing.

For example, the product may successfully add to cart, but the script that opens the cart drawer or clears the loading state never runs because another error interrupted the page.

This can happen in:

Theme JavaScript Product form scripts Variant selector scripts Sticky Add to Cart scripts Cart drawer scripts Subscription widget scripts Review or popup app scripts Old code left behind by removed apps

What to look for:

  • Browser console errors
  • Errors that appear only after clicking Add to Cart
  • Errors that appear only on certain product templates
  • Errors that appear only on mobile
  • Errors tied to missing elements or old selectors

A common pattern is code looking for an element that no longer exists. The script expects a button, drawer, form, or container to be on the page, fails when it cannot find it, and the rest of the cart flow gets stuck.

Common cause 2: the cart request fails

Sometimes the Add to Cart request itself fails.

This can happen when the product form sends missing, invalid, or outdated data.

Common reasons include:

No valid variant ID Sold-out variant Variant selector and product form are out of sync Quantity is invalid Required line item properties are missing Subscription selling plan data is missing or invalid Custom JavaScript changes the form data before submission An app modifies the request in a way the theme does not expect

When this happens, the storefront should show a useful error message and reset the button state.

But in many messy themes, the error handling is incomplete. The request fails, the error gets logged, and the button just keeps spinning.

Common cause 3: the cart drawer fails after the item is added

This is one of the most common patterns.

The item may be added successfully, but the cart drawer does not update.

That can make the customer think nothing happened.

Possible signs:

Cart count does not change Cart drawer opens empty Cart drawer does not open Cart drawer shows old cart contents Cart page has the item, but drawer does not Button keeps spinning even though /cart.js shows the item

This usually means the add-to-cart request worked, but the cart UI failed afterward.

The problem may be in the cart drawer JavaScript, section rendering, app-controlled cart logic, or custom code that updates the cart count and drawer contents.

Common cause 4: duplicate Add to Cart logic

Shopify stores often collect multiple Add to Cart systems over time.

There may be:

Main product form Sticky Add to Cart bar Quick-add button Cart drawer app Bundle app Upsell app Subscription widget Custom agency code Old theme or app setup

When more than one script tries to control the same Add to Cart event, weird things can happen.

Symptoms include:

The button works sometimes but not always Mobile works differently than desktop Sticky Add to Cart works but the main button does not The cart drawer opens twice or opens empty The loading state never clears Tracking fires, but the cart does not update The same product gets added more than once

This is why "just fix the button" can become a larger theme cleanup task.

Common cause 5: subscription app data is not being passed correctly

Subscription products add another layer of complexity.

If the customer selects Subscribe & Save, the theme still needs to pass the correct subscription data into the cart.

When that handoff breaks, the Add to Cart button may spin, fail, or add the item incorrectly.

Common symptoms include:

Subscription product adds as a one-time purchase Selling plan gets lost between product page and cart Subscription discount shows on the PDP but not in cart Variant changes reset the subscription option Cart drawer does not show subscription details Upsell/cart app does not preserve subscription data The button spins only when subscription is selected

This can happen with subscription setups involving apps like Skio, Recharge, Appstle, Loop, Seal Subscriptions, Shopify Subscriptions, or custom selling-plan logic.

The app may not be the problem by itself. The issue is often how the theme, product form, subscription widget, and cart drawer are wired together.

Common cause 6: app scripts are touching the same flow

Many Shopify apps interact with the product page or cart.

That can include:

Subscription apps Cart drawer apps Upsell apps Bundle apps Review widgets Email/SMS popup tools Chat widgets Tracking and analytics scripts Page builders A/B testing tools

These tools can be useful, but conflicts happen when several of them touch the same customer flow.

For example:

A cart app intercepts Add to Cart A subscription widget modifies form data A bundle app adds line item properties A popup script changes focus or blocks interaction A tracking script attaches another click listener Old app code still runs after the app was removed

The result can feel random from the outside, but it usually has a technical cause.

Common cause 7: the loading state is never reset

Sometimes the cart request succeeds or fails correctly, but the button's loading state never gets cleared.

This is a UI state bug.

The theme might add a loading class like loading, is-loading, disabled, or aria-busy, but only remove it when everything goes perfectly.

If an error happens, or if the cart drawer update takes a different path, the button stays stuck.

This kind of issue is easy to hide accidentally because the real cart action may have already happened.

The fix should include better success and error handling, not just removing the spinner CSS.

Common cause 8: mobile-specific layout or script issues

Some Add to Cart bugs only happen on mobile.

Mobile storefronts often have extra UI:

Sticky Add to Cart bars Mobile drawers Collapsible product details App widgets Chat bubbles Promo bars Mobile-specific variant selectors

If mobile has different markup or different JavaScript behavior, it can break independently from desktop.

Common mobile symptoms:

Add to Cart works on desktop but spins on mobile Sticky Add to Cart button spins forever Main PDP button works, sticky button does not Chat widget overlaps the button Product options are hidden behind sticky UI Subscription widget is hard to tap or does not update

Mobile should always be tested separately.

What store owners can check first

Before hiring someone, you can do a few simple checks.

1. Refresh and try again in a private window

This helps rule out browser extensions or stale local state.

2. Test another product

If only one product breaks, the issue may be product-specific, variant-specific, subscription-specific, or template-specific.

3. Test desktop and mobile

If it only breaks on mobile, the issue may be tied to sticky Add to Cart, mobile layout, or mobile-specific app behavior.

4. Check whether the item actually added

After the button spins, open the cart page directly.

If the item is there, the add request worked and the cart UI probably failed.

If the item is not there, the add request likely failed.

5. Try one-time vs subscription

If the button works for one-time purchase but not subscription, the issue may involve selling plan data or subscription widget behavior.

6. Note which apps touch the product page or cart

Useful apps to mention to a developer include subscription apps, cart drawer apps, bundle apps, review widgets, popup tools, chat widgets, analytics tools, and page builders.

Do not start uninstalling apps randomly. That can make the problem harder to trace.

What a developer should check

A proper diagnosis should look at the whole Add to Cart flow.

A developer should check:

  • Browser console errors
  • Network request to the cart endpoint
  • Request payload and response status
  • Product form data, variant ID, quantity, and line item properties
  • Selling plan data
  • Button loading state
  • Cart drawer and cart count update logic
  • Section rendering or cart refresh behavior
  • Subscription widget behavior
  • App scripts attached to Add to Cart
  • Mobile-specific markup
  • Duplicate click listeners, old app code, or hardcoded scripts

The goal is to find where the flow breaks, not just patch the visible spinner.

When this is a bigger cleanup problem

A spinning Add to Cart button may be a simple bug.

But it can also be a symptom of a messy storefront.

It becomes a bigger cleanup problem when:

Multiple apps are touching the cart The theme has duplicate cart drawers The product page has custom subscription logic Old app snippets are still in the theme There are JavaScript errors across multiple templates Mobile and desktop behave differently Nobody knows which script controls Add to Cart Previous developers added workarounds instead of cleaning up the flow

At that point, fixing one button may not be enough. The store may need a cart flow review or broader theme cleanup.

Add to Cart should not feel like a gamble.

If your Shopify Add to Cart button keeps spinning, the issue may be deeper than the button itself. Start with a Shopify Detox Scan and get a practical review of the visible storefront risks.

Start with Shopify Detox Scan

What not to do

Do not blindly remove the loading spinner.

The spinner is not the root problem. It is the symptom.

Also avoid:

  • Randomly uninstalling apps
  • Duplicating the Add to Cart button
  • Adding another cart app to "fix" the current one
  • Editing theme code without a backup
  • Assuming Shopify itself is broken
  • Assuming the most recent app is automatically the cause
  • Ignoring the issue because the cart page still works

A cart bug should be handled carefully because it sits directly in the buying flow.

How Storefront Detox can help

Shopify Detox Scan is a lightweight first step if your Add to Cart flow feels fragile and you are not sure why.

It can scan the public storefront for visible risk signals like:

JavaScript errors App and script complexity Add-to-cart and cart drawer clues Subscription/cart risk Tracking overlap Heavy scripts Old app artifacts Mobile UX red flags Technical debt signals

If the scan shows deeper risk, the next step may be a Shopify Rehab, Cleanup Sprint, or focused cart/subscription debugging.

The goal is not to drown you in scanner output. The goal is to separate real risk from noise and give you a responsible next step.

Add to Cart should not feel like a gamble.

If your Shopify Add to Cart button keeps spinning, the issue may be deeper than the button itself. Start with a Shopify Detox Scan and get a practical review of the visible storefront risks.

Start with Shopify Detox Scan

FAQ

Frequently asked questions

Why does my add to cart button keep spinning?

Usually because the cart request, cart drawer update, product form, app script, subscription widget, or theme JavaScript did not finish cleanly. The spinner is the visible symptom, not always the root cause.

Does this mean Shopify is down?

Usually no. If the issue happens only on your store, certain products, certain devices, or certain purchase options, it is more likely a theme, app, or storefront implementation issue.

Why does the item add to cart but the drawer stays empty?

That usually means the add-to-cart request worked, but the cart drawer UI did not refresh correctly. The issue may be in the drawer script, section rendering, cart app, or custom theme code.

Why does add to cart work for one-time purchase but not subscription?

That often points to subscription selling plan data, product form behavior, subscription widget integration, or cart drawer handling.

Should I uninstall apps to test it?

Not randomly. Apps can leave code behind, and uninstalling the wrong thing may create more confusion. It is better to inspect what is loading and how it interacts with the cart flow.

Can Storefront Detox fix this?

Possibly. Shopify Detox Scan can help identify visible storefront risks first. If the issue needs deeper access, the next step may be a Shopify Rehab, Cleanup Sprint, or focused debugging engagement.