---
title: Build recommendation interfaces
slug: p8ff6370
canonical_url: https://docs.coveo.com/en/p8ff6370/
collection: coveo-for-commerce
source_format: adoc
---
# Build recommendation interfaces
> **Important**
>
> Atomic for Commerce components are in open beta and remain under active development.
>
> Atomic for Commerce hasn't yet gone through a formal accessibility review.
> If you have accessibility needs, contact your customer success manager and we'll work with you to address them.
You can use the [`atomic-commerce-recommendation-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-recommendation-list\--docs) component to display a list of product recommendations by applying one or more product templates.
Wrap one or more recommendation lists in the [`atomic-commerce-recommendation-interface`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-recommendation-interface\--docs) component.
## 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/).
## Code Sample
Following is a minimal example of a [search interface](https://docs.coveo.com/en/2741/) built with Atomic for Commerce.
This uses [`getSampleCommerceEngineConfiguration`](https://docs.coveo.com/en/headless/latest/reference/functions/Commerce.getSampleCommerceEngineConfiguration.html) from `@coveo/headless/commerce` for its configuration.
This won't work in a production environment.
For a detailed breakdown of how to configure your recommendation interface, refer to the Coveo Headless documentation for
[`CommerceEngineConfiguration`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Commerce.CommerceEngineConfiguration.html).
```html
Example Recommendation Page
<2>
display="list"
density="normal"
image-size="small"
products-per-page="3"
slot-id="af4fb7ba-6641-4b67-9cf9-be67e9f30174" <6>
>
```
<1> Import the Atomic for library. This is responsible for handling the web components.
<2> Link the Coveo theme stylesheet. This provides the default styling for the web components.
<3> Import the Headless for Commerce library to get the sample configuration and the engine builder. When providing your own configuration you won't
need to `getSampleCommerceEngineConfiguration`.
<4> Initialize the `atomic-commerce-recommendation-interface`.
<5> The recommendation list for the interface.
<6> The identifier used by the Commerce API to retrieve the recommendation list for the component.
You can find a complete example of a recommendation carousel in [Storybook](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/story/recommendations\--default).