---
title: Build Atomic commerce interfaces without using the Coveo app for Shopify
slug: oc2d1157
canonical_url: https://docs.coveo.com/en/oc2d1157/
collection: coveo-for-commerce
source_format: adoc
---
# Build Atomic commerce interfaces without using the Coveo app for Shopify

This page explains how to integrate the [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) search box, search page, product listing page, and recommendation components in your Shopify store.
The details vary depending on the theme you use, but the core logic remains the same.

This article uses the [default Dawn theme](https://themes.shopify.com/themes/dawn/styles/default) as its starting point.

> **Tip**
>
> This article assumes that you're not using the [**Coveo AI Search & Discovery**](https://docs.coveo.com/en/p2la0421/) app, which allows for certain simplifications.
> If you're using the app, see [Build Atomic commerce interfaces in a Shopify store with the Coveo AI Search & Discovery app](https://docs.coveo.com/en/oc2d1153/).

## Supported versions

If you import the [Coveo Atomic library](https://docs.coveo.com/en/lcdf0264/) through a CDN, you must use matching versions of the [Atomic](https://docs.coveo.com/en/lcdf0264/) Commerce JavaScript module (`+https://static.cloud.coveo.com/atomic/v3/atomic.esm.js+`) and Coveo Shopify script (`+https://static.cloud.coveo.com/shopify/v1/headless/commerce.esm.js+`).

> **Tip**
>
> Check the commit details for your [Atomic](https://docs.coveo.com/en/lcdf0264/) release in GitHub to find the matching version of the Coveo Shopify script.

Both must be major versions or fully qualified versions.
Don't mix a major version of one with a fully qualified version of the other.
Using the major versions is preferable because you can automatically benefit from the latest releases.

The following table shows some examples of matching versions of the [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) Commerce JavaScript module and Coveo Shopify script:

[%header,cols="~,~,~"]
|===
|Version type
|Atomic Commerce JavaScript module
|Coveo Shopify script

|Major version
|`/atomic/v3/`
|`/shopify/v1/headless/`

.2+.^|Fully qualified version[.footnote]^[[1](#fully-qualified-version)]^
|`/atomic/v3.48.0/`
|`/shopify/v1.9.12/headless/`

|`/atomic/v3.44.0/`
|`/shopify/v1.9.11/headless/`
|===

--
1. The versions listed here are just examples.
Be sure to check your specific [Atomic](https://docs.coveo.com/en/lcdf0264/) version (or the latest [Atomic](https://docs.coveo.com/en/lcdf0264/) release) for the matching Coveo Shopify script.
--

## Load Atomic and build the Commerce engine

. In your [Shopify theme editor](https://shopify.dev/docs/storefronts/themes/tools/code-editor/), create a snippet named `atomic.liquid` and paste the following code.
For optimization, this snippet relies on [promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/).

```html
<!-- snippets/atomic.liquid -->

<script type="module">
  window.loadAtomic = function () {
    if (document.getElementById('atomic-script')) { <1>
      return customElements.whenDefined('atomic-commerce-interface'); <2>
    }

    var script = document.createElement('script');
    script.src = 'https://static.cloud.coveo.com/atomic/v3/atomic.esm.js'; <3>
    script.type = 'module';
    script.setAttribute('id', 'atomic-script');
    document.head.appendChild(script);
    var css = document.createElement('link');
    css.rel = 'stylesheet';
    css.href = 'https://static.cloud.coveo.com/atomic/v3/themes/coveo.css'; <4>
    document.head.appendChild(css);

    return customElements.whenDefined('atomic-commerce-interface');
  };
</script>
```
<1> Checks whether the Atomic scripts have already been loaded.
<2> Returns a promise that resolves when the `atomic-commerce-interface` custom element is defined.
<3> The Atomic Commerce JavaScript module.
<4> The Atomic Commerce CSS file.

. Create a snippet named `engine.liquid` in which you paste the following code, replacing the placeholders with your own values.

```html
<!-- snippets/engine.liquid -->

<script type="module">
  window.configureHeadless = async () => {
    const { buildShopifyCommerceEngine, buildCart } = await
      import('https://static.cloud.coveo.com/shopify/v1/headless/commerce.esm.js');
    const engine = buildShopifyCommerceEngine({
      commerceEngineOptions: {
        configuration: {
          accessToken: '<ACCESS_TOKEN>', <1>
          organizationId: '<ORGANIZATION_ID>', <2>
          analytics: {
            enabled: true,
            trackingId: '<TRACKING_ID>', <3>
          },
          context: { <4>
            country: {{ localization.country.iso_code | json }},
            currency: {{ localization.country.currency.iso_code | json }},
            view: {
              url: {{ canonical_url | json }},
            },
            language: {{ request.locale.iso_code | json }},
            cart: {{ cart.items | json }}.map(function (item) {
              return {
                productId: `gid://shopify/ProductVariant/${item.variant_id}`,
                name: item.title,
                price: item.final_price,
                quantity: item.quantity,
              };
            }),
          },
        },
      },
    });
    window.CoveoCartController = buildCart(engine); <5>
    return engine;
  };
</script>
```
<1> An [access token](https://docs.coveo.com/en/o8ld0051/) with the **Search - Execute queries - Allowed** and **Analytics - Analytics data - Push** privileges.
<2> Your [organization ID](https://docs.coveo.com/en/n1ce5273/).
<3> The target [tracking ID](https://docs.coveo.com/en/n8tg0567/).
<4> The `context` object containing the country, currency, view, language, and cart information, extracted from the Shopify store.
<5> Creates a cart controller instance by passing the initialized Atomic engine to the `buildCart` function, and assigns the result to `window.CoveoCartController`.
Essential for keeping analytics and recommendations accurate when using the Shopify AJAX API, see [Keep Atomic Cart State in sync with Shopify (AJAX use case)](#keep-atomic-cart-state-in-sync-with-shopify-ajax-use-case) for details.

You'll need to include this snippet in every page of your Shopify store in which you want to use [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) Commerce components.

> **Note for non-AJAX users**
>
> If your storefront uses form based cart submissions, each page reload automatically re-initializes the Atomic engine with the updated cart state.
> No additional syncing is required in that case.

## Keep Atomic Cart State in sync with Shopify (AJAX use case)

When using [Shopify AJAX APIs](https://shopify.dev/docs/api/ajax) to update the cart, update the Atomic cart controller to keep the search and analytics state in sync.

> **Note**
>
> Form based cart submissions which reload the page cause the Atomic engine to re-initialize with the updated cart state, so no additional work is required.

### Sync the Atomic Cart Controller after AJAX cart updates

After any AJAX cart update, synchronize the Atomic cart controller with the latest Shopify cart state.

The following example demonstrates how to add an item to the Shopify cart using the `/cart/add.js` endpoint, then fetch the updated cart state to be synced with the cart controller.

Be sure to implement a similar routine after every AJAX cart change event in your storefront.

For more details on the AJAX cart API, see the [Shopify cart API reference](https://shopify.dev/docs/api/ajax/reference/cart).

```javascript
fetch('/cart/add.js', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({id: VARIANT_ID, quantity: 1})
})
  .then(response => response.json())
  .then(() => {
    fetch('/cart.js')
      .then(response => response.json())
      .then(cart => {
        const atomicCartItems = cart.items.map(item => ({
          productId: `gid://shopify/ProductVariant/${item.variant_id}`,
          name: item.title,
          price: item.final_price,
          quantity: item.quantity,
        }));

        window.CoveoCartController.setItems(atomicCartItems);
      });
  });
```

> **Important**
>
> Analytics and recommendations may become out of sync if they're not updated after an AJAX cart change.

## Initialize the web pixel

The [Coveo Atomic library](https://docs.coveo.com/en/lcdf0264/) only logs [click events](https://docs.coveo.com/en/o1n92447/), so
you'll need to use
a [web pixel](https://shopify.dev/docs/api/web-pixels-api) to log cart events, product view events, and purchase events.

The web pixel must be [initialized](#initialize-the-web-pixel) before it can log events to power your [Coveo ML](https://docs.coveo.com/en/188/) [models](https://docs.coveo.com/en/1012/).
To initialize it, create an initialization snippet as follows and add it to every page of your Shopify store.

. Create a snippet named `initialize-analytics.liquid` and paste the following code:

```html
<!-- snippets/initialize-analytics.liquid -->

<script type="module">
  import {init} from 'https://static.cloud.coveo.com/shopify/v1/headless/commerce.esm.js';

  init({ <1>
    accessToken: '<ACCESS_TOKEN>', <2>
    organizationId: '<ORGANIZATION_ID>', <3>
    trackingId: '<TRACKING_ID>', <4>
    clientId: '<CLIENT_ID>' <5>
  });
</script>
```

<1> The `init` function initializes the web pixel (see [@coveo/shopify](https://www.npmjs.com/package/@coveo/shopify)).

<2> An [access token](https://docs.coveo.com/en/o8ld0051/) with the **Analytics - Analytics data - Push** privilege.

<3> Your [organization ID](https://docs.coveo.com/en/n1ce5273/).

<4> The target [tracking ID](https://docs.coveo.com/en/n8tg0567/).

<5> The target [client ID](https://docs.coveo.com/en/masb0234/).

. Include this snippet in your `theme.liquid` file, just before the closing `</head>` tag:

```html
{% render 'initialize-analytics' %}
```

. Verify your setup by loading a storefront page and confirming that cart events, product view events, and purchase events appear in your analytics.

## Search page

To implement a [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) search page or replace an existing search page with an [Atomic](https://docs.coveo.com/en/lcdf0264/) one, do the following:

. Create a snippet named `initialize-search-page.liquid` to initialize the [Atomic](https://docs.coveo.com/en/lcdf0264/) interface.

```html
<!-- snippets/initialize-search-page.liquid -->

<script type="module">
  await window.loadAtomic();
  window.CoveoCommerceEngineForSearch = window.CoveoCommerceEngineForSearch || window.configureHeadless();
  const engine = await window.CoveoCommerceEngineForSearch;
  const searchPage = document.querySelector('#search-page');
  await searchPage.initializeWithEngine(engine); <1>
  searchPage.executeFirstRequest(); <2>
</script>
```
<1> Initialize the search page with the Coveo engine.
<2> The `executeFirstRequest` method sends the first query to the Coveo engine, ensuring the search page is populated with results when it loads.

. Open your theme and locate the code that renders the search results page.

> **Note**
>
> In the Dawn theme, this code is located in `sections/main-search.liquid`.

. Remove the existing search page code from this file, if any exists.

. Add the initialization snippets and an `atomic-commerce-interface` element of type `search` that includes the target Atomic search page components, as follows:

```html
<!--- sections/main-search.liquid --->
{% render 'engine' %}
{% render 'atomic' %}
{% render 'initialize-search-page' %}
<atomic-commerce-interface id="search-page" type="search">
  <atomic-commerce-layout>
    <atomic-layout-section section="search">
      <atomic-commerce-search-box>
        <atomic-commerce-search-box-recent-queries></atomic-commerce-search-box-recent-queries>
        <atomic-commerce-search-box-query-suggestions></atomic-commerce-search-box-query-suggestions>
        <atomic-commerce-search-box-instant-products image-size="small">
          <atomic-product-template>
            <template>
              <atomic-product-section-name>
                <atomic-product-link></atomic-product-link>
              </atomic-product-section-name>
              <atomic-product-section-visual>
                <atomic-product-field-condition if-defined="ec_thumbnails"><1>
                  <atomic-product-image field="ec_thumbnails"></atomic-product-image>
                </atomic-product-field-condition>
              </atomic-product-section-visual>
              <atomic-product-section-metadata>
                <atomic-product-field-condition if-defined="ec_brand">
                  <atomic-product-text field="ec_brand"></atomic-product-text>
                </atomic-product-field-condition>
                <atomic-product-field-condition if-defined="ec_rating">
                  <atomic-product-rating field="ec_rating"></atomic-product-rating>
                </atomic-product-field-condition>
              </atomic-product-section-metadata>
              <atomic-product-section-emphasized>
                <atomic-product-price></atomic-product-price>
              </atomic-product-section-emphasized>
              <atomic-product-section-children>
                <atomic-product-children></atomic-product-children>
              </atomic-product-section-children>
            </template>
          </atomic-product-template>
        </atomic-commerce-search-box-instant-products>
      </atomic-commerce-search-box>
    </atomic-layout-section>
    <atomic-layout-section section="facets"><atomic-commerce-facets></atomic-commerce-facets></atomic-layout-section>
    <atomic-layout-section section="main">
      <atomic-layout-section section="status">
        <atomic-commerce-breadbox></atomic-commerce-breadbox>
        <atomic-commerce-query-summary></atomic-commerce-query-summary>
        <atomic-commerce-sort-dropdown></atomic-commerce-sort-dropdown>
        <atomic-commerce-did-you-mean></atomic-commerce-did-you-mean>
        <atomic-commerce-refine-toggle></atomic-commerce-refine-toggle>
      </atomic-layout-section>
      <atomic-layout-section section="products">
        <atomic-commerce-product-list display="grid" density="compact" image-size="small">
          <atomic-product-template>
            <template>
              <atomic-product-section-name id="product-name-section">
                <atomic-product-link></atomic-product-link>
              </atomic-product-section-name>
              <atomic-product-section-visual>
                <atomic-product-field-condition if-defined="ec_thumbnails">
                  <atomic-product-image field="ec_thumbnails"></atomic-product-image>
                </atomic-product-field-condition>
              </atomic-product-section-visual>
              <atomic-product-section-metadata>
                <atomic-product-field-condition if-defined="ec_brand">
                  <atomic-product-text field="ec_brand"></atomic-product-text>
                </atomic-product-field-condition>
                <atomic-product-field-condition if-defined="ec_rating">
                  <atomic-product-rating field="ec_rating"></atomic-product-rating>
                </atomic-product-field-condition>
              </atomic-product-section-metadata>
              <atomic-product-section-emphasized>
                <atomic-product-price></atomic-product-price>
              </atomic-product-section-emphasized>
              <atomic-product-section-description>
                <atomic-product-excerpt></atomic-product-excerpt>
              </atomic-product-section-description>
              <atomic-product-section-children>
                <atomic-product-children></atomic-product-children>
              </atomic-product-section-children>
            </template>
          </atomic-product-template>
        </atomic-commerce-product-list>
        <atomic-commerce-query-error></atomic-commerce-query-error>
        <atomic-commerce-no-products></atomic-commerce-no-products>
      </atomic-layout-section>
      <atomic-layout-section section="pagination">
        <atomic-commerce-load-more-products></atomic-commerce-load-more-products>
      </atomic-layout-section>
    </atomic-layout-section>
  </atomic-commerce-layout>
</atomic-commerce-interface>
```
<1> The `ec_thumbnails` [standard commerce field](https://docs.coveo.com/en/n73f0502#standard-commerce-fields) contains the product images used by the image components in this example.
Adjust this property if your product thumbnails are stored in a different field.

. Save your changes and preview the search page in your storefront to confirm that results and components render as expected.

## Standalone search box

You'll probably want to include a standalone search box on every page of your website other than the search page, which already includes a search box.
To implement it, do the following:

. Create a snippet named `initialize-ssb.liquid` to initialize the standalone search box.

```html
<!-- snippets/initialize-ssb.liquid -->

<script type="module">
  window.handleCoveoSearchboxClick = async function () {
    await window.loadAtomic();
    window.CoveoCommerceEngineForSearch = window.CoveoCommerceEngineForSearch || window.configureHeadless();
    const engine = await window.CoveoCommerceEngineForSearch;
    const standaloneSearchBox = document.querySelector('#standalone-search-box');
    if (!standaloneSearchBox.hasAttribute('atomic-initialized')) {
      standaloneSearchBox.initializeWithEngine(engine);
      standaloneSearchBox.setAttribute('atomic-initialized', 'true'); <1>
    }
  };
</script>
```
<1> This ensures that the standalone search box is only initialized once.

. Open your theme and locate the code that renders search boxes.

> **Note**
>
> In the Dawn theme, this code is located in `sections/header-search.liquid`.

. Remove the existing search box code from this file.

. Add the following code:

```html
<!--- snippets/header-search.liquid --->
{% if request.path != '/search' %}<1>
{% render 'atomic' %}
{% render 'engine' %}
{% render 'initialize-ssb' %}

<details-modal>
  <details>
    <summary
      class="header__icon header__icon--search header__icon--summary link focus-inset modal__toggle"
      aria-haspopup="dialog"
    >
      <button id="search-button" aria-label="Search" class="svg-wrapper" onclick="handleCoveoSearchboxClick()">
        <span class="svg-wrapper">
          {{- 'icon-search.svg' | inline_asset_content -}} <2>
        </span>
      </button>
    </summary>
    <div
      class="search-modal modal__content gradient"
      role="dialog"
      aria-modal="true"
    >
      <div class="modal-overlay"></div>
      <div
        tabindex="-1"
        class="standalone-search-box-container"
      >
        <atomic-commerce-interface type="search" id="standalone-search-box">
          <atomic-layout-section section="search">
            <atomic-commerce-search-box redirection-url="/search">
              <atomic-commerce-search-box-recent-queries></atomic-commerce-search-box-recent-queries>
              <atomic-commerce-search-box-query-suggestions></atomic-commerce-search-box-query-suggestions>
              <atomic-commerce-search-box-instant-products image-size="small">
                <atomic-product-template>
                  <template>
                    <atomic-product-section-name>
                      <atomic-product-link></atomic-product-link>
                    </atomic-product-section-name>
                    <atomic-product-section-visual>
                      <atomic-product-image field="ec_thumbnails"></atomic-product-image>
                    </atomic-product-section-visual>
                    <atomic-product-section-metadata>
                      <atomic-product-text field="ec_brand"></atomic-product-text>
                      <atomic-product-rating field="ec_rating"></atomic-product-rating>
                    </atomic-product-section-metadata>
                    <atomic-product-section-emphasized>
                      <atomic-product-price></atomic-product-price>
                    </atomic-product-section-emphasized>
                    <atomic-product-section-children>
                      <atomic-product-children></atomic-product-children>
                    </atomic-product-section-children>
                  </template>
                </atomic-product-template>
              </atomic-commerce-search-box-instant-products>
            </atomic-commerce-search-box>
          </atomic-layout-section>
        </atomic-commerce-interface>
        <div class="hidden"><input></div> <3>
        <button
          type="button"
          class="search-modal__close-button modal__close-button link link--text focus-inset"
          aria-label="{{ 'accessibility.close' | t }}"
        >
          <span class="svg-wrapper">
            {{- 'icon-close.svg' | inline_asset_content -}}
          </span>
        </button>
      </div>
    </div>
  </details>
</details-modal>
{% endif %}
```
<1> Don't display the standalone search box on the search page, since it already includes a search box.
<2> This image is from the Dawn theme.
Replace it with the appropriate SVG icon for your theme, as needed.
<3> This `div` and the following `button` are carried over from the Dawn theme for modal handling.
Customize this markup to fit your theme, as needed.

. Style your standalone search box.
The CSS classes and styles you apply to your standalone search box depend on your theme.

.. In the Dawn theme, create an `ssb.css` file in the `assets` folder and include the following:

```css
/* assets/ssb.css */

.standalone-search-box-container {
    width: 80%;
    display: flex;
    justify-content: center;
}

#search-button {
    background: white;
    border: white;
    cursor: pointer;
}

#search-button:hover {
    transform: scale(1.07);
}
```

.. Add the following to render the CSS in `header-search.liquid`:

```html
{{ 'ssb.css' | asset_url | stylesheet_tag }}
```

. Save your changes and preview the standalone search box in your storefront to confirm that it renders as expected.

## Product listing page

To implement [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) PLPs or replace existing PLPs with [Atomic](https://docs.coveo.com/en/lcdf0264/) ones, do the following:

. Create the PLPs [using the Public Listing Page API](https://docs.coveo.com/en/pbjb9139#create-product-listing-pages-in-a-batch).

. Set up [facets](https://docs.coveo.com/en/198/) for your PLPs [using the Facet manager](https://docs.coveo.com/en/pbbf0247/) in the [Coveo Merchandising Hub (CMH)](https://docs.coveo.com/en/o5290573/).

. Create query configurations [using the Query Configurations API](https://docs.coveo.com/en/pbbf0247/).
These set certain parameters for your PLPs, such as sort criteria and additional [fields](https://docs.coveo.com/en/200/).

. Create a snippet named `initialize-plp.liquid` to initialize the Atomic interface.

```html
<!-- snippets/initialize-plp.liquid -->
<script type="module">
  await window.loadAtomic();
  const engine = await window.configureHeadless();
  const productList = document.querySelector('#product-listing');
  await productList.initializeWithEngine(engine);
  productList.executeFirstRequest();
</script>
```

. Open your theme and locate the code that renders PLPs.

> **Note**
>
> In the Dawn theme, an example file with this code is `sections/collection-template.liquid`.

. Remove the existing PLP code from this file.

. Add the initialization snippets and an `atomic-commerce-interface` element of type `product-listing` that includes the target Atomic PLP components, as follows:

```html
{% render 'engine' %}
{% render 'atomic' %}
{% render 'initialize-plp' %}

<atomic-commerce-interface id="product-listing" type="product-listing">
  <atomic-commerce-layout>
    <atomic-layout-section section="facets"><atomic-commerce-facets></atomic-commerce-facets></atomic-layout-section>
    <atomic-layout-section section="main">
      <atomic-layout-section section="status">
        <atomic-commerce-breadbox></atomic-commerce-breadbox>
        <atomic-commerce-query-summary></atomic-commerce-query-summary>
        <atomic-commerce-sort-dropdown></atomic-commerce-sort-dropdown>
        <atomic-commerce-refine-toggle></atomic-commerce-refine-toggle>
      </atomic-layout-section>
      <atomic-layout-section section="products">
        <atomic-commerce-product-list display="grid" density="compact" image-size="small">
          <atomic-product-template>
            <template>
              <atomic-product-section-name>
                <atomic-product-link></atomic-product-link>
              </atomic-product-section-name>
              <atomic-product-section-visual>
                <atomic-product-image field="ec_thumbnails"></atomic-product-image>
              </atomic-product-section-visual>
              <atomic-product-section-children>
                <atomic-product-children></atomic-product-children>
              </atomic-product-section-children>
              <atomic-product-section-metadata>
                <atomic-product-text field="ec_brand"></atomic-product-text>
                <atomic-product-rating field="ec_rating"></atomic-product-rating>
              </atomic-product-section-metadata>
              <atomic-product-section-emphasized>
                <atomic-product-price></atomic-product-price>
              </atomic-product-section-emphasized>
              <atomic-product-section-description>
                <atomic-product-description></atomic-product-description>
              </atomic-product-section-description>
            </template>
          </atomic-product-template>
        </atomic-commerce-product-list>
        <atomic-commerce-query-error></atomic-commerce-query-error>
        <atomic-commerce-no-products></atomic-commerce-no-products>
      </atomic-layout-section>
      <atomic-layout-section section="pagination">
        <atomic-commerce-load-more-products></atomic-commerce-load-more-products>
      </atomic-layout-section>
    </atomic-layout-section>
  </atomic-commerce-layout>
</atomic-commerce-interface>
```

. Save your changes and preview the PLPs in your [storefront](https://docs.coveo.com/en/p33g0410/) to confirm that products and components render correctly.

## Recommendations

To implement [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) recommendations or replace your existing recommendations, do the following:

. [Create the target recommendation configurations](https://docs.coveo.com/en/o8880463/).
Currently, the **Coveo AI Search & Discovery** app doesn't create recommendation configurations automatically.
You must create them yourself, regardless of whether you're using the app.

. Create a snippet named `initialize-recs.liquid` to initialize the Atomic interface.

```html
<!-- snippets/initialize-recs.liquid -->

<script type="module">
  await window.loadAtomic();
  window.CoveoCommerceEngineForSearch = window.CoveoCommerceEngineForSearch || window.configureHeadless());
  const engine = await window.CoveoCommerceEngineForSearch;
  const recs = document.querySelector('#recs-component');
  recs.initializeWithEngine(engine);
</script>
```

. Open your theme and locate the code that renders recommendations.

> **Note**
>
> In the Dawn theme, an example file with this code is `featured-collection.liquid`.

. Remove the existing recommendation code from this file.

. Add the initialization snippets and an `atomic-commerce-recommendation-interface` element that includes the target [Atomic](https://docs.coveo.com/en/lcdf0264/) recommendation components, as follows:

```html
{% render 'engine' %}
{% render 'atomic' %}
{% render 'initialize-recs' %}

<atomic-commerce-recommendation-interface class="page-width" id="recs-component">
  <atomic-commerce-layout>
    <atomic-layout-section section="main">
      <atomic-commerce-recommendation-list
        slot-id=<SLOT_ID> <1>
      >
        <atomic-product-template>
          <template>
            <atomic-product-section-name>
              <atomic-product-link></atomic-product-link>
            </atomic-product-section-name>
            <atomic-product-section-visual>
              <atomic-product-image field="ec_thumbnails"></atomic-product-image>
            </atomic-product-section-visual>
            <atomic-product-section-metadata>
              <atomic-product-field-condition if-defined="ec_brand">
                <atomic-product-text field="ec_brand"></atomic-product-text>
              </atomic-product-field-condition>
              <atomic-product-field-condition if-defined="ec_brand">
                <atomic-product-rating field="ec_rating"></atomic-product-rating>
              </atomic-product-field-condition>
            </atomic-product-section-metadata>
            <atomic-product-section-description>
              <atomic-product-text field="ec_shortdesc"></atomic-product-text>
            </atomic-product-section-description>
            <atomic-product-section-emphasized>
              <atomic-product-price></atomic-product-price>
            </atomic-product-section-emphasized>
            <atomic-product-section-children>
              <atomic-product-children></atomic-product-children>
            </atomic-product-section-children>
          </template>
        </atomic-product-template>
      </atomic-commerce-recommendation-list>
    </atomic-layout-section>
  </atomic-commerce-layout>
</atomic-commerce-recommendation-interface>
```
<1> Replace `<SLOT_ID>` with the target slot ID for your recommendations.
The slot ID is returned when you [create recommendation configurations](https://docs.coveo.com/en/o8880463/).

. Save your changes and preview the recommendations in your storefront to confirm that they render as expected.

## What's next?
To explore the available [Coveo Atomic](https://docs.coveo.com/en/lcdf0264/) Commerce components and options, see the [reference documentation](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/story/introduction\--default).

To learn more about the [Atomic library](https://docs.coveo.com/en/lcdf0264/), see the [Atomic documentation](https://docs.coveo.com/en/atomic/latest/).