ProductVariantPrice

A component for displaying product pricing with support for discounts and custom styling.

Anchor to propsProps

Anchor to amount amount number | string required
Anchor to className className string
Anchor to compareAtPriceAmount compareAtPriceAmount number | string
Anchor to compareAtPriceCurrencyCode compareAtPriceCurrencyCode string
Anchor to currencyCode currencyCode string
Anchor to currentPriceClassName currentPriceClassName string
Anchor to originalPriceClassName originalPriceClassName string

Examples

tsx

import {ProductVariantPrice} from '@shopify/shop-minis-react'

export default function MyComponent() {

return (

<ProductVariantPrice

amount="29.99"

currencyCode="USD"

)

}

Preview

Examples

tsx

import {ProductVariantPrice} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <ProductVariantPrice
      amount="29.99"
      currencyCode="USD"
    />
  )
}

Description

A basic product price display

tsx

import {ProductVariantPrice} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <ProductVariantPrice
      amount="29.99"
      currencyCode="USD"
    />
  )
}

Description

A product price with discount showing compare at price

tsx

import {ProductVariantPrice} from '@shopify/shop-minis-react'

export default function MyComponent() {
  return (
    <ProductVariantPrice
      amount="24.99"
      currencyCode="USD"
      compareAtPriceAmount="39.99"
    />
  )
}

Description

A product price with custom styling classes

tsx

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"
      className="gap-3 p-4 bg-gray-50 rounded-lg"
    />
  )
}

Was this page helpful?