Remove from Cart

Description

The removeFromCart() action removes a specific product or line item from the user's active shopping cart.
It automatically updates the cart state within the native app and triggers a cartUpdated event when the removal is complete.

Use this action when implementing custom cart UIs, quick-remove buttons, or “Remove Item” actions in custom blocks.

Function Signature

VajroSDK.actions.removeFromCart([
		"gid://shopify/Product/10079785100", ///ID of each item added to cart
		"gid://shopify/Product/10079785101"
		]
)

Parameter	Type	Required	Description
lineItemsIds	array of strings	Yes	The list of line item IDs which are to be added to the cart

Structure of Response

Status	Response
Success	`{ "status": "success", "message": "Line items removed from cart" }`
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

Provide clear user feedback using showToast() or showAlert().
Combine with cartUpdated listener to re-render or refresh your cart view.
Confirm user intent before removing items (e.g., “Are you sure?” modal).

Caveats

If multiple quantities of a product exist, all units will be removed.
Removing a product that’s not in the cart will have no effect.
Works only when a valid cart session exists.
To reduce item quantity instead, use updateLineItemQuantity().