ProductLink

A list item component for displaying products in search results, lists, and feeds. ProductLink works well for list views and search results where vertical space is limited. For grid layouts with larger images, you can use ProductCard instead. Supports custom actions (e.g., "Add to Cart") in place of the favorite button.

Anchor to propsProps

Anchor to product product required: The product to display
Anchor to customAction customAction React.ReactNode: Custom action element to replace the favorite button. Must be provided with onCustomActionClick.
Anchor to hideFavoriteAction hideFavoriteAction boolean: Hide the favorite/save button
Anchor to impressionTrackingDisabled impressionTrackingDisabled boolean: Whether to disable impression tracking
Anchor to onClick onClick (product: ) => void: Callback when the product link is clicked
Anchor to onCustomActionClick onCustomActionClick () => void: Callback when the custom action is clicked. Must be provided with customAction.
Anchor to reviewsDisabled reviewsDisabled boolean: Hide the review stars

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 {ProductLink} 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 <ProductLink product={product} />

}

Preview

Examples

tsx

import {ProductLink} 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 <ProductLink product={product} />
}

tsx

import {ProductLink} 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 <ProductLink product={product} />
}

tsx

import {ProductLink} 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 <ProductLink product={product} hideFavoriteAction />
}

Was this page helpful?