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.
Server-side firstAnchor link to section titled "Server-side first"
- Form actions are available as soon as the page loads, reducing time-to-interactive.
- 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.
Progressive enhancementAnchor link to section titled "Progressive enhancement"
Customers expect a fast, modern user experience, which typically means eliminating full-page reloads. Hydrogen is built on Remix, 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.
Cart customizationsAnchor link to section titled "Cart 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.
- Learn how to set up the Hydrogen cart handler in Hydrogen.