---
title: ProductPrice
description: The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.
api_version: 2025-07
api_name: hydrogen-react
source_url:
  html: https://shopify.dev/docs/api/hydrogen-react/latest/components/productprice
  md: https://shopify.dev/docs/api/hydrogen-react/latest/components/productprice.md
---

# Product​Pricecomponent

The `ProductPrice` component renders a `Money` component with the product [`priceRange`](https://shopify.dev/api/storefront/reference/products/productpricerange)'s `maxVariantPrice` or `minVariantPrice`, for either the regular price or compare at price range.

## Props

* data

  PartialDeep\<Product, {recurseIntoArrays: true}>

  required

  A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product).

* as

  ComponentGeneric

  An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.

* measurementSeparator

  ReactNode

  Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`.

* priceType

  'regular' | 'compareAt'

  The type of price. Valid values: `regular` (default) or `compareAt`.

* valueType

  'max' | 'min' | 'unit'

  The type of value. Valid values: `min` (default), `max` or `unit`.

* variantId

  string

  The ID of the variant.

* withoutCurrency

  boolean

  Whether to remove the currency symbol from the output.

* withoutTrailingZeros

  boolean

  Whether to remove trailing zeros (fractional money) from the output.

### Examples

* #### Example code

  ##### Description

  I am the default example

  ##### JavaScript

  ```jsx
  import {ProductPrice} from '@shopify/hydrogen-react';

  export function ProductPricing({product}) {
    return <ProductPrice data={product} priceType="compareAt" valueType="max" />;
  }
  ```

  ##### TypeScript

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

  export function ProductPricing({product}: {product: Product}) {
    return <ProductPrice data={product} priceType="compareAt" valueType="max" />;
  }
  ```

## Related

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/api/hydrogen-react/components/productprovider)

[ProductProvider](https://shopify.dev/api/hydrogen-react/components/productprovider)

[![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/api/hydrogen-react/components/money)

[Money](https://shopify.dev/api/hydrogen-react/components/money)