Update cart metafields

This guide shows you how to use a cart handler to update cart metafields.

Requirements

Anchor link to section titled "Requirements"

You've completed the quickstart guide.
You've set up a cart handler.

Step 1: Read cart metafields

Anchor link to section titled "Step 1: Read cart metafields"

Update the cart query fragment to return cart metafields. For more information, refer to the default CartApiQuery fragment.

The following example adds themetafield field:

Step 2: Create a metafield form

Anchor link to section titled "Step 2: Create a metafield form"

Use Remix's useFetcher hook to create a form that submits information that you want to store in a metafield. The hook submits a form request to the /cart route's action when users submit with this metafield form. You can use this component anywhere in the app.

When you use fetcher.submit, make sure there's a data key with the name CartForm.INPUT_NAME. The key value must be a JSON stringified object with action and inputs defined.

Step 3: Handle the update metafield form request

Anchor link to section titled "Step 3: Handle the update metafield form request"

Handle the update metafield form request in an action. Use the cart, created from createCartHandler, to handle cart mutation requests to the Storefront API.

Next steps

Anchor link to section titled "Next steps"

Learn how to update buyer identity.