---
title: useFollowedShops
description: >-
  The `useFollowedShops` hook fetches the collection of shops the user follows
  in the Shop app. Use this to display followed brands, create quick-access shop
  lists, show follow status in UI, or build social commerce features. Pair with
  `useFollowedShopsActions()` to manage follow/unfollow operations.
api_name: shop-minis
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/user/usefollowedshops'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/user/usefollowedshops.md'
---

# use​Followed​Shops

The `useFollowedShops` hook fetches the collection of shops the user follows in the Shop app. Use this to display followed brands, create quick-access shop lists, show follow status in UI, or build social commerce features. Pair with `useFollowedShopsActions()` to manage follow/unfollow operations.

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

### Parameters

* **params**

  **UseFollowedShopsParams**

### Returns

* **UseFollowedShopsReturns**

  ### ### UseFollowedShopsReturns

  * **error**

    **Error | null**

  * **fetchMore**

    **() => Promise\<void>**

  * **hasNextPage**

    **boolean**

  * **loading**

    **boolean**

  * **refetch**

    **() => Promise\<void>**

  * **shops**

    **Shop\[] | null**

    The followed shops returned from the query.

### UseFollowedShopsParams

* fetchPolicy

  ```ts
  DataHookFetchPolicy
  ```

* first

  ```ts
  number
  ```

* skip

  ```ts
  boolean
  ```

### DataHookFetchPolicy

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

### UseFollowedShopsReturns

* error

  ```ts
  Error | null
  ```

* fetchMore

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

* hasNextPage

  ```ts
  boolean
  ```

* loading

  ```ts
  boolean
  ```

* refetch

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

* shops

  The followed shops returned from the query.

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

* #### Example code

  ##### Default

  ```tsx
  import {useFollowedShops, Button} from '@shopify/shop-minis-react'

  export default function MyComponent() {
    const {shops, loading, error, hasNextPage, loadMore} = useFollowedShops({
      first: 10,
    })

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

    return (
      <>
        {/* Render shops here */}
        {hasNextPage && (
          <Button onClick={loadMore} disabled={loading}>
            Load More
          </Button>
        )}
      </>
    )
  }
  ```