Skip to main content

Cart overview

Managing the shopping cart is one of the fundamentals of digital commerce. Carts can be difficult to implement properly, requiring both complex state management and subtle UI interactions.

Hydrogen includes a suite of cart components built to work with Shopify APIs. These components aim to make it easier to build carts that behave predictably and consistently, while still being performant and customizable.

In this set of guides, you'll learn how to assemble these components to build a server-side cart that's fast, responsive, and reliable.

Anchor to Server-side firstServer-side first

Hydrogen's cart is server-rendered by default, built on top of traditional <form> elements and HTTP requests. This method has several benefits:

  • It improves performance by reducing the total amount of JavaScript sent to the browser.
  • Form actions are available as soon as the page loads, reducing time-to-interactive.
  • It's more resilient and still works when JavaScript fails or is unavailable.
  • Managing state on the server allows cart instances to be shared across app contexts.
  • Carts can be progressively enhanced with more complex client-rendered UI behaviors.

Anchor to Progressive enhancementProgressive enhancement

Customers expect a fast, modern user experience, which typically means eliminating full-page reloads. Hydrogen is built on React Router, which includes robust methods for progressively enhancing standard web forms. So Hydrogen's cart components also include interactive client-side features like optimistic UI updates, loading indicators, and validation feedback.

Anchor to Cart customizationsCart customizations

Hydrogen's built-in cart includes components and utilities that cover a range of common use cases, including adding, updating, and removing products, selecting variants, managing metafields, applying discount codes, and more. The handler is also extensible, allowing you to add custom cart features, or even override built-in functionality.

Anchor to Next stepsNext steps

Was this page helpful?