Skip to main content

CartCost

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.

Depends on useCart() and must be a child of <CartProvider/>

Anchor to amountType
amountType
'total' | 'subtotal' | 'tax' | 'duty'

A string type that defines the type of cost needed. Valid values: total, subtotal, tax, or duty.

ComponentGeneric

An HTML tag or React Component to be rendered as the base element wrapper. The default is div.

Anchor to children
children
React.ReactNode

Any ReactNode elements.

Anchor to measurement
measurement
PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>
Anchor to measurementSeparator
measurementSeparator
ReactNode

Customizes the separator between the money output and the measurement output. Used with the measurement prop. Defaults to '/'.

Anchor to withoutCurrency
withoutCurrency
boolean

Whether to remove the currency symbol from the output.

Anchor to withoutTrailingZeros
withoutTrailingZeros
boolean

Whether to remove trailing zeros (fractional money) from the output.

Examples
import {CartCost} from '@shopify/hydrogen-react';

export default function CartTotals() {
return (
<>
<div>
Subtotal: <CartCost amountType="subtotal" />
</div>
<div>
Tax: <CartCost amountType="tax" />
</div>
<div>
Total: <CartCost />
</div>
</>
);
}
Was this page helpful?