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

Anchor link to section titled "Requirements"

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

Create a Remix action to handle different form requests

Anchor link to section titled "Create a Remix action to handle different form requests"

Create a Remix action to handle the different cart actions. We suggest using a single cart route, and switching on the different actions. Use the cart handler, which is available on the action context, to send cart mutation requests to the Storefront API.

Add cart items

Anchor link to section titled "Add cart items"

Use the CartForm component to create an add to cart button. You can add any fields defined by 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.

Update cart items

Anchor link to section titled "Update cart items"

Use the CartForm component to create an update cart button. You can update any fields in 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.

Remove cart items

Anchor link to section titled "Remove cart items"

Use the 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.

Next steps

Anchor link to section titled "Next steps"

Learn how to show product variants.