Choose a version:

ProductPrice
component

The ProductPrice component renders a Money component with the product priceRange's maxVariantPrice or minVariantPrice, for either the regular price or compare at price range.

Anchor to propsProps

Anchor to data data PartialDeep<Product, {recurseIntoArrays: true}> required: A Storefront API Product object.
Anchor to priceType priceType "regular" | "compareAt": The type of price. Valid values: regular (default) or compareAt.
Anchor to valueType valueType "max" | "min" | "unit": The type of value. Valid values: min (default), max or unit.
Anchor to variantId variantId string: The ID of the variant.
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 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.
Anchor to measurementSeparator measurementSeparator ReactNode: Customizes the separator between the money output and the measurement output. Used with the measurement prop. Defaults to '/'.

ProductPricePropsForDocs

data
A Storefront API [Product object](https://shopify.dev/api/storefront/reference/products/product).
```
PartialDeep<Product, {recurseIntoArrays: true}>
```
priceType
The type of price. Valid values: `regular` (default) or `compareAt`.
```
"regular" | "compareAt"
```
valueType
The type of value. Valid values: `min` (default), `max` or `unit`.
```
"max" | "min" | "unit"
```
variantId
The ID of the variant.
```
string
```
as
An HTML tag or React Component to be rendered as the base element wrapper. The default is `div`.
```
ComponentGeneric
```
withoutCurrency
Whether to remove the currency symbol from the output.
```
boolean
```
withoutTrailingZeros
Whether to remove trailing zeros (fractional money) from the output.
```
boolean
```
measurementSeparator
Customizes the separator between the money output and the measurement output. Used with the `measurement` prop. Defaults to `'/'`.
```
ReactNode
```

export interface ProductPricePropsForDocs<
  AsType extends React.ElementType = 'div',
> extends Omit<MoneyPropsBase<AsType>, 'data' | 'measurement'>,
    ProductPriceProps {}

Was this section helpful?

Example code

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

export function ProductPricing({product}) {

return <ProductPrice data={product} priceType="compareAt" valueType="max" />;

}

examples

Example code

description

I am the default example

JavaScript

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

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

TypeScript

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" />;
}

Anchor to relatedRelated

ProductProvider

Money

ProductPricecomponent

Anchor to propsProps

ProductPricePropsForDocs

examples

Example code

description

JavaScript

TypeScript

Anchor to relatedRelated

ProductPrice
component