Shopify Add to Cart Redirects to /cart Instead of Opening the Cart Drawer

First distinguish a redirect from a failed drawer refresh

There are three different symptoms: the browser navigates to /cart; the item is added but the drawer stays stale; or the drawer opens and then a second handler sends the shopper to /cart. Each points to a different place to investigate.

A normal product form can submit without JavaScript. If the theme’s interception fails, the browser can follow the form action. But a separate app or custom configurator may also call window.location or submit a second form after an otherwise successful Ajax add.

Trace the actual add-to-cart path

1. Open DevTools → Network and enable Preserve log.
2. Click Add to cart once. Check whether the request is a document navigation to /cart/add, an Ajax request to /cart/add.js, or both.
3. Inspect the response status and payload. A 422 means the add was rejected; a 400 can indicate an invalid payload. Do not treat every failure as a redirect problem.
4. Search the theme and app scripts for location.href, location.assign, form.submit(), and explicit /cart navigation.
5. Check whether the product form belongs to the theme, a quick-add card, an app block, or a custom configurator. Test each separately.

Watch for two submit listeners. One may add the item through Ajax while another allows a native form submit or deliberately redirects. Fix the ownership of the form rather than adding a third listener.

Use the Cart Ajax API and bundled sections

Shopify’s locale-aware endpoint is window.Shopify.routes.root + 'cart/add.js'. Use FormData from the actual product form so the request retains the selected variant, quantity, selling plan, and line-item properties. Shopify supports requesting rendered cart sections in the same add request:

const data = new FormData(productForm);
data.append('sections', 'cart-drawer,cart-icon-bubble');
data.append('sections_url', window.location.pathname);

const response = await fetch(
  window.Shopify.routes.root + 'cart/add.js',
  { method: 'POST', body: data, headers: { Accept: 'application/json' } }
);
const result = await response.json();
if (!response.ok) {
  throw new Error(result.description || 'Cart add failed');
}

Call this from the theme’s existing submit handler, which should prevent the browser’s default form navigation. Do not attach another listener if the theme already owns the form. The response includes result.sections with server-rendered HTML for supported section IDs. In some Dawn-style themes, cart-drawer.renderContents(result) handles that response; other themes need their own drawer update and open methods.

There is no universal cart-drawer section ID or JavaScript API. Confirm the actual IDs in the current theme. A missing or failed section can be null even when the cart mutation succeeded. Do not retry the add automatically just because a section failed to render, or the shopper may get duplicate items.

Likewise, a bad sections_url can return a 400 response even though a cart mutation was applied. Check /cart.js before retrying a suspicious failed request.

Sources and further reading

• Shopify.dev: Cart Ajax API
• Shopify.dev: Ajax API overview