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.