usePopularProducts

Deprecated

usePopularProducts is deprecated and will be removed in a future version. Use useRecommendedProducts for personalized discovery, or useProductSearch for search-driven product discovery.

The usePopularProducts hook fetches popular products from the catalog. Avoid new usage.

Anchor to usePopularProducts
usePopularProducts(
params
)

Anchor to usePopularProducts-parametersParameters

Anchor to params params

Anchor to usePopularProducts-returnsReturns

UsePopularProductsParams

fetchPolicy
```
DataHookFetchPolicy
```
first
```
number
```
skip
```
boolean
```

DataHookFetchPolicy

'cache-first' | 'network-only'

UsePopularProductsReturns

error
```
Error | null
```
fetchMore
```
() => Promise<void>
```
hasNextPage
```
boolean
```
loading
```
boolean
```
products
```
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 {usePopularProducts, Button} from '@shopify/shop-minis-react'

export default function MyComponent() {

const {products, loading, error, hasNextPage, loadMore} = usePopularProducts({

first: 10,

})

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

return (

{/* Render products here */}

{hasNextPage && (

Load More Products

</Button>

)}

</>

)

}

Examples

tsx

import {usePopularProducts, Button} from '@shopify/shop-minis-react'

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

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

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

Was this page helpful?

Anchor to usePopularProductsusePopularProducts(paramsparams)

Anchor to usePopularProducts-parametersParameters

Anchor to usePopularProducts-returnsReturns

UsePopularProductsParams

DataHookFetchPolicy

UsePopularProductsReturns

Product

Money

Decimal

CurrencyCode

ProductImage

ProductOption

ProductVariant

ProductSelectedOption

ProductShop

Examples

tsx

Anchor to usePopularProducts
usePopularProducts(
params
)