Build an ecommerce experience with Search UI

In ecommerce, to build great search experiences for your customers, you need to focus on these major experiences:

  • Global Search bar: to give customers the ability to perform a search on any page of your store.
  • Search Page: to give your customers a place to see results relevant to their query and refine them using facets.
  • Category Page: to show a list of products from a particular category to help users explore available products.
  • Product Carousel: to show a list of products within pages like the Homepage or Checkout, or if a query returns no results.
  • Product Detail Page: to describe the product and provide cross-sell recommendations, like similar products from the same category or "frequently bought with" items.

Below you can see a demo of an ecommerce store built with Search UI. We're going to use it to demonstrate different concepts in the next several articles.

Full code of this demo is available here: https://github.com/elastic/search-ui/tree/main/examples/sandbox, with the Ecommerce code located under pages/ecommerce.

Related Articles


Provide suggestions to customers as they type in a search query

Search Page

Display products that match a customer's search query

Category Page

Show a list of products in a particular category

On this page