Build search interfaces

This is for:

Developer
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 commerce search interfaces in Atomic use the atomic-commerce-search-box component, which is the main building block that provides search box functionality. To work properly, it must be placed inside a atomic-commerce-interface with the type attribute set to search (the default value).

You can find a complete example of a search page in Storybook.

Prerequisites

Before you begin building your search interface, make sure you understand how to:

  1. Build commerce search pages

  2. Create search configurations

Search box component

The search box component is the core of your search interface. It lets users perform product searches by typing and submitting a query. It features built-in support for query suggestions and optional redirection to a search page. For the best user experience, the search box should be clearly visible, typically placed in the upper-center or upper-right section of a page.

You can add the following components as children of the atomic-commerce-search-box component:

When using the atomic-commerce-search-box component on non-search pages, you can add the redirection-url property to create a standalone search box. The search box will redirect users to a results page when they submit a query.

Search page

A search page typically consists of a search box and a list of product results, as well as components to filter and navigate the results. Once you know how to build a search box, you can start building a search page. Here is a list of useful Atomic components that can be added to a commerce search page: