> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upgrade from Recommend JS to InstantSearch.js

> The Recommend widgets are part of InstantSearch.js. Learn how you can upgrade from Recommend JS.

export const Index = () => <Tooltip tip="An Algolia index is a searchable dataset that consists of records and configuration settings. These settings define how the records are searched and ranked.">
    index
  </Tooltip>;

The widgets for displaying recommendations are part of InstantSearch.js,
starting with version 4.69.0.
The Algolia JavaScript API client supports the Recommend API starting with version 4.23.2.
With this, you can integrate recommendations seamlessly into your InstantSearch app,
without having to install additional packages.

## Packages

Add the `instantsearch.js` and `algoliasearch` packages to your project,
and remove the `@algolia/recommend` and `@algolia/recommend-js` packages:

<CodeGroup>
  ```sh npm theme={"system"}
  npm install algoliasearch instantsearch.js
  npm uninstall @algolia/recommend-js @algolia/recommend
  ```

  ```sh yarn theme={"system"}
  yarn add algoliasearch instantsearch.js
  yarn remove @algolia/recommend-js @algolia/recommend
  ```
</CodeGroup>

## Imports

Import the Recommend widgets from InstantSearch.js:

```js JavaScript icon=code theme={"system"}
import { frequentlyBoughtTogether } from '@algolia/recommend-js'; // [!code --]
import { frequentlyBoughtTogether } from 'instantsearch.js/es/widgets'; // [!code ++]
```

<Warning>
  The `trendingFacets` function is no longer available.
  To replace it, see [widgets](#widgets).
</Warning>

## Usage

Add the Recommend widgets to the [`instantsearch`](/doc/api-reference/widgets/instantsearch/js) component.
Pass the API client and <Index /> name to the `instantsearch` widget:

```diff JavaScript icon=code theme={"system"}
- import { frequentlyBoughtTogether } from '@algolia/recommend-js';
+ import instantsearch from 'instantsearch.js';
+ import { frequentlyBoughtTogether } from 'instantsearch.js/es/widgets';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

+ const search = instantsearch({
+  searchClient,
+  indexName: 'YOUR_INDEX_NAME',
+ }).addWidgets([
    frequentlyBoughtTogether({
      container: '#frequentlyBoughtTogether',
-     recommendClient,
-     indexName: 'YOUR_INDEX_NAME',
      objectIDs: ['5723537'],
    });
+ ]);
+ search.start();
```

## Widgets

| Recommend JS               | InstantSearch.js                                                                       | Changes                                               |
| -------------------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------- |
| `frequentlyBoughtTogether` | [`frequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js) | [Prop changes](#changes-for-frequentlyboughttogether) |
| `relatedProducts`          | [`relatedProducts`](/doc/api-reference/widgets/related-products/js)                    | [Prop changes](#changes-for-relatedproducts)          |
| `trendingItems`            | [`trendingItems`](/doc/api-reference/widgets/trending-items/js)                        | [Prop changes](#changes-for-trendingitems)            |
| `trendingFacets`           | Removed                                                                                | [Alternative](#alternative-for-trendingfacets)        |
| `lookingSimilar`           | [`lookingSimilar`](/doc/api-reference/widgets/looking-similar/js)                      | [Prop changes](#changes-for-lookingsimilar)           |

### Changes for `frequentlyBoughtTogether`

#### Move `recommendClient` and `indexName` to `instantsearch`

The [`frequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js) widget no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchClient` and the `ìndexName` to [`instantsearch`](/doc/api-reference/widgets/instantsearch/js).

```diff JavaScript icon=code theme={"system"}
- import { frequentlyBoughtTogether } from '@algolia/recommend-js';
+ import instantsearch from 'instantsearch.js';
+ import { frequentlyBoughtTogether } from 'instantsearch.js/es/widgets';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

+ const search = instantsearch({
+  searchClient,
+  indexName: 'YOUR_INDEX_NAME',
+ }).addWidgets([
    frequentlyBoughtTogether({
      container: '#frequentlyBoughtTogether',
-     recommendClient,
-     indexName: 'YOUR_INDEX_NAME',
      objectIDs: ['5723537'],
    });
+ ]);
+ search.start();
```

#### Replace `view` with the `layout` template or the `connectFrequentlyBoughtTogether` connector

The [`frequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js) widget no longer provides a `view` prop.
To fully customize the UI, use either the `layout` template or the [`connectFrequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js#customize-the-ui-with-connectfrequentlyboughttogether) connector instead.

##### Layout template

```diff JavaScript icon=code theme={"system"}
- import { frequentlyBoughtTogether } from '@algolia/recommend-js';
+ import { frequentlyBoughtTogether } from 'instantsearch.js/es/widgets';

  frequentlyBoughtTogether({
    container: '#frequentlyBoughtTogether',
-   view: (props) => { /* ... */ },
+   templates: {
+     layout({ items }, { html }) {
+       // …
+     },
+   }
  });
```

##### Connector

```diff JavaScript icon=code theme={"system"}
- import { frequentlyBoughtTogether } from '@algolia/recommend-js';
+ import {
+   connectFrequentlyBoughtTogether,
+ } from 'instantsearch.js/es/connectors';

+ const customFrequentlyBoughtTogether = connectFrequentlyBoughtTogether(({ items, widgetParams }) => {
+   const container = document.querySelector(widgetParams.container);
+   container.innerHTML = `/* ... */`;
+ });

- frequentlyBoughtTogether({
+ customFrequentlyBoughtTogether({
    container: '#frequentlyBoughtTogether',
-   view: (props) => { /* ... */ },
  }),
```

#### Replace component props with `templates`

The [`frequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js) widget uses [templates](/doc/api-reference/widgets/frequently-bought-together/js#templates) to customize specific parts of its UI.

| Recommend JS        | InstantSearch.js |
| ------------------- | ---------------- |
| `headerComponent`   | `header`         |
| `itemComponent`     | `item`           |
| `fallbackComponent` | `empty`          |

<CodeGroup>
  ```diff headerComponent theme={"system"}
  frequentlyBoughtTogether({
  - headerComponent({ classNames, recommendations, html }) {
  -   return html`<h2 class=${classNames.title}>
  -     Recommendations (${recommendations.length})
  -   </h2>`;
  - },
  + templates: {
  +   header({ cssClasses, items }, { html }) {
  +     return html`<h2 class=${cssClasses.title}>
  +       Recommendations (${items.length})
  +     </h2>`;
  +   }
  + },
  });
  ```

  ```diff itemComponent theme={"system"}
  frequentlyBoughtTogether({
  - itemComponent({ item, html }) {
  -   return html`<p>${item.name}</p>`;
  - },
  + templates: {
  +   item(recommendation, { html }) {
  +     return html`<p>${recommendation.name}</p>`;
  +   }
  + },
  });
  ```

  ```diff fallbackComponent theme={"system"}
  frequentlyBoughtTogether({
  - fallbackComponent({ html }) {
  + templates: {
  +   empty(_, { html }) {
        return html`<p>No recommendations.</p>`;
  +   }
    },
  });
  ```
</CodeGroup>

#### Replace `translations` with `templates`

The [`frequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js) widget uses [templates](/doc/api-reference/widgets/frequently-bought-together/js#templates) to provide translations to the header.

```diff JavaScript icon=code theme={"system"}
frequentlyBoughtTogether({
- translations: {
-   title: 'Recommendations',
- },
+ templates: {
+   header: ({ cssClasses }, { html }) {
+     return html`<h2 class=${cssClasses.title}>Recommendations</h2>`;
+   },
+ },
});
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff JavaScript icon=code theme={"system"}
frequentlyBoughtTogether({
- maxRecommendations: 3,
+ limit: 3,
});
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff JavaScript icon=code theme={"system"}
frequentlyBoughtTogether({
- environment: global,
});
```

#### Replace `classNames` with `cssClasses`

The `cssClasses` prop replaces the `classNames` prop.

```diff JavaScript icon=code theme={"system"}
frequentlyBoughtTogether({
- classNames: {
+ cssClasses: {
    root: 'MyCustomFrequentlyBoughtTogether',
+   emptyRoot: 'MyCustomFrequentlyBoughtTogether-emptyRoot',
    title: 'MyCustomFrequentlyBoughtTogether-title',
    container: 'MyCustomFrequentlyBoughtTogether-container',
    list: 'MyCustomFrequentlyBoughtTogether-list',
    item: 'MyCustomFrequentlyBoughtTogether-item',
  },
});
```

### Changes for `relatedProducts`

#### Move `recommendClient` and `indexName` to `instantsearch`

The [`relatedProducts`](/doc/api-reference/widgets/related-products/js) widget no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`instantsearch`](/doc/api-reference/widgets/instantsearch/js).

```diff JavaScript icon=code theme={"system"}
- import { relatedProducts } from '@algolia/recommend-js';
+ import instantsearch from 'instantsearch.js';
+ import { relatedProducts } from 'instantsearch.js/es/widgets';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

+ const search = instantsearch({
+  searchClient,
+  indexName: 'YOUR_INDEX_NAME',
+ }).addWidgets([
    relatedProducts({
      container: '#relatedProducts',
-     recommendClient,
-     indexName: 'YOUR_INDEX_NAME',
      objectIDs: ['5723537'],
    });
+ ]);
+ search.start();
```

#### Replace `view` with the `layout` template or the `connectRelatedProducts` connector

The [`relatedProducts`](/doc/api-reference/widgets/related-products/js) widget no longer provides a `view` prop.
To fully customize the UI, use either the `layout` template or the [`connectRelatedProducts`](/doc/api-reference/widgets/related-products/js#customize-the-ui-with-connectrelatedproducts) connector instead.

##### Layout template

```diff JavaScript icon=code theme={"system"}
- import { relatedProducts } from '@algolia/recommend-js';
+ import { relatedProducts } from 'instantsearch.js/es/widgets';

  relatedProducts({
    container: '#relatedProducts',
-   view: (props) => { /* ... */ },
+   templates: {
+     layout({ items }, { html }) {
+       // …
+     },
+   }
  });
```

##### Connector

```diff JavaScript icon=code theme={"system"}
- import { relatedProducts } from '@algolia/recommend-js';
+ import {
+   connectRelatedProducts,
+ } from 'instantsearch.js/es/connectors';

+ const customRelatedProducts = connectRelatedProducts(({ items, widgetParams }) => {
+   const container = document.querySelector(widgetParams.container);
+   container.innerHTML = `/* ... */`;
+ });

- relatedProducts({
+ customRelatedProducts({
    container: '#relatedProducts',
-   view: (props) => { /* ... */ },
  }),
```

#### Replace component props with `templates`

The [`relatedProducts`](/doc/api-reference/widgets/related-products/js) widget uses [templates](/doc/api-reference/widgets/related-products/js#templates) to customize specific parts of its UI.

| Recommend JS        | InstantSearch.js |
| ------------------- | ---------------- |
| `headerComponent`   | `header`         |
| `itemComponent`     | `item`           |
| `fallbackComponent` | `empty`          |

<CodeGroup>
  ```diff headerComponent theme={"system"}
  relatedProducts({
  - headerComponent({ classNames, recommendations, html }) {
  -   return html`<h2 class=${classNames.title}>
  -     Recommendations (${recommendations.length})
  -   </h2>`;
  - },
  + templates: {
  +   header({ cssClasses, items }, { html }) {
  +     return html`<h2 class=${cssClasses.title}>
  +       Recommendations (${items.length})
  +     </h2>`;
  +   }
  + },
  });
  ```

  ```diff itemComponent theme={"system"}
  relatedProducts({
  - itemComponent({ item, html }) {
  -   return html`<p>${item.name}</p>`;
  - },
  + templates: {
  +   item(recommendation, { html }) {
  +     return html`<p>${recommendation.name}</p>`;
  +   }
  + },
  });
  ```

  ```diff fallbackComponent theme={"system"}
  relatedProducts({
  - fallbackComponent({ html }) {
  + templates: {
  +   empty(_, { html }) {
        return html`<p>No recommendations.</p>`;
  +   }
    },
  });
  ```
</CodeGroup>

#### Replace `translations` with `templates`

The [`relatedProducts`](/doc/api-reference/widgets/related-products/js) widget uses [templates](/doc/api-reference/widgets/related-products/js#templates) to provide translations to the header.

```diff JavaScript icon=code theme={"system"}
relatedProducts({
- translations: {
-   title: 'Recommendations',
- },
+ templates: {
+   header: ({ cssClasses }, { html }) {
+     return html`<h2 class=${cssClasses.title}>Recommendations</h2>`;
+   },
+ },
});
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff JavaScript icon=code theme={"system"}
relatedProducts({
- maxRecommendations: 3,
+ limit: 3,
});
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff JavaScript icon=code theme={"system"}
relatedProducts({
- environment: global,
});
```

#### Replace `classNames` with `cssClasses`

The `cssClasses` prop replaces the `classNames` prop.

```diff JavaScript icon=code theme={"system"}
relatedProducts({
- classNames: {
+ cssClasses: {
    root: 'MyCustomRelatedProducts',
+   emptyRoot: 'MyCustomRelatedProducts-emptyRoot',
    title: 'MyCustomRelatedProducts-title',
    container: 'MyCustomRelatedProducts-container',
    list: 'MyCustomRelatedProducts-list',
    item: 'MyCustomRelatedProducts-item',
  },
});
```

### Changes for `trendingItems`

#### Move `recommendClient` and `indexName` to `instantsearch`

The [`trendingItems`](/doc/api-reference/widgets/trending-items/js) widget no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchClient` and the `ìndexName` to [`instantsearch`](/doc/api-reference/widgets/instantsearch/js).

```diff JavaScript icon=code theme={"system"}
- import { trendingItems } from '@algolia/recommend-js';
+ import instantsearch from 'instantsearch.js';
+ import { trendingItems } from 'instantsearch.js/es/widgets';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

+ const search = instantsearch({
+  searchClient,
+  indexName: 'YOUR_INDEX_NAME',
+ }).addWidgets([
    trendingItems({
      container: '#trendingItems',
-     recommendClient,
-     indexName: 'YOUR_INDEX_NAME',
    });
+ ]);
+ search.start();
```

#### Replace `view` with the `layout` template or the `connectTrendingItems` connector

The [`trendingItems`](/doc/api-reference/widgets/trending-items/js) widget no longer provides a `view` prop.
To fully customize the UI, use either the `layout` template or the [`connectTrendingItems`](/doc/api-reference/widgets/trending-items/js#customize-the-ui-with-connecttrendingitems) connector instead.

##### Layout template

```diff JavaScript icon=code theme={"system"}
- import { trendingItems } from '@algolia/recommend-js';
+ import { trendingItems } from 'instantsearch.js/es/widgets';

  trendingItems({
    container: '#trendingItems',
-   view: (props) => { /* ... */ },
+   templates: {
+     layout({ items }, { html }) {
+       // …
+     },
+   }
  });
```

##### Connector

```diff JavaScript icon=code theme={"system"}
- import { trendingItems } from '@algolia/recommend-js';
+ import {
+   connectTrendingItems,
+ } from 'instantsearch.js/es/connectors';

+ const customTrendingItems = connectTrendingItems(({ items, widgetParams }) => {
+   const container = document.querySelector(widgetParams.container);
+   container.innerHTML = `/* ... */`;
+ });

- trendingItems({
+ customTrendingItems({
    container: '#trendingItems',
-   view: (props) => { /* ... */ },
  }),
```

#### Replace component props with templates

The [`trendingItems`](/doc/api-reference/widgets/trending-items/js) widget uses [templates](/doc/api-reference/widgets/trending-items/js#templates) to customize specific parts of its UI.

| Recommend JS        | InstantSearch.js |
| ------------------- | ---------------- |
| `headerComponent`   | `header`         |
| `itemComponent`     | `item`           |
| `fallbackComponent` | `empty`          |

<CodeGroup>
  ```diff headerComponent theme={"system"}
  trendingItems({
  - headerComponent({ classNames, recommendations, html }) {
  -   return html`<h2 class=${classNames.title}>
  -     Recommendations (${recommendations.length})
  -   </h2>`;
  - },
  + templates: {
  +   header({ cssClasses, items }, { html }) {
  +     return html`<h2 class=${cssClasses.title}>
  +       Recommendations (${items.length})
  +     </h2>`;
  +   }
  + },
  });
  ```

  ```diff itemComponent theme={"system"}
  trendingItems({
  - itemComponent({ item, html }) {
  -   return html`<p>${item.name}</p>`;
  - },
  + templates: {
  +   item(recommendation, { html }) {
  +     return html`<p>${recommendation.name}</p>`;
  +   }
  + },
  });
  ```

  ```diff fallbackComponent theme={"system"}
  trendingItems({
  - fallbackComponent({ html }) {
  + templates: {
  +   empty(_, { html }) {
        return html`<p>No recommendations.</p>`;
  +   }
    },
  });
  ```
</CodeGroup>

#### Replace `translations` with `templates`

The [`trendingItems`](/doc/api-reference/widgets/trending-items/js) widget uses [templates](/doc/api-reference/widgets/trending-items/js#templates) to provide translations to the header.

```diff JavaScript icon=code theme={"system"}
trendingItems({
- translations: {
-   title: 'Recommendations',
- },
+ templates: {
+   header: ({ cssClasses }, { html }) {
+     return html`<h2 class=${cssClasses.title}>Recommendations</h2>`;
+   },
+ },
});
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff JavaScript icon=code theme={"system"}
trendingItems({
- maxRecommendations: 3,
+ limit: 3,
});
```

#### Remove `environment`

The `environment` prop is no longer needed.

```diff JavaScript icon=code theme={"system"}
trendingItems({
- environment: global,
});
```

#### Replace `classNames` with `cssClasses`

The `cssClasses` prop replaces the `classNames` prop.

```diff JavaScript icon=code theme={"system"}
trendingItems({
- classNames: {
+ cssClasses: {
    root: 'MyCustomTrendingItems',
+   emptyRoot: 'MyCustomTrendingItems-emptyRoot',
    title: 'MyCustomTrendingItems-title',
    container: 'MyCustomTrendingItems-container',
    list: 'MyCustomTrendingItems-list',
    item: 'MyCustomTrendingItems-item',
  },
});
```

### Alternative for `trendingFacets`

InstantSearch.js doesn't include a widget for `trendingFacets`.
If you need it, use the [`trendingFacets` function](https://algolia.com/old-docs/deprecated/recommend/api-reference/recommend-js/trendingFacets/)
from the deprecated Recommend JS library.

### Changes for `lookingSimilar`

#### Move `recommendClient` and `indexName` to `instantsearch`

The [`lookingSimilar`](/doc/api-reference/widgets/looking-similar/js) widget no longer needs `recommendClient` and `indexName` props.
Instead, pass a `searchChlient` and the `ìndexName` to [`instantsearch`](/doc/api-reference/widgets/instantsearch/js).

```diff JavaScript icon=code theme={"system"}
- import { lookingSimilar } from '@algolia/recommend-js';
+ import instantsearch from 'instantsearch.js';
+ import { lookingSimilar } from 'instantsearch.js/es/widgets';
- import recommend from '@algolia/recommend';
+ import algoliasearch from 'algoliasearch/lite';

- const recommendClient = recommend('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');
+ const searchClient = algoliasearch('ALGOLIA_APPLICATION_ID', 'ALGOLIA_SEARCH_API_KEY');

+ const search = instantsearch({
+  searchClient,
+  indexName: 'YOUR_INDEX_NAME',
+ }).addWidgets([
    lookingSimilar({
      container: '#lookingSimilar',
-     recommendClient,
-     indexName: 'YOUR_INDEX_NAME',
      objectIDs: ['5723537'],
    });
+ ]);
+ search.start();
```

#### Replace `view` with the `layout` template or the `connectLookingSimilar` connector

The [`lookingSimilar`](/doc/api-reference/widgets/looking-similar/js) widget no longer provides a `view` prop.
To fully customize the UI, use either the `layout` template or the [`connectLookingSimilar`](/doc/api-reference/widgets/looking-similar/js#customize-the-ui-with-connectlookingsimilar) connector instead.

##### Layout template

```diff JavaScript icon=code theme={"system"}
- import { lookingSimilar } from '@algolia/recommend-js';
+ import { lookingSimilar } from 'instantsearch.js/es/widgets';

  lookingSimilar({
    container: '#lookingSimilar',
-   view: (props) => { /* ... */ },
+   templates: {
+     layout({ items }, { html }) {
+       // …
+     },
+   }
  });
```

##### Connector

```diff JavaScript icon=code theme={"system"}
- import { lookingSimilar } from '@algolia/recommend-js';
+ import {
+   connectLookingSimilar,
+ } from 'instantsearch.js/es/connectors';

+ const customLookingSimilar = connectLookingSimilar(({ items, widgetParams }) => {
+   const container = document.querySelector(widgetParams.container);
+   container.innerHTML = `/* ... */`;
+ });

- lookingSimilar({
+ customLookingSimilar({
    container: '#lookingSimilar',
-   view: (props) => { /* ... */ },
  }),
```

#### Replace component props with `templates`

The [`lookingSimilar`](/doc/api-reference/widgets/looking-similar/js) widget uses [templates](/doc/api-reference/widgets/looking-similar/js#templates) to customize specific parts of its UI.

| Recommend JS        | InstantSearch.js |
| ------------------- | ---------------- |
| `headerComponent`   | `header`         |
| `itemComponent`     | `item`           |
| `fallbackComponent` | `empty`          |

<CodeGroup>
  ```diff headerComponent theme={"system"}
  lookingSimilar({
  - headerComponent({ classNames, recommendations, html }) {
  -   return html`<h2 class=${classNames.title}>
  -     Recommendations (${recommendations.length})
  -   </h2>`;
  - },
  + templates: {
  +   header({ cssClasses, items }, { html }) {
  +     return html`<h2 class=${cssClasses.title}>
  +       Recommendations (${items.length})
  +     </h2>`;
  +   }
  + },
  });
  ```

  ```diff itemComponent theme={"system"}
  lookingSimilar({
  - itemComponent({ item, html }) {
  -   return html`<p>${item.name}</p>`;
  - },
  + templates: {
  +   item(recommendation, { html }) {
  +     return html`<p>${recommendation.name}</p>`;
  +   }
  + },
  });
  ```

  ```diff fallbackComponent theme={"system"}
  lookingSimilar({
  - fallbackComponent({ html }) {
  + templates: {
  +   empty(_, { html }) {
        return html`<p>No recommendations.</p>`;
  +   }
    },
  });
  ```
</CodeGroup>

#### Replace translations with `templates`

The [`lookingSimilar`](/doc/api-reference/widgets/looking-similar/js) widget uses [templates](/doc/api-reference/widgets/looking-similar/js#templates) to provide translations to the header.

```diff JavaScript icon=code theme={"system"}
lookingSimilar({
- translations: {
-   title: 'Recommendations',
- },
+ templates: {
+   header: ({ cssClasses }, { html }) {
+     return html`<h2 class=${cssClasses.title}>Recommendations</h2>`;
+   },
+ },
});
```

#### Replace `maxRecommendations` with `limit`

The `limit` prop replaces the `maxRecommendations` prop.

```diff JavaScript icon=code theme={"system"}
lookingSimilar({
- maxRecommendations: 3,
+ limit: 3,
});
```

#### Remove `environment`

The `environment` prop is no longer needed.

```js JavaScript icon=code theme={"system"}
lookingSimilar({
  environment: global, // [!code --]
});
```

##### Replace `classNames` with `cssClasses`

The `classNames` keys have changed and are defined through the `cssClasses` prop.

```diff JavaScript icon=code theme={"system"}
lookingSimilar({
- classNames: {
+ cssClasses: {
    root: 'MyCustomLookingSimilar',
+   emptyRoot: 'MyCustomLookingSimilar-emptyRoot',
    title: 'MyCustomLookingSimilar-title',
    container: 'MyCustomLookingSimilar-container',
    list: 'MyCustomLookingSimilar-list',
    item: 'MyCustomLookingSimilar-item',
  },
});
```

### `horizontalSlider`

The `horizontalSlider` view is now available in InstantSearch.js as a `carousel` template.

For carousel options, check the API reference:

* [`frequentlyBoughtTogether`](/doc/api-reference/widgets/frequently-bought-together/js#param-layout)
* [`relatedProducts`](/doc/api-reference/widgets/related-products/js#param-layout)
* [`trendingItems`](/doc/api-reference/widgets/trending-items/js#param-layout)
* [`lookingSimilar`](/doc/api-reference/widgets/looking-similar/js#param-layout)

```js JavaScript icon=code theme={"system"}
import { frequentlyBoughtTogether } from 'instantsearch.js/es/widgets';
import { carousel } from 'instantsearch.js/es/templates';

frequentlyBoughtTogether({
  // ...
  templates: {
    layout: carousel(),
  },
});
```