How to add an item to the cart programmatically using API?

Technical Q&A

Topic summary

The discussion centers on programmatically adding items to a Shopify cart using the AJAX API.

Initial Solution:

  • Use the /cart/add.js endpoint with POST method
  • Pass variant ID and quantity in the request payload
  • Reference the official Shopify AJAX API documentation

Implementation Issues:

A user encountered a problem where their fetch request to /cart.js wasn’t logging “Success” before displaying cart data. The solution involved:

  • Adding response validation with res.ok
  • Removing unnecessary JSON.stringify() from console output
  • Implementing proper error handling with catch blocks

Unresolved Problem:

The most recent issue involves adding variants from different products simultaneously. While adding single or multiple variants of the same product works, attempting to add variants from different products (e.g., variant v1 of product X and variant v1 of product Y) results in a “422 Cannot find variant” error.

Status: The thread remains open with the multi-product variant addition issue unresolved. No solution has been provided for the 422 error when adding items from different products.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi,

We’re creating a landing page for a marketing partner. We’ll add a button named “Add to Cart” in the landing page. How to add an item to the cart programmatically, from this page? Is it done the way explained at this Shopify dev doc https://shopify.dev/docs/api/ajax/reference/cart

2

  1. et the cart token or create a new cart if one doesn’t exist yet. You can use the AJAX API endpoint ‘/cart.js’ with the HTTP method GET to retrieve the cart token or POST to create a new cart.

  2. Use the AJAX API endpoint ‘/cart/add.js’ with the HTTP method POST to add an item to the cart. Pass the variant ID and the quantity as parameters in the request payload.

    Example payload:

{
  items: [
    {
      id: 'variant_id',
      quantity: 1
    }
  ]
}
3

Thank you.

Can you recommend a way/app to build a landing page for a marketing partner to drive traffic into our site? The page should have a Add to Cart button, and look similar to a product page of our site.

4

Hi,

I began writing API code just by trying to get cart as below. It prints the array of items in the cart. However, it is not printing “success” before printing cart array.

var url = ‘/cart.js’;
fetch(url, {method: ‘GET’})
.then(res => res.json())
.then(response => {
console.log(‘Success:’, JSON.stringify(response))
const cart = response;
// We now have access to Shopify cart object
// console.log(cart);
// Store cart items array
.catch(error => console.error(‘Error:’, error));
});
I’m not sure why this is happening. Below is the link to development theme in case you want to check it.

https://byoscience.myshopify.com/?preview_theme_id=122254786606

5

var url = ‘/cart.js’;
fetch(url, {method: ‘GET’})
.then(res => {
if (!res.ok) {
throw new Error(‘Network response was not ok’);
}
return res.json();
})
.then(response => {
console.log(‘Success:’, response);
const cart = response;
// Now you can use the cart object
})
.catch(error => {
console.error(‘Error:’, error);
});

  • I added a check to see if the response from the server is okay using res.ok. If it’s not okay, an error is thrown.
  • Removed JSON.stringify() from the console.log() statement because response is already an object.
  • Added a catch block to handle any errors that may occur during the fetch operation.

With these changes, your code should now log “Success:” followed by the cart data if the request is successful, and it will log any errors encountered during the fetch operation.

6

For adding a single variant or multiple variants of same product, it is working fine. When comes to adding variants (variant v1 of product X and variant v1 of product Y) of different products, it throws 422 Cannot find variant error. Why does this happen so? How to add variants of different products using /cart/add.js endpoint??