---
title: useRecommendedShops
description: >-
  The useRecommendedShops hook fetches personalized shop recommendations based
  on the user's purchase patterns, followed shops, and product interests in the
  Shop app.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/shop/userecommendedshops'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/shop/userecommendedshops.md'
---

# useRecommendedShops

The `useRecommendedShops` hook fetches personalized shop recommendations based on the user's purchase patterns, followed shops, and product interests in the Shop app. You can use this for shop discovery sections, "Brands you might like" features, or diversifying merchant exposure. Unlike `useRecentShops` which shows interaction history, this hook provides algorithmic suggestions for new merchant discovery.

## use​Recommended​Shops(**[params](#userecommendedshopsgeneratedtype-propertydetail-params)**​)

### Parameters

* **params**

  **UseRecommendedShopsParams**

### Returns

* **UseRecommendedShopsReturns**

### UseRecommendedShopsParams

* fetchPolicy

  ```ts
  DataHookFetchPolicy
  ```

* first

  ```ts
  number
  ```

* skip

  ```ts
  boolean
  ```

### DataHookFetchPolicy

```ts
'cache-first' | 'network-only'
```

### UseRecommendedShopsReturns

* error

  ```ts
  Error | null
  ```

* fetchMore

  ```ts
  () => Promise<void>
  ```

* hasNextPage

  ```ts
  boolean
  ```

* loading

  ```ts
  boolean
  ```

* refetch

  ```ts
  () => Promise<void>
  ```

* shops

  ```ts
  Shop[] | null
  ```

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

### Examples

* ####

  ##### tsx

  ```tsx
  import {useRecommendedShops} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {shops, loading, error} = useRecommendedShops()

    console.log({shops, loading, error})
  }
  ```

***