Cart components

This guide provides a list of the cart components offered in Hydrogen.

Cart

A cart contains the merchandise that a customer intends to purchase and the estimated cost associated with the cart. When a customer is ready to purchase their items, they can proceed to checkout.

Reference

Hydrogen includes the following cart components:

Component name Component type Description
AddToCartButton Client Renders a button that adds an item to the cart when pressed.
BuyNowButton Shared Renders a button that adds an item to the cart and redirects the customer to checkout.
CartCheckoutButton Client Renders a button that redirects to the checkout URL for the cart.
CartEstimatedCost Client Renders a Money component for various amount types related to cart.
CartLineAttributes
Alias: CartLine.Attributes
Client Takes a function as a child and calls that function for each of the cart line's attributes.
CartLineImage
Alias: CartLine.Image
Client Renders an Image component for the cart line merchandise's image.
CartLinePrice
Alias: CartLine.Price
Client Renders a Money component for the cart line merchandise's price or compare at price.
CartLineProductTitle
Alias: CartLine.ProductTitle
Client Renders a span element (or the type of HTML element specified by the as prop) with the cart line merchandise's title.
CartLineProvider
Alias: CartLine
Client Creates a context for using a cart line.
CartLineQuantity
Alias: CartLine.Quantity
Client Renders a span element (or the type of HTML element specified by the as prop) with the cart line's quantity.
CartLineQuantityAdjustButton
Alias: CartLine.QuantityAdjust
Shared Renders a button that adjusts the cart line's quantity when pressed.
CartLines Shared Iterates over each cart line and renders its children within a CartLineProvider for each cart line.
CartLineSelectedOptions
Alias: CartLine.SelectedOptions
Client Takes a function as a child and calls that function for each of the cart line merchandise's selected options.
CartProvider Client Creates a context for using a cart.
CartShopPayButton Client Renders a ShopPayButton for the items in the cart.

On this page