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

ExpandOn this page

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#requirements)
* [Step 1: Create a form that will interact with a cart attribute](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#step-1-create-a-form-that-will-interact-with-a-cart-attribute)
* [Step 2: Handle the cart attribute form request](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#step-2-handle-the-cart-attribute-form-request)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#next-steps)

# 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/hydrogen/getting-started).
* You've set up the [cart handler](https://shopify.dev/docs/storefronts/headless/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/latest/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

```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>
  );
}
```

```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>
  );
}
```

##### JavaScript

```
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

```
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/latest/utilities/createcarthandler) to handle cart mutation requests to the Storefront API.

## File

## /app/routes/cart.jsx

```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},
  );
}
```

```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},
  );
}
```

##### JavaScript

```
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

```
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/hydrogen/cart/discount-codes).

***

* [Requirements](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#requirements)
* [Step 1: Create a form that will interact with a cart attribute](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#step-1-create-a-form-that-will-interact-with-a-cart-attribute)
* [Step 2: Handle the cart attribute form request](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#step-2-handle-the-cart-attribute-form-request)
* [Next steps](https://shopify.dev/docs/storefronts/headless/hydrogen/cart/attributes.md#next-steps)