Product
component
A component for displaying product pricing with support for discounts and custom styling. You can view the Storybook for more interactive examples.
Was this section helpful?
ProductVariantPrice
import {ProductVariantPrice} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
<ProductVariantPrice
amount="29.99"
currencyCode="USD"
/>
)
}
examples
ProductVariantPrice
import {ProductVariantPrice} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <ProductVariantPrice amount="29.99" currencyCode="USD" /> ) }
Preview
Anchor to examplesExamples
ProductVariantPrice configurations and styles
Anchor to example-default-pricingDefault pricing
A basic product price display
Anchor to example-with-discountWith discount
A product price with discount showing compare at price
Anchor to example-custom-stylingCustom styling
A product price with custom styling classes
Was this section helpful?
Default pricing
import {ProductVariantPrice} from '@shopify/shop-minis-react'
export default function MyComponent() {
return (
<ProductVariantPrice
amount="29.99"
currencyCode="USD"
/>
)
}
examples
Default pricing
description
A basic product price display
import {ProductVariantPrice} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <ProductVariantPrice amount="29.99" currencyCode="USD" /> ) }With discount
description
A product price with discount showing compare at price
import {ProductVariantPrice} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <ProductVariantPrice amount="24.99" currencyCode="USD" compareAtPriceAmount="39.99" /> ) }Custom styling
description
A product price with custom styling classes
import {ProductVariantPrice} from '@shopify/shop-minis-react' export default function MyComponent() { return ( <ProductVariantPrice amount="89.99" currencyCode="USD" compareAtPriceAmount="119.99" currentPriceClassName="text-2xl font-bold text-green-600" originalPriceClassName="text-lg text-red-500 line-through" containerClassName="gap-3 p-4 bg-gray-50 rounded-lg" /> ) }