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

# Rendering recommendations in a slider

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

To render recommendations in a slider, do the following:

1. Fetch recommendations, see: [this excerpt of the API integration guide](/api-guide/recommendations/api-client/fetching).
2. Render the recommendations using the `RecommendationSlider` function.

```ts theme={null}
import {
  RecommendationSlider,
  onExistsObserver,
  fetchDepictRecommendations,
} from "@depict-ai/js-ui";

const recommendations = fetchDepictRecommendations({
  merchant: "MERCHANT_ID",
  market: "MARKET", // See demo.depict.ai for available markets
  locale: "en_GB", // See demo.depict.ai for available locales
  type: "TYPE",
  // click the link above for more information on the options here
});

const recommendationSlider = RecommendationSlider({
  recommendations,
  productCard, // The productCard component you created in a previous step
});

onExistsObserver("#frontpage-recommendations", (element) =>
  element.append(recommendationSlider)
);
```

<Info>
  Looking for the
  [reference](/reference/recommendations-sdk/recommendations-sdk-js#recommendationslider-function)?
</Info>