---
title: MerchantCard
description: 'Use when showcasing merchants as destinations, not just product sources.'
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/components/commerce/merchantcard'
  md: 'https://shopify.dev/docs/api/shop-minis/components/commerce/merchantcard.md'
---

# 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.

#### Props

* **shop**

  **Shop**

  **required**

  The shop/merchant to display

* **children**

  **React.ReactNode**

  Custom content to render inside the card

* **featuredImagesLimit**

  **number**

  Maximum number of featured product images to show (default: 4)

* **touchable**

  **boolean**

  Whether the card is tappable to navigate to shop (default: true)

### Shop

* id

  ```ts
  string
  ```

* isFollowing

  ```ts
  boolean | null
  ```

* logoImage

  ```ts
  ProductImage | null
  ```

* name

  ```ts
  string
  ```

* primaryDomain

  ```ts
  { url: string; }
  ```

* reviewAnalytics

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

* shareUrl

  ```ts
  string | null
  ```

* visualTheme

  ```ts
  VisualTheme | null
  ```

### 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
  ```

### VisualTheme

* brandSettings

  ```ts
  BrandSettings | null
  ```

* description

  ```ts
  string | null
  ```

* featuredImages

  ```ts
  ImageType[]
  ```

* id

  ```ts
  string
  ```

* logoImage

  ```ts
  ImageType | null
  ```

### BrandSettings

* colors

  ```ts
  ColorTheme | null
  ```

* headerTheme

  ```ts
  HeaderTheme | null
  ```

* id

  ```ts
  string
  ```

* logos

  ```ts
  LogoTheme | null
  ```

### ColorTheme

* coverDominant

  ```ts
  string | null
  ```

* id

  ```ts
  string
  ```

* logoAverage

  ```ts
  string | null
  ```

* logoDominant

  ```ts
  string | null
  ```

* primary

  ```ts
  string | null
  ```

* secondary

  ```ts
  string | null
  ```

* secondaryText

  ```ts
  string | null
  ```

* statusBarStyle

  ```ts
  string | null
  ```

### HeaderTheme

* coverImage

  ```ts
  ImageType | null
  ```

* endingScrimColor

  ```ts
  string | null
  ```

* id

  ```ts
  string
  ```

* startingScrimColor

  ```ts
  string | null
  ```

* thumbnailImage

  ```ts
  ImageType | null
  ```

* videoUrl

  ```ts
  string | null
  ```

* wordmark

  ```ts
  ImageType | null
  ```

### ImageType

* altText

  ```ts
  string | null
  ```

* height

  ```ts
  number | null
  ```

* sensitive

  ```ts
  boolean
  ```

* thumbhash

  ```ts
  string | null
  ```

* url

  ```ts
  string
  ```

* width

  ```ts
  number | null
  ```

### LogoTheme

* id

  ```ts
  string
  ```

* logoImage

  ```ts
  ImageType | null
  ```

Examples

## Preview

![merchantcard](https://shopify.dev/assets/assets/images/templated-apis-screenshots/shop-minis/MerchantCard-BEB5ARky.png)

### Examples

* ####

  ##### tsx

  ```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} />
  }
  ```

***