Categories & Collections
Adding the CategoryPage to your site
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 customProductCard
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?