Money
The Money
component renders a string of the Storefront API's
MoneyV2 object according to the
locale
in the ShopifyProvider
component.
The component outputs a <div>
. You can customize this component using passthrough props.
Example code
Anchor link to section titled "Example code"
Calculate a unit price for a product variant
Anchor link to section titled "Calculate a unit price for a product variant"
Name | Type | Description |
---|---|---|
as? | TTag |
An HTML tag or React Component to be rendered as the base element wrapper. The default is div . |
withoutCurrency? | boolean |
Whether to remove the currency symbol from the output. |
withoutTrailingZeros? | boolean |
Whether to remove trailing zeros (fractional money) from the output. If there are no trailing zeros, then the fractional money amount remains. For example, $640.00 turns into $640 . $640.42 turns into $640.42 . |
data | PartialDeep<MoneyV2> |
An object with fields that correspond to the Storefront API's MoneyV2 object. |
measurement? | PartialDeep<UnitPriceMeasurement> |
A UnitPriceMeasurement object. |
measurementSeparator? | ReactNode |
Customizes the separator between the money output and the measurement output. Used with the measurement prop. Defaults to '/' . |
Required fields
Anchor link to section titled "Required fields"The Money
component requires the following fields from the Storefront API's
MoneyV2 object:
Component type
Anchor link to section titled "Component type"The Money
component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.