Product listing page (PLP)
The grid of many products with filters and sorting: the aisle you walk down before picking one thing up.
See it
What it is
The PLP is the browse page: a grid of product cards with filters, sorting, and pagination. It is the aisle people walk down before they pick one thing up, and its whole job is narrowing. Collection pages, category pages, search results, and 'shop all' are all PLPs wearing different hats.
The card is the unit of work: image, title, price, sometimes swatches, a badge (new, sale, low stock), and often quick add or quick view so people can buy or peek without leaving the grid. Sort order is a merchandising decision, not a default: 'featured' means whatever you decide it means, and hand-pinning your best sellers to the first row usually beats any automatic sort.
Gotcha: put filter and sort state in the URL. If selecting 'blue, size M, under $50' does not change the address bar, shoppers cannot share or bookmark it, the back button destroys their work, and search engines never see the filtered view. Second trap: cards with inconsistent image crops. Lock one aspect ratio across the whole grid or the rows will jitter and the page will read as amateur no matter how good the photos are.
Ask AI for it
Build a product listing page: a responsive grid of 4 columns at desktop, 3 at tablet, 2 on mobile, with a sticky filter sidebar at desktop that becomes a bottom-sheet 'Filters' button on mobile. Product cards use a fixed 4:5 image that cross-fades to a second lifestyle image on hover, a badge in the top-left corner for sale or new, title, price with struck-through compare-at, up to 4 color swatches with a '+3' overflow chip, and a quick-add button that fades in on hover. Above the grid: a results count, a sort dropdown (featured, newest, price low to high, price high to low), and removable filter chips for active facets. Encode all filter and sort state in URL query params, and page with a 'load more' button rather than infinite scroll.