Skip to main content

ProductCard
component

A component for displaying product information including a featured image, price, and reviews. You can view the Storybook for more interactive examples.

Was this section helpful?

ProductCard

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

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

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

Preview

Anchor to examplesExamples

ProductCard variants

Anchor to example-default-product-cardDefault product card

A default product card with product information

Anchor to example-compact-variantCompact variant

A compact product card with minimal information

Was this section helpful?

Default product card

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

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

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