---
title: Update cart attributes
description: Use the cart handler to update cart attributes.
source_url:
  html: >-
    https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/attributes
  md: >-
    https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/attributes.md
api_name: hydrogen
---

Legacy Hydrogen

These pages refer to Hydrogen versions 2026-04 and earlier. For versions 2026-10 and later, refer to the latest [Hydrogen docs](https://shopify.dev/docs/storefronts/hydrogen). If you're not using the latest version of Hydrogen, then we recommend that you migrate your storefront. To learn more, refer to [Migrate to the latest version of Hydrogen](https://shopify.dev/docs/storefronts/hydrogen/migrate).

# Update cart attributes

This guide shows you how to use the cart handler to update cart attributes.

***

## Requirements

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

***

## Step 1: Create a form that will interact with a cart attribute

Cart attributes are a list of key/value string pairs. The values can be anything you want to represent but they must be stored as strings. For example, you can add attributes that enable to add personalized messages to an order, such as requesting gift wrapping.

Use the [`CartForm`](https://shopify.dev/docs/api/hydrogen/2026-04/components/cartform) to create a cart attribute form. The component submits a form request to the `/cart` route's action when a visitor submits an attribute key/value pair. You can use this component anywhere in the app.

## File

## /app/components/AttributeUpdateForm.jsx

##### JavaScript

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

export default function AttributeUpdateForm({attributes}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.AttributesUpdateInput}
      inputs={
        {attributes}
      }
    >
      <button>Update attribute</button>
    </CartForm>
  );
}
```

##### TypeScript

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

export default function AttributeUpdateForm({attributes}: {
  attributes: AttributeInput[];
}) {
  return (
    <CartForm
      route="/cart"
      action={CartForm.ACTIONS.AttributesUpdateInput}
      inputs={
        {attributes}
      }
    >
      <button>Update attribute</button>
    </CartForm>
  );
}
```

***

## Step 2: Handle the cart attribute form request

Handle the cart attribute form request in an `action`. Use the `cart` that's created from [`createCartHandler`](https://shopify.dev/docs/api/hydrogen/2026-04/utilities/cart/createcarthandler) to handle 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.AttributesUpdateInput:
      result = await cart.updateAttributes(inputs.attributes);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

  // The Cart ID might change after each mutation, so the following code updates 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.AttributesUpdateInput:
      result = await cart.updateAttributes(inputs.attributes);
      break;
    default:
      invariant(false, `${action} cart action is not defined`);
  }

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

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

**Note:**

Cart attributes are visible to the user at checkout by default. To hide an attribute at checkout, prefix the attribute with an underscore.

***

## Next steps

* Learn how to [apply discount codes](https://shopify.dev/docs/storefronts/headless/legacy/hydrogen/cart/discount-codes).

***