Skip to main content

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.

PartialDeep<Product, {recurseIntoArrays: true}>
required

A Storefront API Product object.

ComponentGeneric

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

Anchor to measurementSeparator
measurementSeparator
ReactNode

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

'regular' | 'compareAt'

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

'max' | 'min' | 'unit'

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

string

The ID of the variant.

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.

Was this section helpful?

Example code

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

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