ProductCard

Optimized for grid layouts with three variants: default, priceOverlay, and compact. Use default for product grids where details matter, priceOverlay for visual-first feeds, compact when dealing with limited space. For some list views where space is limited, ProductLink may work better. Exposes composable subcomponents for custom layouts.

Anchor to propsProps

Anchor to product product required: The product to display in the card
Anchor to badgeText badgeText string: Optional text to display in a badge on the card
Anchor to badgeVariant badgeVariant 'primary' | 'secondary' | 'destructive' | 'outline' | 'none': Visual style variant for the badge
Anchor to children children React.ReactNode: Custom layout via children
Anchor to favoriteButtonDisabled favoriteButtonDisabled boolean: Whether the favorite button is disabled
Anchor to impressionTrackingDisabled impressionTrackingDisabled boolean: Whether to disable impression tracking
Anchor to onFavoriteToggled onFavoriteToggled (isFavorited: boolean) => void: Callback fired when the favorite button is toggled
Anchor to onProductClick onProductClick () => void: Callback fired when the product is clicked
Anchor to reviewsDisabled reviewsDisabled boolean: Whether review stars are disabled
Anchor to selectedProductVariant selectedProductVariant: Optional selected variant of the product to show specific variant data
Anchor to touchable touchable boolean: Whether the card can be clicked/tapped to navigate to product details
Anchor to variant variant 'default' | 'priceOverlay' | 'compact': Visual style variant of the card

Product

compareAtPrice
```
Money | null
```
defaultVariantId
```
string
```
featuredImage
```
ProductImage | null
```
id
```
string
```
isFavorited
```
boolean
```
price
```
Money
```
referral
```
boolean
```

reviewAnalytics

{ averageRating?: number; reviewCount?: number; }

selectedVariant
```
ProductVariant
```
shop
```
ProductShop
```
title
```
string
```
variants
```
ProductVariant[]
```

Money

amount
```
Decimal
```
currencyCode
```
CurrencyCode
```

Decimal

string

CurrencyCode

'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BYR' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JEP' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KID' | 'KMF' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LTL' | 'LVL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STD' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VED' | 'VEF' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'XXX' | 'YER' | 'ZAR' | 'ZMW'

ProductImage

altText
```
string | null
```
height
```
number | null
```
id
```
string | null
```
sensitive
```
boolean | null
```
thumbhash
```
string | null
```
url
```
string
```
width
```
number | null
```

ProductVariant

availableForSale
Whether the variant can be purchased. When `false`, calls to add the variant to cart or buy it through the SDK will fail. UI should be gated on this flag. May be `undefined` if the variant was sourced from an API that does not expose stock state.
```
boolean
```
compareAtPrice
```
Money | null
```
id
```
string
```
image
```
ProductImage | null
```
isFavorited
```
boolean
```
price
```
Money
```
title
```
string
```

ProductShop

id
```
string
```
name
```
string
```

Examples

tsx

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

export default function MyComponent() {

const handleFavoriteToggled = (productId: string, isFavorited: boolean) => {

console.log('Favorite toggled:', productId, isFavorited)

}

const product = {

id: '1',

title: 'The Hero Snowboard',

price: {amount: '702.95', currencyCode: 'USD'},

featuredImage: {

url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',

altText: 'The Hero Snowboard',

sensitive: false,

shop: {id: 'shop1', name: 'Snow Sports Co.'},

defaultVariantId: 'variant1',

isFavorited: false,

reviewAnalytics: {averageRating: 4.5, reviewCount: 123},

}

return (

)

}

Preview

Examples

tsx

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

export default function MyComponent() {
  const handleFavoriteToggled = (productId: string, isFavorited: boolean) => {
    console.log('Favorite toggled:', productId, isFavorited)
  }

  const product = {
    id: '1',
    title: 'The Hero Snowboard',
    price: {amount: '702.95', currencyCode: 'USD'},
    featuredImage: {
      url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
      altText: 'The Hero Snowboard',
      sensitive: false,
    },
    shop: {id: 'shop1', name: 'Snow Sports Co.'},
    defaultVariantId: 'variant1',
    isFavorited: false,
    reviewAnalytics: {averageRating: 4.5, reviewCount: 123},
  }

  return (
    <ProductCard product={product} onFavoriteToggled={handleFavoriteToggled} />
  )
}

Description

A default product card with product information

tsx

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

export default function MyComponent() {
  const handleFavoriteToggled = (productId: string, isFavorited: boolean) => {
    console.log('Favorite toggled:', productId, isFavorited)
  }

  const product = {
    id: '1',
    title: 'The Hero Snowboard',
    price: {amount: '702.95', currencyCode: 'USD'},
    featuredImage: {
      url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
      altText: 'The Hero Snowboard',
      sensitive: false,
    },
    shop: {id: 'shop1', name: 'Snow Sports Co.'},
    defaultVariantId: 'variant1',
    isFavorited: false,
    reviewAnalytics: {averageRating: 4.5, reviewCount: 123},
  }

  return (
    <ProductCard product={product} onFavoriteToggled={handleFavoriteToggled} />
  )
}

Description

A compact product card with minimal information

tsx

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

export default function MyComponent() {
  const product = {
    id: '1',
    title: 'The Hero Snowboard',
    price: {amount: '702.95', currencyCode: 'USD'},
    featuredImage: {
      url: 'https://images.unsplash.com/photo-1551524164-687a55dd1126?w=400&h=400&fit=crop&crop=center',
      altText: 'The Hero Snowboard',
      sensitive: false,
    },
    shop: {id: 'shop1', name: 'Snow Sports Co.'},
    defaultVariantId: 'variant1',
    isFavorited: false,
    reviewAnalytics: {averageRating: 4.5, reviewCount: 123},
  }

  return <ProductCard product={product} variant="compact" />
}

Was this page helpful?