1.8 KiB
1.8 KiB
The SelectedVariantPrice component renders a Money component for the product's selected variant's price or compare at price.
It must be a descendent of a ProductProvider component.
Example code
import {SelectedVariantPrice, ProductProvider} from '@shopify/hydrogen';
export function ProductDetails({product}) {
return (
<ProductProvider value={product}>
<SelectedVariantPrice priceType="compareAt" />
</ProductProvider>
);
}
Props
| Name | Type | Description |
|---|---|---|
| priceType? | "regular" | "compareAt" |
The type of price. Valid values: regular (default) or compareAt. |
Alias
The SelectedVariantPrice component is aliased by the Product.SelectedVariant.Price component. You can use whichever component you prefer.
Component type
The SelectedVariantPrice component is a client component, which means that it renders on the client. For more information about component types, refer to React Server Components.