The DepictCategoryProvider (JavaScript) and CategoryPage component (React) has a property you can define alongside categoryId called listingType.

JavaScript SDK:

When constructed, pass a listingType property to the DepictCategoryProvider (along with the categoryId).

import { DepictCategoryProvider } from "@depict-ai/js-ui";
import { YourDisplay } from "./display-types.ts"
import { en } from "@depict-ai/js-ui/locales";

const categoryProvider = new DepictCategoryProvider<YourDisplay>({
  merchant: "MERCHANT_ID",
  market: "MARKET",
  categoryId: "CATEGORY_ID",
  locale: en,
  listingType: "collection",

On subsequent navigations, update the values on the DepictCategoryProvider instance.

categoryProvider.categoryId = "t-shirts";
categoryProvider.listingType = /* Your listing type here */

React SDK:

  listingType={/* Your listing type here */}

It has two possible values:

  • "category"
  • "collection"

📘 Category vs. Collection


A grouping of products imported from a separate system into Depict like Centra, Shopify, etc.
Listed in the Depict Portal under “Categories”.


A grouping of products assembled inside Depict.

Listed in the Depict Portal under “Collections”.

Note: Currently being rolled out and might not be available to your store yet. Ask your Depict contact to know for sure.

Listing type inference

If you do not specify the listing type, it will be inferred based on a hierarchy.

The hierarchy is the following:

  1. Collection
  2. Category

This means for a given category id e.g., my_id, a check will first be made to see if the collection my_id exists; if so, those products will be returned. If not, the products for the category my_id will be returned instead.

Not relying on inference can speed up the loading of your Depict products. If possible, you should specify a listing type value. How you detect the type will be unique to your store and setup. The following are some ideas:

  • Checking the URL if it differs.
    E.g. location.pathname.includes("/collection/") ? "collection" : "category"
  • Using a value from your CMS.
    E.g. cmsData.isDepictCategory ? "category" : "collection"