Example Product Listing Page

--- title: Build product listing pages slug: p8dg0472 canonical_url: https://docs.coveo.com/en/p8dg0472/ collection: coveo-for-commerce source_format: adoc --- # Build product listing pages > **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. All [product listing pages (PLPs)](https://docs.coveo.com/en/m1sf3187/) in Atomic use the [`atomic-commerce-product-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-product-list\--docs) component to fetch product listings and display the products. It must be placed inside a [`atomic-commerce-interface`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-interface\--docs) with the `type` attribute set to `product-listing`. ## Prerequisite Make sure that you understand how to [build product listing pages (PLPs)](https://docs.coveo.com/en/o4ue0471/). ## Code Sample Following is a minimal example of a product listing page 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 product listing interface, refer to the Coveo Headless documentation for [`CommerceEngineConfiguration`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Commerce.CommerceEngineConfiguration.html). ```html Example Product Listing Page <2> <5> ``` <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. When providing your own configuration you won't need to import this function. <4> Initialize the `atomic-commerce-interface`. <5> The product list page for the interface. For additional options refer to [Product listing page components](#product-listing-page-components). You can find a complete example of a product listing page in [Storybook](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/story/product-listing-page\--default). ## Product listing page components A product listing page typically consists of a list of products, as well as components to filter and navigate the products. Here is a list of useful Atomic components that can be added to a product listing page: * [`atomic-commerce-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-search-box\--docs): A product listing page can have a [standalone search box](https://docs.coveo.com/en/p8bg0188#standalone-search-box) that lets users perform product searches and redirects them to a search page. * [`atomic-commerce-facets`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/story/atomic-commerce-facets\--docs): This component renders facets that let users filter products by category or by attributes such as product price or color. * [`atomic-commerce-sort-dropdown`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-sort-dropdown\--docs): This component renders a dropdown that lets users choose how to sort query products, such as by relevance, date, or product price. * [`atomic-commerce-pager`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-pager\--docs): This component renders a pager that lets users navigate through paginated product results. * [`atomic-commerce-load-more-products`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-load-more-products\--docs): This component lets users load additional products if more are available. > **Note** > > The `atomic-commerce-pager` and `atomic-commerce-load-more-products` components can't be used together.