---
title: "Add a frequently bought together recommendation widget"
slug: "add-a-frequently-bought-together-recommendation-widget"
abstract: "Add a frequently bought together recommendation widget using Sitecore Discover JS SDK and UI Components for React."
---
# Add a frequently bought together recommendation widget

Sitecore Discover offers a recommendation widget encouraging visitors to buy products that are frequently bought together on a product details page. Similar to other widget templates, it is built with UI components primitives and styles. You can edit the styles in these components or replace entire components.

![Screenshot of a typical Frequently bought together recommendation widget.](https://doc.sitecore.com/api/markdown-image/discover/en/developers/discover-js-sdk-for-react/images/discover_freq-bought-together.png)

The frequently bought together recommendation widget is a `RecommendationContainer` containing the following two components:

- `PurchaseTogetherListView` - a list of product thumbnails and price details with an **Add to cart** button.
- `PurchaseTogetherCheckboxList` - a product checklist that visitors use to include or exclude before clicking **Add to cart**.

To create a custom styled query hooked frequently bought together recommendation widget component:

> [!note]
> **Notice**
> These React resources can help you with your implementation:
>
> -   To view working examples of widgets, visit the [starter kit website](https://developers.sitecorecloud.io/discover-sdk/react/website) built using Discover JS SDK and UI components packages.
>
> -   You can download or fork its [GitHub repository](https://github.com/Sitecore/Discover-JS-SDK-Starter-kit).

1. In the UI components reference site, in the **Widget templates** section, open the **Recommendation** page.
2. In your React project, in the *widget_components* folder, create a folder named *frequentlyBoughtTogetherStyled*.
3. From the list of templates, on the **Frequently Bought Together Styled** page, click `index.js` to copy the code block.
4. In the *frequentlyBoughtTogetherStyled* folder, create a JavaScript file called `index.js`, then paste the copied code block into it, and save.
5. From the list of templates, in the **Styled carousel** section, click `styled.js` to copy the code block.
6. On the **Frequently Bought Together Styled** page, create a JavaScript file, `styled.js`, then paste the copied code block into it, and save.
7. In the `styled.js` file, edit the styled primitives, and save.
8. In the component for the page details page, add a component as shown in the following code block.

    ```js
    imports RecommendationFrequentlyBoughtTogetherStyledWidget from "./widget_components/frequentlyBoughtTogetherStyled";

    const PageDetailsPage = () => {
        ...
        ...
        return (

            ...
            <RecommendationFrequentlyBoughtTogetherStyledWidget rfkId="frequently_recommendation" />
            ...
        )
    };
    ```

9. To avoid compile errors, update the imports section, and save.