---
title: Build recommendation interfaces (Shopify Hydrogen)
slug: p36e0272
canonical_url: https://docs.coveo.com/en/p36e0272/
collection: coveo-for-commerce
source_format: adoc
---
# Build recommendation interfaces (Shopify Hydrogen)
To build a recommendation interface with [Coveo Headless](https://docs.coveo.com/en/lcdf0493/) and Shopify Hydrogen, you need to use [`Recommendations`](https://docs.coveo.com/en/headless-react/latest/reference/interfaces/SSR_Commerce.index.Recommendations.html) controller hooks, create recommendation components, and display recommendations through a recommendation [provider](https://docs.coveo.com/en/p3ae0283#headless-specific-providers).

The code snippets in this article have been simplified to focus on recommendations.
To see complete examples, follow the link in each section.

## Prerequisites

Before you begin building your recommendation interfaces, make sure you:

. [Understand how recommendation interfaces work](https://docs.coveo.com/en/o4ue0204/).

. [Create recommendation configurations](https://docs.coveo.com/en/o8880463/).

## Define and retrieve the target recommendation controller hooks

When [defining your commerce engine](https://docs.coveo.com/en/p3ae0283#headless-engine-and-controllers), leverage the [`defineRecommendations`](https://docs.coveo.com/en/headless-react/latest/reference/functions/SSR_Commerce.index.defineRecommendations.html) functions to define and retrieve the target recommendation hooks.

```ts
import {
  // ...
  defineRecommendations,
  // ...
} from '@coveo/headless-react/ssr-commerce';

export default {
  // ...
  controllers: {
    // ...
    homepageRecommendations: defineRecommendations({ <1>
      options: {
            slotId: '9a75d3ba-c053-40bf-b881-6d2d3f8472db'
        },
    }),
    cartRecommendations: defineRecommendations({
      options: {
            slotId: '5a93e231-3b58-4dd2-a00b-667e4fd62c55'
        },
    }),
    pdpRecommendationsLowerCarousel: defineRecommendations({
      options: {
            slotId: 'a24b0e9c-a8d2-4d4f-be76-5962160504e2'
        },
    }),
    pdpRecommendationsUpperCarousel: defineRecommendations({
      options: {
            slotId: '05848244-5c01-4846-b280-ff63f5530733'
        },
    }),
    // ...
  }
} satisfies CommerceEngineDefinitionOptions;
```

<1> For each target recommendation controller hook, specify the [slotId](https://docs.coveo.com/en/p3ec0523/) of the recommendation slot configuration.

For the full example, see [`coveo-engine.ts`](https://github.com/coveo-labs/barca-sports-hydrogen/blob/main/app/lib/coveo/engine.ts).

## Create recommendation components

Create recommendation components that use the target recommendation controller hooks.
The following is an example implementation of the `homepageRecommendations` strategy, which showcases featured products as cards on the home page.

```tsx
import {useHomepageRecommendations} from '@/lib/coveo.engine';
import {ProductCard} from '../Products/ProductCard';

export function Recommendations() {
  const homepageRecommendations = useHomepageRecommendations();

  return (
    <div>
      {homepageRecommendations.state.products.map((recommendation) => ( <1>
        <div key={recommendation.permanentid}>
          <ProductCard
            product={recommendation}
            onSelect={
              homepageRecommendations.methods?.interactiveProduct({ <2>
                options: {product: recommendation},
              }).select
            }
          />
        </div>
      ))}
    </div>
  );
}
```

<1> Map each product recommendation to a display component, `ProductCard`.

<2> Use a product card component that calls the `interactiveProduct` function to log [click events](https://docs.coveo.com/en/o1n92447/) when the user selects the product and to handle navigation.

For the full example, see [`Recommendations.tsx`](https://github.com/coveo-labs/barca-sports-hydrogen/blob/main/app/components/Homepage/Recommendations.tsx).

## Display recommendations with your recommendation provider

When displaying recommendation components on a page, ensure that they're wrapped in a recommendation provider.
The following showcases the home page of the Barca Sports example store with the `homepageRecommendations` component, simplified to focus on recommendations.

```tsx
// ...
import {Recommendations} from '@/components/Homepage/Recommendations';
import {RecommendationProvider} from '@/components/Search/Context';
import {recommendationEngineDefinition} from '@/lib/coveo.engine';
import {ServerSideNavigatorContextProvider} from '@/lib/coveo.engine/navigation';

// ...
export async function loader({request, context}: LoaderFunctionArgs) {
  engineDefinition.recommendationEngineDefinition.setNavigatorContextProvider(
    () => new ServerSideNavigatorContextProvider(request), <1>
  );
  // ...
  const recommendationStaticState = await fetchRecommendationStaticState({ <2>
      context,
      request,
      k: ['homepageRecommendations'],
    });

  return recommendationStaticState;
}

export default function Homepage() {
  const data = useLoaderData<typeof loader>();

  return (
    // ...
        <RecommendationProvider <3>
          staticState={data.recommendationStaticState}
          navigatorContext={new ClientSideNavigatorContextProvider()}
        >
          <Recommendations />
        </RecommendationProvider>
    // ...
  );
}
```

<1> Create a [navigation context provider](https://docs.coveo.com/en/p3ae0283#navigation-context-providers).

<2> [Fetch the static state for recommendations](https://docs.coveo.com/en/p3ae0283#recommendation-specific-static-headless-state).

<3> Wrap your recommendations component with your recommendation [provider](https://docs.coveo.com/en/p3ae0283#headless-specific-providers).

For the full example, see [`($locale)._index.tsx`](https://github.com/coveo-labs/barca-sports-hydrogen/blob/main/app/routes/(%24locale)._index.tsx).