In Shopify how to add multiple products to cart with varying quantities via url

Update

There was an update to the AJAX API that allows now to add multiply variants with different quantities with the same request.

Example:

fetch('/cart/add.js', {
    method: "post",
    headers: { 'content-type': 'application/json' },
    body: JSON.stringify({
        items: [
            {
                id: 33116502556724,
                quantity: 5
            },
            {
                id: 33116502589492,
                quantity: 3
            }
        ]
    })
})

Old Answer

You can’t use the quantity as a separate item for each variant.

You have a few options but they all have some cons.

Please refer to this doc for the requests: https://help.shopify.com/en/themes/development/getting-started/using-ajax-api

Using /cart/add.js

You can create multiply AJAX request and add each separate item as a new AJAX request.

Pros:

• it won’t affect the products in the cart if they are already present

Cons:

• Too many AJAX requests

Using /cart/update.js

You can make a single request and pass different quantity to each variant.

Pros

• Save all variants with a single AJAX request with different quantity

Cons

• You will overwrite the quantity of the product if they are already added in the cart

So the solution may be to get the cart.js response check if the current variants are present and if they are then make an update.js while adding the quantity to the existing one. So it’s not so straightforward.

I can’t think of an easier solution but at the end you might need a minimum of 2 AJAX calls to add a different quantity.