Example Search Page

--- title: Build search interfaces slug: p8bg0188 canonical_url: https://docs.coveo.com/en/p8bg0188/ collection: coveo-for-commerce source_format: adoc --- # Build search 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. All commerce [search interfaces](https://docs.coveo.com/en/2741/) in Atomic use the [`atomic-commerce-search-box`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-search-box\--docs) component, which is the main building block that provides search box functionality. To work properly, 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 `search` (the default value). ## Prerequisite Make sure that you understand how to [build commerce search pages](https://docs.coveo.com/en/o4ue0200/). ## 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 [search interface](https://docs.coveo.com/en/2741/), refer to the [Coveo Headless](https://docs.coveo.com/en/lcdf0493/) documentation for [`CommerceEngineConfiguration`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Commerce.CommerceEngineConfiguration.html). You can find a complete example of a [search interface](https://docs.coveo.com/en/2741/) in [Storybook](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/story/search-page\--default). ```html Example Search Page <2>

<7>

``` <1> Import the [Atomic library](https://docs.coveo.com/en/lcdf0264/). 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> The `resourceUrl` as shown defines the resources for the Coveo integration. These must exist and be configured in your [Coveo organization](https://docs.coveo.com/en/185/)'s [Coveo Merchandising Hub](https://docs.coveo.com/en/o5290573/). <5> Refer to the [Coveo Headless](https://docs.coveo.com/en/lcdf0493/) documentation for [`CommerceEngineConfiguration`](https://docs.coveo.com/en/headless/latest/reference/interfaces/Commerce.CommerceEngineConfiguration.html) for all configuration options. <6> Initialize the `atomic-commerce-interface`. <7> The search box for the interface. For additional options refer to [Search box component](#search-box-component). ## 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: * [`atomic-commerce-product-list`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-product-list\--docs): This component fetches and displays products. * [`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 results 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 results, 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-query-summary`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-query-summary\--docs): This component displays information about the current set of products being shown, such as 'Products 1-10 of 123'. ## Search box component The search box component is the core of your [search interface](https://docs.coveo.com/en/2741/). 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: * [`atomic-commerce-search-box-query-suggestions`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-search-box-query-suggestions\--docs): This component displays query suggestions as the user types. * [`atomic-commerce-search-box-instant-products`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-search-box-instant-products\--docs): This component displays instant products as the user types. * [`atomic-commerce-search-box-recent-queries`](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/docs/atomic-commerce-search-box-recent-queries\--docs): This component displays recent [queries](https://docs.coveo.com/en/231/) as the user types. ### Standalone search box 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](https://static.cloud.coveo.com/atomic/v3/storybook/index.html?path=/story/atomic-commerce-search-box\--standalone-search-box). The search box will redirect users to a results page when they submit a query.