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

# Transforming and enriching display data

<Warning>
  This page does not apply to installs made in 2025 or later of the Depict Shopify apps
</Warning>

The keen observer might notice that the displays lack one key ingredient: page urls (URL to the product page).

If you correctly add the display type to the `DepictSearchProvider`, you should also encounter a type error due to this. This happens because the Depict backend omits the page\_url for performance reasons.  We need to add it back in. If you need to add additional data to the product data you can also do so in this step. The advantage of doing it in the `DisplayTransformers` compared to the `productCard` is that the former is only ran once per server response, making it more suitable for making other API requests.

<Note>`displayTransformers` won't be run for `RecommendationSlider` and `RecommendationGrid`, you'll have to enrich the `recommendations` data before passing it to the component.</Note>

## Adding page urls

Provide `DisplayTransformers` to your `DepictSearchProvider` like in the example below:

```tsx theme={null}
import { DepictSearchProvider } from "@depict-ai/js-ui";
import { en } from "@depict-ai/js-ui/locales";
import { YourDisplay } from "./display-types.ts";

const searchProvider = new DepictSearchProvider<YourDisplay>({
  merchant: "MERCHANT_ID",
  market: "MARKET",
  searchPagePath: "PATH_TO_SEARCH_PAGE",
  locale: en,
  displayTransformers: {
    products: options => { // the functions in displayTransformers can be async
      return options.displays.map(display => ({
        ...display,
        variant_displays: display.variant_displays.map(variant => ({
          ...variant, // here you can add any extra data you want, but must add page_url
          page_url: "/" + context.market.name + "/p/" + variant.uri, // <- Change this
        })),
      }));
    },
    categories: options => {
      return options.data.map(categoryDisplay => ({
        ...categoryDisplay,
        page_url: "/" + context.market.name + "/c/" + categoryDisplay.uri // <- Change this
      }));
    }
  },
});
```

<Info>For more in-depth information and examples, check out the [reference](/reference/listings-search/display-transformers)</Info>