---
title: Manage items in a cart
description: 'Use a cart handler to add, update, and remove items from a cart.'
source_url:
  html: 'https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage'
  md: 'https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md'
---

ExpandOn this page

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#requirements)
* [Create a Remix action to handle different form requests](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#create-a-remix-action-to-handle-different-form-requests)
* [Add cart items](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#add-cart-items)
* [Update cart items](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#update-cart-items)
* [Remove cart items](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#remove-cart-items)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#next-steps)

# Manage items in a cart

This guide shows you how to use the cart handler to add, update, and remove items from the cart.

***

## Requirements

* You've completed the [quickstart guide](https://shopify.dev/docs/storefronts/headless/hydrogen/getting-started).
* You've [set up a cart handler](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/setup).

***

## Create a Remix action to handle different form requests

Create a [Remix `action`](https://remix.run/docs/en/main/route/action) to handle the different cart actions. We suggest using a single cart route, and switching on the different actions. Use the [cart handler](https://shopify.dev/docs/api/hydrogen/latest/utilities/createcarthandler), which is available on the action context, to send cart mutation requests to the Storefront API.

## File

## /app/routes/cart.jsx

##### JavaScript

```jsx
import {CartForm} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let result;

  switch(action) {
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesUpdate:
      result = await cart.updateLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesRemove:
      result = await cart.removeLines(inputs.lineIds);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  return json(
    result,
    {status: 200, headers},
  );
}
```

##### TypeScript

```jsx
import {
  type CartQueryData,
  CartForm,
} from '@shopify/hydrogen';
import invariant from 'tiny-invariant';

export async function action({request, context}: ActionArgs) {
  const {cart} = context;

  const formData = await request.formData();
  const {action, inputs} = CartForm.getFormInput(formData);

  let result: CartQueryData;

  switch(action) {
    case CartForm.ACTIONS.LinesAdd:
      result = await cart.addLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesUpdate:
      result = await cart.updateLines(inputs.lines);
      break;
    case CartForm.ACTIONS.LinesRemove:
      result = await cart.removeLines(inputs.lineIds);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so update it each time.
  const headers = cart.setCartId(result.cart.id);

  return json(
    result,
    {status: 200, headers},
  );
}
```

***

## Add cart items

Use the [`CartForm`](https://shopify.dev/docs/api/hydrogen/latest/components/cartform) component to create an add to cart button. You can add any fields defined by [CartLineInput](https://shopify.dev/docs/api/storefront/latest/input-objects/CartLineInput) for each cart lines. The component submits a form request to the `/cart` route's action when users interact with the button. You can use this component anywhere in the app.

## File

## /app/components/AddToCartButton.jsx

##### JavaScript

```jsx
import {CartForm} from '@shopify/hydrogen';

export default function AddToCartButton({lines}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesAdd}
      inputs={
        {lines}
      }
    >
      <button>
        Add to cart
      </button>
    </CartForm>
  );
}
```

##### TypeScript

```jsx
import {CartForm} from '@shopify/hydrogen';
import type {CartLineInput} from '@shopify/hydrogen/storefront-api-types';

export default function AddToCartButton({lines}: {lines: CartLineInput[]}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesAdd}
      inputs={
        {lines}
      }
    >
      <button>
        Add to cart
      </button>
    </CartForm>
  );
}
```

***

## Update cart items

Use the [`CartForm`](https://shopify.dev/docs/api/hydrogen/latest/components/cartform) component to create an update cart button. You can update any fields in [CartLineUpdateInput](https://shopify.dev/docs/api/storefront/latest/input-objects/CartLineUpdateInput). The component submits a form request to the `/cart` route's action when users interact with the button. You can use this component anywhere in the app.

## File

## /app/components/UpdateCartItemsButton.jsx

##### JavaScript

```jsx
import {CartForm} from '@shopify/hydrogen';

export default function UpdateCartItemsButton({lines}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesUpdate}
      inputs={
        {lines}
      }
    >
      <button>
        Update cart
      </button>
    </CartForm>
  );
}
```

##### TypeScript

```jsx
import {CartForm} from '@shopify/hydrogen';
import type {CartLineUpdateInput} from '@shopify/hydrogen/storefront-api-types';

export default function UpdateCartItemsButton({lines}: {lines: CartLineUpdateInput[]}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesUpdate}
      inputs={
        {lines}
      }
    >
      <button>
        Update cart
      </button>
    </CartForm>
  );
}
```

***

## Remove cart items

Use the [`CartForm`](https://shopify.dev/docs/api/hydrogen/latest/components/cartform) component to remove an item from a cart. The component submits a form request to the `/cart` route's action when users interact with the button. You can use this component anywhere in the app.

## File

## /app/components/RemoveCartItemButton.jsx

##### JavaScript

```jsx
import {CartForm} from '@shopify/hydrogen';

export default function RemoveCartItemButton({lineIds}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesRemove}
      inputs={
        {lineIds}
      }
    >
      <button>
        Remove items
      </button>
    </CartForm>
  );
}
```

##### TypeScript

```jsx
import {CartForm} from '@shopify/hydrogen';

export default function RemoveCartItemButton({lineIds}: {lineIds: string[]}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.LinesRemove}
      inputs={
        {lineIds}
      }
    >
      <button>
        Remove items
      </button>
    </CartForm>
  );
}
```

***

## Next steps

* Learn how to [show product variants](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/variant-selector).

***

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#requirements)
* [Create a Remix action to handle different form requests](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#create-a-remix-action-to-handle-different-form-requests)
* [Add cart items](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#add-cart-items)
* [Update cart items](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#update-cart-items)
* [Remove cart items](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#remove-cart-items)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/manage.md#next-steps)