---
title: Product Listing Page (PLP)
description: Collection and search results pages with filtering, sorting, and infinite scroll.
type: guide
---

# Product Listing Page (PLP)



<PLPBrowser />

The Product Listing Page (PLP) covers two routes — `/collections/[handle]` for browsing a collection and `/search` for query-based results. Both share the same grid, filtering, sorting, and infinite scroll.

## How it works

**Static header, live grid.** Collection metadata (title, description, image) is awaited at the top of the page and baked into the static shell, the same pattern as the [PDP](/docs/anatomy/pages/pdp). The product grid is the opposite: it's read live from Shopify on every request, deliberately uncached. Caching it produced duplicate products at page boundaries, because two cached cursor pages could be snapshotted at different times and drift out of order. Reading every page live keeps a scroll session's cursors consistent. `/search` has no cacheable header at all — its body is entirely query-driven — so it skips the static-shell step altogether.

**Filter, sort, and cursor state live in the URL.** Changing a filter or sort is a `searchParams` update, not client state, so results are shareable and bookmarkable. `useOptimistic` shows the new filter state instantly while the server request is in flight, and `useTransition` keeps sort changes non-blocking — so the UI feels instant even though every result comes from a live request.

## Out of the box

* **Faceted filtering** — checkbox filters for size, color, vendor, type, and tags, plus a price range slider with presets.
* **Swatch filters** — color (or other swatch-enabled) filters render as a color/image grid instead of a text list, driven by Shopify's filter presentation data.
* **Sorting** — all eight Shopify sort keys on collections; search excludes name and date, which Shopify's search sort doesn't support.
* **Infinite scroll** — cursor-based pagination that loads more products as the user scrolls, with duplicate protection against a live ranking shift mid-scroll.
* **Toolbar** — filter trigger, result count, and sort dropdown above the grid.
* **Predictive search** — suggestion chips and product results as the user types, from the nav search modal.
* **Structured data** — Collection JSON-LD on collection pages.

None of the PLP's features are toggled in `shop.config.ts` today — they ship on for every storefront.


---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)