Choose a version:

Money
component

The Money component renders a string of the Storefront API'sMoneyV2 object according to the locale in the ShopifyProvider 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.
Anchor to as as 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}>: A UnitPriceMeasurement object.
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.

MoneyPropsBase

as
An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.
```
ComponentGeneric
```
data
An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2).
```
PartialDeep<MoneyV2, {recurseIntoArrays: true}>
```
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 MoneyPropsBase<ComponentGeneric extends React.ElementType> {
  /** An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`. */
  as?: ComponentGeneric;
  /** An object with fields that correspond to the Storefront API's [MoneyV2 object](https://shopify.dev/api/storefront/reference/common-objects/moneyv2). */
  data: PartialDeep<MoneyV2, {recurseIntoArrays: true}>;
  /** Whether to remove the currency symbol from the output. */
  withoutCurrency?: boolean;
  /** Whether to remove trailing zeros (fractional money) from the output. */
  withoutTrailingZeros?: boolean;
  /** A [UnitPriceMeasurement object](https://shopify.dev/api/storefront/2025-01/objects/unitpricemeasurement). */
  measurement?: PartialDeep<UnitPriceMeasurement, {recurseIntoArrays: true}>;
  /** Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`. */
  measurementSeparator?: ReactNode;
}

Was this section helpful?

Example code

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

export default function ProductMoney({product}) {

const price = product.variants.nodes[0].price;

return <Money data={price} />;

}

examples

Example code

description

I am the default example

JavaScript

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

export default function ProductMoney({product}) {
  const price = product.variants.nodes[0].price;

  return <Money data={price} />;
}

TypeScript

import {Money} from '@shopify/hydrogen-react';
import type {Product} from '@shopify/hydrogen-react/storefront-api-types';

export default function ProductMoney({product}: {product: Product}) {
  const price = product.variants.nodes[0].price;

  return <Money data={price} />;
}

Anchor to relatedRelated

useMoney

Moneycomponent

Anchor to propsProps

MoneyPropsBase

examples

Example code

description

JavaScript

TypeScript

Anchor to relatedRelated

Money
component