Cart
The component renders a Money component with the cost associated with the prop.
If no prop is specified, then it defaults to .
Depends on and must be a child of
Anchor to propsProps
- Anchor to amountTypeamountType'total' | 'subtotal' | 'tax' | 'duty'
A string type that defines the type of cost needed. Valid values:
total,subtotal,tax, orduty.- ComponentGeneric
An HTML tag or React Component to be rendered as the base element wrapper. The default is
div.- Anchor to childrenchildrenReact.ReactNode
Any
elements.- Anchor to measurementmeasurementPartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>
- Anchor to measurementSeparatormeasurementSeparatorReactNode
Customizes the separator between the money output and the measurement output. Used with the
measurementprop. Defaults to'/'.- Anchor to withoutCurrencywithoutCurrencyboolean
Whether to remove the currency symbol from the output.
- Anchor to withoutTrailingZeroswithoutTrailingZerosboolean
Whether to remove trailing zeros (fractional money) from the output.
CartCostPropsForDocs
- amountType
A string type that defines the type of cost needed. Valid values: `total`, `subtotal`, `tax`, or `duty`.
'total' | 'subtotal' | 'tax' | 'duty' - as
An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.
ComponentGeneric - children
Any `ReactNode` elements.
React.ReactNode - measurement
A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2025-01/objects/unitpricemeasurement).
PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}> - measurementSeparator
Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`.
ReactNode - withoutCurrency
Whether to remove the currency symbol from the output.
boolean - withoutTrailingZeros
Whether to remove trailing zeros (fractional money) from the output.
boolean
export interface CartCostPropsForDocs<AsType extends React.ElementType = 'div'>
extends Omit<MoneyPropsBase<AsType>, 'data'>,
CartCostPropsBase {}Example code
examples
Example code
description
I am the default example
JavaScript
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> </> ); }TypeScript
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> </> ); }