MerchantCard

Use when showcasing merchants as destinations, not just product sources. Automatically adapts to merchant's brand colors, logo placement, and featured product images. Respects merchant brand guidelines while maintaining consistent Shop UI patterns.

Anchor to propsProps

Anchor to shop shop required: The shop/merchant to display
Anchor to children children React.ReactNode: Custom content to render inside the card
Anchor to featuredImagesLimit featuredImagesLimit number: Maximum number of featured product images to show (default: 4)
Anchor to touchable touchable boolean: Whether the card is tappable to navigate to shop (default: true)

Shop

id
```
string
```
isFollowing
```
boolean | null
```
logoImage
```
ProductImage | null
```
name
```
string
```
primaryDomain
```
{ url: string; }
```

reviewAnalytics

{ averageRating?: number; reviewCount: number; }

shareUrl
```
string | null
```
visualTheme
```
VisualTheme | null
```

ProductImage

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

VisualTheme

brandSettings
```
BrandSettings | null
```
description
```
string | null
```
featuredImages
```
ImageType[]
```
id
```
string
```
logoImage
```
ImageType | null
```

BrandSettings

colors
```
ColorTheme | null
```
headerTheme
```
HeaderTheme | null
```
id
```
string
```
logos
```
LogoTheme | null
```

ColorTheme

coverDominant
```
string | null
```
id
```
string
```
logoAverage
```
string | null
```
logoDominant
```
string | null
```
primary
```
string | null
```
secondary
```
string | null
```
secondaryText
```
string | null
```
statusBarStyle
```
string | null
```

HeaderTheme

coverImage
```
ImageType | null
```
endingScrimColor
```
string | null
```
id
```
string
```
startingScrimColor
```
string | null
```
thumbnailImage
```
ImageType | null
```
videoUrl
```
string | null
```
wordmark
```
ImageType | null
```

ImageType

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

LogoTheme

id
```
string
```
logoImage
```
ImageType | null
```

Examples

tsx

import {MerchantCard, useShop} from '@shopify/shop-minis-react'

export default function MyComponent() {

const {shop} = useShop({id: 'shop1'})

if (!shop) return null

return <MerchantCard shop={shop} />

}

Preview

Examples

tsx

import {MerchantCard, useShop} from '@shopify/shop-minis-react'

export default function MyComponent() {
  const {shop} = useShop({id: 'shop1'})
  if (!shop) return null

  return <MerchantCard shop={shop} />
}

Was this page helpful?