Skip to main content


The CartCost component renders a Money component with the cost associated with the amountType prop. If no amountType prop is specified, then it defaults to totalAmount.

Example code

import {CartProvider, CartCost} from '@shopify/hydrogen';

export default function MyCart() {
return (
<CartCost amountType="total" />


amountType?"total" &#124; "subtotal" &#124; "tax" &#124; "duty"A string type that defines the type of cost needed. Valid values: total, subtotal, tax, or duty.
children?React.ReactNodeA function that takes an object return by the useMoney hook and returns a ReactNode.

Component type

The CartCost component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.