---
title: useProductSearch
description: The useProductSearch hook fetches products based on a search query.
source_url:
  html: 'https://shopify.dev/docs/api/shop-minis/hooks/product/useproductsearch'
  md: 'https://shopify.dev/docs/api/shop-minis/hooks/product/useproductsearch.md'
---

# useProductSearch

The `useProductSearch` hook fetches products based on a search query.

**Note:**

In order to filter products by category, you can check [Shopify’s Product Taxonomy](https://shopify.github.io/product-taxonomy/releases/latest/). Then use the GID of the category. For example, to filter products in the Electronics category, you would use: \["gid://shopify/TaxonomyCategory/el"]

## use​Product​Search(**[params](#useproductsearchgeneratedtype-propertydetail-params)**​)

### Parameters

* **params**

  **UseProductSearchParams**

  **required**

### Returns

* **UseProductSearchReturns**

### UseProductSearchParams

* fetchPolicy

  ```ts
  DataHookFetchPolicy
  ```

* filters

  The filters to apply to the search.

  ```ts
  ProductFilters
  ```

* first

  ```ts
  number
  ```

* includeSensitive

  Whether to include sensitive products.

  ```ts
  boolean
  ```

* query

  The search query.

  ```ts
  string
  ```

* skip

  ```ts
  boolean
  ```

* sortBy

  The sort order of the results.

  ```ts
  ProductSearchSortBy
  ```

### DataHookFetchPolicy

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

### ProductFilters

* apparelSize

  ```ts
  ProductApparelSizeFilter[]
  ```

* available

  ```ts
  boolean
  ```

* category

  ```ts
  string[]
  ```

* color

  ```ts
  ProductColorFilter[]
  ```

* gender

  ```ts
  'MALE' | 'FEMALE' | 'NEUTRAL'
  ```

* includeShopIds

  ```ts
  string[]
  ```

* minimumRating

  ```ts
  number
  ```

* price

  ```ts
  { min?: number; max?: number; }
  ```

* shoeSize

  ```ts
  ProductShoeSizeFilter[]
  ```

### ProductApparelSizeFilter

```ts
'SIZE_3XL' | 'SIZE_4XL' | 'SIZE_5XL' | 'SIZE_L' | 'SIZE_M' | 'SIZE_S' | 'SIZE_XL' | 'SIZE_XS' | 'SIZE_XXL' | 'SIZE_XXS'
```

### ProductColorFilter

```ts
'BEIGE' | 'BLACK' | 'BLUE' | 'BROWN' | 'GOLD' | 'GREEN' | 'GREY' | 'NAVY' | 'ORANGE' | 'PINK' | 'PURPLE' | 'RED' | 'SILVER' | 'WHITE' | 'YELLOW'
```

### ProductShoeSizeFilter

```ts
'SIZE_4' | 'SIZE_4_5' | 'SIZE_5' | 'SIZE_5_5' | 'SIZE_6' | 'SIZE_6_5' | 'SIZE_7' | 'SIZE_7_5' | 'SIZE_8' | 'SIZE_8_5' | 'SIZE_9' | 'SIZE_9_5' | 'SIZE_10' | 'SIZE_10_5' | 'SIZE_11' | 'SIZE_11_5' | 'SIZE_12' | 'SIZE_12_5' | 'SIZE_13' | 'SIZE_13_5' | 'SIZE_14' | 'SIZE_14_5' | 'SIZE_15'
```

### ProductSearchSortBy

```ts
'MOST_RECENT' | 'PRICE_HIGH_TO_LOW' | 'PRICE_LOW_TO_HIGH' | 'RELEVANCE'
```

### UseProductSearchReturns

* error

  ```ts
  Error | null
  ```

* fetchMore

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

* hasNextPage

  ```ts
  boolean
  ```

* isTyping

  Whether the user is typing.

  ```ts
  boolean
  ```

* loading

  ```ts
  boolean
  ```

* products

  The products returned from the query.

  ```ts
  Product[] | null
  ```

* refetch

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

### Product

* compareAtPrice

  ```ts
  Money | null
  ```

* defaultVariantId

  ```ts
  string
  ```

* featuredImage

  ```ts
  ProductImage | null
  ```

* id

  ```ts
  string
  ```

* isFavorited

  ```ts
  boolean
  ```

* price

  ```ts
  Money
  ```

* referral

  ```ts
  boolean
  ```

* reviewAnalytics

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

* selectedVariant

  ```ts
  ProductVariant
  ```

* shop

  ```ts
  ProductShop
  ```

* title

  ```ts
  string
  ```

* variants

  ```ts
  ProductVariant[]
  ```

### Money

* amount

  ```ts
  Decimal
  ```

* currencyCode

  ```ts
  CurrencyCode
  ```

### Decimal

```ts
string
```

### CurrencyCode

```ts
'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BYR' | 'BZD' | 'CAD' | 'CDF' | 'CHF' | 'CLP' | 'CNY' | 'COP' | 'CRC' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JEP' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KID' | 'KMF' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LTL' | 'LVL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STD' | 'STN' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'UYU' | 'UZS' | 'VED' | 'VEF' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XCD' | 'XOF' | 'XPF' | 'XXX' | 'YER' | 'ZAR' | 'ZMW'
```

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

### ProductVariant

* availableForSale

  Whether the variant can be purchased. When \`false\`, calls to add the variant to cart or buy it through the SDK will fail. UI should be gated on this flag. May be \`undefined\` if the variant was sourced from an API that does not expose stock state.

  ```ts
  boolean
  ```

* compareAtPrice

  ```ts
  Money | null
  ```

* id

  ```ts
  string
  ```

* image

  ```ts
  ProductImage | null
  ```

* isFavorited

  ```ts
  boolean
  ```

* price

  ```ts
  Money
  ```

* title

  ```ts
  string
  ```

### ProductShop

* id

  ```ts
  string
  ```

* name

  ```ts
  string
  ```

Examples

### Examples

* ####

  ##### tsx

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

  export default function MyComponent() {
    const {products, loading} = useProductSearch({
      query: 'shirt',
      first: 10,
      filters: {
        color: ['RED'],
      },
    })

    console.log({products, loading})
  }
  ```

***