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
```
options
The product's configurable options (e.g. Color, Size). Optional for backwards compatibility with products returned by older Shop app hosts; treat as `[]` when undefined.
```
ProductOption[]
```
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
```

ProductOption

A configurable product option (e.g. Color, Size) and the set of values it accepts across all variants.

id
Globally-unique identifier for the option.
```
string
```
name
The display name of the option. E.g. `Color`.
```
string
```
values
All possible values for the option across variants. E.g. `['Red', 'Blue']`.
```
string[]
```

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
```
selectedOptions
The (name, value) pairs of product options this variant corresponds to. E.g. `[{name: 'Color', value: 'Green'}, {name: 'Size', value: 'M'}]`. Optional for backwards compatibility with variants returned by older Shop app hosts; treat as `[]` when undefined.
```
ProductSelectedOption[]
```
title
```
string
```

ProductSelectedOption

A single (name, value) pair that identifies which value of a product option a variant corresponds to. E.g. `{name: 'Color', value: 'Green'}`.

name
```
string
```
value
```
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})

}

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

Was this page helpful?

Anchor to useProductSearchuseProductSearch(paramsparams)

Anchor to useProductSearch-parametersParameters

Anchor to useProductSearch-returnsReturns

UseProductSearchParams

DataHookFetchPolicy

ProductFilters

ProductApparelSizeFilter

ProductColorFilter

ProductShoeSizeFilter

ProductSearchSortBy

UseProductSearchReturns

Product

Money

Decimal

CurrencyCode

ProductImage

ProductOption

ProductVariant

ProductSelectedOption

ProductShop

Examples

tsx

Anchor to useProductSearch
useProductSearch(
params
)