Drowning in 404 Errors with Shopify AJAX API: A Lifeline, Anyone?

Technical Q&A
,

Topic summary

Main issue: Persistent 404 errors when calling Shopify’s AJAX endpoint /cart/add.js.

Root causes identified: Passing a product ID instead of a variant ID; an incorrect add‑to‑cart button ID; and cases where products had no variants (cannot add product.id).

Fixes and implementation: Use a valid variant ID (e.g., product.first_available_variant.id). Correct the button ID in the Symmetry theme settings. Post JSON via fetch to window.Shopify.routes.root + ‘cart/add.js’ with an items array containing id (variantId) and quantity. Alternative query-string adds were shown. Move HTML/Liquid form into the product template, place JavaScript at the bottom of theme.js, and use the main CSS file for styling.

Guidance and references: Shopify Cart AJAX docs explicitly require variant ID. Review Dawn theme for modern AJAX and UI patterns. jQuery is optional; prefer native querySelector/fetch. “Shopify Scripts” are deprecated in favor of “Shopify Functions.” Test with publicly accessible URLs and incognito for reproducibility. Locale-aware URLs are supported via routes.root.

Outcome: Original 404 issue resolved; add-to-cart works with variants.

Open/ongoing: A separate question about 404s when making AJAX POSTs to external (non-Shopify) APIs remains unanswered.

Summarized with AI on December 23. AI used: gpt-5.
3

Hi @nuwud

I assume you know javascript code. You should be able to use this code below to add the product or variant.

let formData = {
 'items': [{
  'id': 36110175633573,
  'quantity': 2
  }]
};

fetch(window.Shopify.routes.root + 'cart/add.js', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(formData)
})
.then(response => {
  return response.json();
})
.catch((error) => {
  console.error('Error:', error);
});

You can also use this, just change the id and the quantity.

fetch('cart/add?id=44132404560157&quantity=1&id=44132404887837&quantity=1')

If you refresh the page, the HTML should update. If you want to update without refreshing, you might want to read your theme codes and see where you can insert the code.

I recommend to NOT use jquery if your theme does not support it. It will make your website slower.

I hope I helped. Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like