​
The CategoryPage component

After setting up dynamic routing to your category & collection pages, you must set up and configure your category & collection page results using the CategoryPage component. Import the component from the Depict UI and nest it into your application’s category page component.

tsx
import { CategoryPage } from "@depict-ai/react-ui";
import ProductCard from "./ProductCard";

function Category() {
  return (
    <div>
      <CategoryPage categoryId="CATEGORY_IDENTIFIER" productCard={ProductCard} />
    </div>
  );
}

export default Category;
  • The productCard prop accepts your custom ProductCard component that receives and renders your category data.
  • The CategoryId prop accepts the unique identifier for the current product category/collection.
To change what category the CategoryPage component is displaying, change the categoryId prop to the new category’s unique identifier. Make sure to update it as the user navigates.
Review the types or reference for other configurable properties

​
Different layout possibilities

The default configuration displays the current category title above the product cards. If 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:

import { EmbeddedNumProducts } from "@depict-ai/react-ui"; // <- Add this import

 <CategoryPage
    categoryId="CATEGORY_IDENTIFIER"
    productCard={ProductCard}
    categoryTitlePlugin={EmbeddedNumProducts} // <- Add this property
  />

The CategoryPage in its most compact version, optimizing for the content being above the fold

Was this page helpful?

OverviewComplete - categories & collections added