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. Then use the GID of the category. For example, to filter products in the Electronics category, you would use: ["gid://shopify/TaxonomyCategory/el"]

Anchor to useProductSearch
useProductSearch(
params
)

Anchor to useProductSearch-parametersParameters

Anchor to params params required

Anchor to useProductSearch-returnsReturns

UseProductSearchParams

fetchPolicy
```
DataHookFetchPolicy
```
filters
The filters to apply to the search.
```
ProductFilters
```
first
```
number
```
includeSensitive
Whether to include sensitive products.
```
boolean
```
query
The search query.
```
string
```
skip
```
boolean
```
sortBy
The sort order of the results.
```
ProductSearchSortBy
```

DataHookFetchPolicy

'cache-first' | 'network-only'

ProductFilters

apparelSize
```
ProductApparelSizeFilter[]
```
available
```
boolean
```
category
```
string[]
```
color
```
ProductColorFilter[]
```
gender
```
'MALE' | 'FEMALE' | 'NEUTRAL'
```
includeShopIds
```
string[]
```
minimumRating
```
number
```
price
```
{ min?: number; max?: number; }
```
shoeSize
```
ProductShoeSizeFilter[]
```

ProductApparelSizeFilter

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

ProductColorFilter

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

ProductShoeSizeFilter

'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

'MOST_RECENT' | 'PRICE_HIGH_TO_LOW' | 'PRICE_LOW_TO_HIGH' | 'RELEVANCE'

UseProductSearchReturns

error
```
Error | null
```
fetchMore
```
() => Promise<void>
```
hasNextPage
```
boolean
```
isTyping
Whether the user is typing.
```
boolean
```
loading
```
boolean
```
products
The products returned from the query.
```
Product[] | null
```
refetch
```
() => Promise<void>
```

Product

compareAtPrice
```
Money | null
```
defaultVariantId
```
string
```
featuredImage
```
ProductImage | null
```
id
```
string
```
isFavorited
```
boolean
```
price
```
Money
```
referral
```
boolean
```

reviewAnalytics

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

selectedVariant
```
ProductVariant
```
shop
```
ProductShop
```
title
```
string
```
variants
```
ProductVariant[]
```

Money

amount
```
Decimal
```
currencyCode
```
CurrencyCode
```

Decimal

string

CurrencyCode

'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
```
string | null
```
height
```
number | null
```
id
```
string | null
```
sensitive
```
boolean | null
```
thumbhash
```
string | null
```
url
```
string
```
width
```
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.
```
boolean
```
compareAtPrice
```
Money | null
```
id
```
string
```
image
```
ProductImage | null
```
isFavorited
```
boolean
```
price
```
Money
```
title
```
string
```

ProductShop

id
```
string
```
name
```
string
```

Examples

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})

}