Product listing quickstarts

Product Listing supports the same two implementation styles as Search: a fast Search.js path for storefront pages and a direct API path for fully custom listing experiences.

Choose your path

Fast storefront path

Search.js

Use Search.js when you want to stand up category and brand pages quickly with filtering, sorting, and pagination built in.

• Fastest way to ship listings on the web.
• Shares tooling with Search.js search pages.
• Good fit when the browser owns the rendering.

Flexible path

Product Listing API

Use the API when you need custom category logic, hierarchical navigation, or tighter control over backend-rendered pages.

• Lets you shape listing pages exactly as needed.
• Works well for complex category hierarchies.
• Fits custom storefronts and backend integrations.

Quickstart collection

General

Start with the architecture

Understand the product listing feature and choose the right technical direction.

Understand product listing

Review the feature set, merchandising model, and the main integration paths.

Search.js

Frontend library path

Choose this when you want to reuse Search.js to render listing pages.

Build a listing page with Search.js

Launch a product listing page quickly with Search.js and a category context.

API

Custom implementation path

Use these guides when you want to build the listing flow yourself.

Your first API-powered listing

Render a minimal listing experience directly from the product listing API.

Build a navigable category page

Add breadcrumbs, subcategory navigation, filters, and pagination to the API flow.