---
title: ProductLink
description: >-
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.
api_name: shop-minis
source_url:
html: 'https://shopify.dev/docs/api/shop-minis/components/commerce/productlink'
md: 'https://shopify.dev/docs/api/shop-minis/components/commerce/productlink.md'
---
# Product​Link
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.
## Props
* **product**
**Product**
**required**
The product to display
* **customAction**
**React.ReactNode**
Custom action element to replace the favorite button. Must be provided with `onCustomActionClick`.
* **hideFavoriteAction**
**boolean**
Hide the favorite/save button
* **impressionTrackingDisabled**
**boolean**
Whether to disable impression tracking
* **onClick**
**(product: Product) => void**
Callback when the product link is clicked
* **onCustomActionClick**
**() => void**
Callback when the custom action is clicked. Must be provided with `customAction`.
* **reviewsDisabled**
**boolean**
Hide the review stars
### Product
* compareAtPrice
```ts
Money | null
```
* defaultVariantId
```ts
string
```
* featuredImage
```ts
ProductImage | null
```
* id
```ts
string
```
* isFavorited
```ts
boolean
```
* price
```ts
Money
```
* referral
```ts
boolean
```
* reviewAnalytics
```ts
{ averageRating?: number; reviewCount?: number; }
```
* selectedVariant
```ts
ProductVariant
```
* shop
```ts
ProductShop
```
* title
```ts
string
```
* variants
```ts
ProductVariant[]
```
### Money
* amount
```ts
Decimal
```
* currencyCode
```ts
CurrencyCode
```
### Decimal
```ts
string
```
### CurrencyCode
```ts
'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
```ts
string | null
```
* height
```ts
number | null
```
* id
```ts
string | null
```
* sensitive
```ts
boolean | null
```
* thumbhash
```ts
string | null
```
* url
```ts
string
```
* width
```ts
number | null
```
### ProductVariant
* compareAtPrice
```ts
Money | null
```
* id
```ts
string
```
* image
```ts
ProductImage | null
```
* isFavorited
```ts
boolean
```
* price
```ts
Money
```
* title
```ts
string
```
### ProductShop
* id
```ts
string
```
* name
```ts
string
```
Examples
## Preview
### Examples
* #### ProductLink
##### Default
```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
}
```
* #### A ProductLink with default properties
##### Default
```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
}
```
* #### A ProductLink with no Favorite button
##### Default
```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
}
```