Moneycomponent
component
The Money component renders a string of the Storefront API'sMoneyV2 object according to the locale in the component.
The component outputs a <div>. You can customize this component using passthrough props.
Anchor to propsProps
Anchor to data
data
PartialDeep<MoneyV2, {recurseIntoArrays: true}>
required
An object with fields that correspond to the Storefront API's MoneyV2 object.
ComponentGeneric
An HTML tag or React Component to be rendered as the base element wrapper. The default is div.
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.
Was this section helpful?
Example code
import {Money} from '@shopify/hydrogen';
export default function ProductMoney({product}) {
const price = product.variants.nodes[0].price;
return <Money data={price} />;
}
