Update Line Item Quantity

Description

The updateLineItemQuantity() action updates the quantity of a specific item in the cart.
It’s ideal for implementing “+ / –” quantity controls inside custom cart UIs or product pages.
Once updated, the cart automatically syncs and emits a cartUpdated event.

Function Signature

VajroSDK.actions.updateLineItemQuantity(
		{
			lineItemId: "gid://shopify/Product/10079785100", //ID of the item
			quantity: 10
		})

Parameter	Type	Required	Description
lineItemId	String	Yes	ID of the item added to cart
quantity	Number	Yes	Number of items that needs to be updated in the cart

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Line item quantity updated successfully" }`
Invalid Params	`{ "status": "error", "errorId": 400, "errorHandle": "invalid-params", "message": "Invalid params" }`
Unexpected Error	`{ "status": "error", "errorId": 500, "errorHandle": "unknown-error", "message": "Something unexpected happened" }`

Example Usage

// The code to be placed in Product Page
let variantId = VajroSDK.variables.product.selectedVariant.id; 
function findLineItemId(variantId) {
  const cartItems = VajroSDK.variables.cart.items || [];
  const lineItem = cartItems.find(item => item.variantId === variantId);
  return lineItem ? lineItem.lineItemId : null;
}
document.getElementById('updateButton').addEventListener('click', () => {
  const lineItemId = findLineItemId(variantId);
  if (lineItemId) {
    const quantity = parseInt(document.getElementById('quantityInput').value, 10);
    updateLineItemQuantity(lineItemId, quantity);
  } else {
    console.error("Line item not found");
  }
});
document.getElementById('removeButton').addEventListener('click', () => {
  const lineItemId = findLineItemId(variantId);
  if (lineItemId) {
    removeFromCart(lineItemId);
  } else {
    console.error("Line item not found");
  }
});
function updateLineItemQuantity(lineItemId, quantity) {
  VajroSDK.actions.updateLineItemQuantity({
    lineItemId: lineItemId,
    quantity: quantity
  })
  .then(() => {
    console.log("Line item quantity updated successfully");
  })
  .catch(err => {
    console.error("Error updating line item quantity:", err);
  });
}
function removeFromCart(lineItemId) {
  VajroSDK.actions.removeFromCart([lineItemId])
  .then(() => {
    console.log("Line item removed from cart");
  })
  .catch(err => {
    console.error("Error removing line item from cart:", err);
  });
}

<div class="cart-item">
  <div class="item-info">
    <input type="number" id="quantityInput" value="1" min="1">
    <button id="updateButton">Update Quantity</button>
    <button id="removeButton">Remove from Cart</button>
  </div>
</div>

.cart-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.item-info {
  display: flex;
  gap: 10px;
}
button {
  background-color: #007bff;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
button:hover {
  background-color: #0056b3;
}

Best Practices

Always check stock or max quantity limits before updating.
Use for increment/decrement quantity buttons in custom cart components.
Combine with cartUpdated listener to auto-refresh the cart UI.
Provide user feedback (like a toast or animation) after update.
Handle quantity 0 as a removal case or confirm before clearing.

Caveats

Updating to 0 may remove the item from the cart.
The cart update happens asynchronously — wait for the cartUpdated listener before re-rendering.
Invalid product or variant IDs will silently fail.