Skip to main content

Products & Search

The SDK provides hooks and services for browsing your Shopify catalog — product listing, single product detail, collections, and full-text search. All queries go through the Shopify Storefront GraphQL API via the ProductService.

Quick Reference

HookReturnsPurpose
useProducts()Paginated product listInfinite-scroll grids
useProduct(handle)Single productProduct detail screen
useCollections()Collection listCollection browser
useSearch()Search resultsSearch input UI

Service Methods

All hooks wrap the ProductService, which is also accessible directly from useStackfront():
const { products } = useStackfront();
await products.getProducts(20, afterCursor);
await products.getProduct('cool-shirt');
await products.getProductById('gid://shopify/Product/123');
await products.getCollections(10, afterCursor);
await products.getCollection('summer-collection');
await products.searchProducts('red shoes', 20);

Response Shape

All product queries return Shopify’s standard GraphQL product shape via the Storefront API. See Types Reference for the full type details.