Choose a version:

Money

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<, {recurseIntoArrays: true}> required: An object with fields that correspond to the Storefront API's MoneyV2 object or Customer Account 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.

MoneyV2

Supports MoneyV2 from both Storefront API and Customer Account API. The APIs may have different CurrencyCode enums (e.g., Customer Account API added USDC in 2025-07, but Storefront API doesn't support USDC in 2025-07). This union type ensures Money component works with data from either API.

StorefrontApiMoneyV2 | CustomerAccountApiMoneyV2

Examples

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

Was this page helpful?