--- title: useProductSearch description: |- 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"] api_name: shop-minis 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 --- # use​Product​Search 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\"] ## use​Product​Search(**[params](#-propertydetail-params)**​) ### Parameters * **params** **UseProductSearchParams** **required** ### Returns * **UseProductSearchReturns** ### ### UseProductSearchReturns * **error** **Error | null** * **fetchMore** **() => Promise\** * **hasNextPage** **boolean** * **isTyping** **boolean** Whether the user is typing. * **loading** **boolean** * **products** **Product\[] | null** The products returned from the query. * **refetch** **() => Promise\** ### 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 ``` * 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 ``` ### 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 * 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 * #### Example code ##### Default ```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}) } ```