Custom Block SDK
Custom Block SDK
  1. Actions
  2. Cart

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

Superfans.actions.updateLineItemQuantity(
		{
			lineItemId: "gid://shopify/Product/10079785100", //ID of the item
			quantity: 10
		})
ParameterTypeRequiredDescription
lineItemIdStringYesID of the item added to cart
quantityNumberYesNumber of items that needs to be updated in the cart

Structure of Response

StatusResponse
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 = Superfans.variables.product.selectedVariant.id; 
function findLineItemId(variantId) {
  const cartItems = Superfans.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) {
  Superfans.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) {
  Superfans.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

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

Caveats

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