> ## 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.

# Adding the CategoryPage to your site

## The CategoryPage component

Like [for the search page](/js-ui-guide/search/creating-page), we're layering an SPA on top of your site to enable fast client side routing between the category pages.

Set up and configure your product listing pages using the `CategoryPage` component and a PageReplacer as follows.

```tsx tsx theme={null}
import { CategoryPage, SetupPageReplacer } from "@depict-ai/js-ui";

SetupPageReplacer({
    // this should return true for pages that are a category page
    isPageToReplace: url => url.pathname == "/category.html",
    // selector of the element that should be replaced with the CategoryPage
    selectorToReplace: `.replace-for-depict`,
    renderContent: () =>
      CategoryPage({
        categoryProvider, // The categoryProvider instance you created in the previous step
        productCard, // The productCard component you created in a previous step
      }),
  });
```

<Note>Review the types or [reference](/reference/listing-sdk/js-ui#categorypage-function) for other configurable properties</Note>

## Different layout possibilities

The default configuration displays the current category title above the product cards.
<i>If</i> you want to render the title of the category yourself, do the following to remove the default title and also make the CategoryPage as compact as possible:

```tsx theme={null}
import { CategoryPage, SetupPageReplacer, EmbeddedNumProducts } from "@depict-ai/js-ui";

SetupPageReplacer({
    isPageToReplace: url => url.pathname == "/category.html",
    selectorToReplace: `.replace-for-depict`,
    renderContent: () =>
      CategoryPage({
        categoryTitlePlugin: EmbeddedNumProducts, // <- Add this
        categoryProvider,
        productCard,
      }),
  });
```

<Frame caption="The CategoryPage in its most compact version, optimizing for the content being above the fold">
  <img src="https://mintcdn.com/depictai/VbPAGLCs8-reBo4C/images/listing/category-page-compact.png?fit=max&auto=format&n=VbPAGLCs8-reBo4C&q=85&s=6f154692432f8d90c3fd66d42108bd86" alt="The compact CategoryPage: the breadcrumb, the QuickLinks row, then a toolbar with the product count between the Filter and Sort buttons, directly above the product grid, with no title row" width="2784" height="2380" data-path="images/listing/category-page-compact.png" />
</Frame>

## Navigating to category pages without reloading the page

You can link to the category pages and then PageReplacer will only single-page-navigate between the different category pages.

If you, however, want to replace the current page with a category page without a reload, you can do the following:

```html theme={null}
<a href="URL_OF_CATEGORY" data-listing-id="LISTING-ID" class="category-link">CATEGORY_NAME</a>
```

```tsx theme={null}
import { onExistsObserver } from "@depict-ai/js-ui";

onExistsObserver<HTMLAnchorElement>("a.category-link", element => element.addEventListener("click", ev => {
  if (ev.button || ev.metaKey || ev.ctrlKey) return; // Still allow cmd-click to open in new tab
  ev.preventDefault(); // Stop the browser from doing a full page navigation
  const new_id = element.dataset.listingId!;
  history.pushState({ ...history.state }, "", element.href); // change URL to the product listing page
  categoryProvider.listingQuery = { type: "listingId", id: new_id }; // change what product listing is being displayed to the new product listing page
}));
```

<Check>
  Product listing pages are done: you can navigate between them and browse products. Next, [set up tracking](/js-ui-guide/tracking/introduction).
</Check>


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