Build product listing pages

This is for:

Developer

In this article

Prerequisites
Product listing page components

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) in Atomic use the atomic-commerce-product-list component to fetch product listings and display the products. It must be placed inside a atomic-commerce-interface with the type attribute set to product-listing.

You can find a complete example of a product listing page in Storybook.

Prerequisites

Before you begin building your product listing pages (PLPs), make sure you:

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: A product listing page can have a standalone search box that lets users perform product searches and redirects them to a search page.
atomic-commerce-facets: This component renders facets that let users filter products by category or by attributes such as product price or color.
atomic-commerce-sort-dropdown: 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: This component renders a pager that lets users navigate through paginated product results.
atomic-commerce-load-more-products: 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.