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.

Anchor to useRecommendedShops
useRecommendedShops(
params
)

Anchor to useRecommendedShops-parametersParameters

Anchor to params params

Anchor to useRecommendedShops-returnsReturns

UseRecommendedShopsParams

fetchPolicy
```
DataHookFetchPolicy
```
first
```
number
```
skip
```
boolean
```

DataHookFetchPolicy

'cache-first' | 'network-only'

UseRecommendedShopsReturns

error
```
Error | null
```
fetchMore
```
() => Promise<void>
```
hasNextPage
```
boolean
```
loading
```
boolean
```
refetch
```
() => Promise<void>
```
shops
```
Shop[] | null
```

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 {useRecommendedShops} from '@shopify/shop-minis-react'

export default function MyComponent() {

const {shops, loading, error} = useRecommendedShops()

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

}