> ## Documentation Index
> Fetch the complete documentation index at: https://docs.depict.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

Product listing pages are quite similar to search, except that there's no search field/search modal. Instead of being based on a search query, they're based on a so-called `listingQuery` which is an id representing what products to show.

### Why does "product listing page" mean something different in code?

Please see [naming discrepancies](/reference/glossary/naming-discrepancies) in the reference section for more information.

### The CategoryPage component

<Frame caption="A default `CategoryPage`">
  <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/listing/category-page.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=22fd8babc5955558f35e7caf18cee578" alt="A CategoryPage for Women / Dresses: the breadcrumb, a QuickLinks row of the sibling categories with Dresses highlighted, the title Dresses with the product count, Filter and Sort buttons, and a four-column grid of dresses with image, title and price" width="2880" height="2400" data-path="images/listing/category-page.png" />
</Frame>

## Additional exported components

Because you might want to have content between the BreadCrumbs, QuickLinks and the actual product listing, we also export the following components:

<Frame caption="QuickLinks">
  <img src="https://mintcdn.com/depictai/ihmAU-txdwCuskp_/images/listing/quicklinks.png?fit=max&auto=format&n=ihmAU-txdwCuskp_&q=85&s=63c6d0865ad64fa7c59121aa258a628e" alt="QuickLinks: a row of seven sibling-category chips (Bags, Dresses, Jewellery, Knitwear, Outerwear, Shoes, Watches) with the current category Dresses highlighted" width="1560" height="112" data-path="images/listing/quicklinks.png" />
</Frame>

<br />

<Frame caption="BreadCrumbs">
  <img src="https://mintcdn.com/depictai/ihmAU-txdwCuskp_/images/listing/breadcrumbs.png?fit=max&auto=format&n=ihmAU-txdwCuskp_&q=85&s=af7f016bdcb216307ed8459704d7a888" alt="BreadCrumbs: Women / Dresses" width="310" height="68" data-path="images/listing/breadcrumbs.png" />
</Frame>

See the [reference](/reference/listing-sdk/listing-page-react-sdk#the-categorypage-component) for more information.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.