Facets container

The Facets container displays a list of search filters (facets) that allow users to refine their product search results. It manages facet selections, displays selected filters with remove options, and provides a “Clear All” functionality to reset all filter selections.

Configurations

The Facets container provides the following configuration options:

Slots

The Facets container supports the following slots:

• Facets - Customizes the entire facets list container
• Facet - Customizes individual facet components
• SelectedFacets - Customizes the selected filters display area

Each slot receives a context object containing:

• data - The relevant data for that slot (facet list, individual facet, or selected facets)

Features

Multiple facet types

The container supports different types of facets:

• Range Buckets - For numeric ranges (e.g., price ranges) using radio buttons
• Scalar Buckets - For discrete values (e.g., brands, colors) using checkboxes
• Category View - For category-based filtering using checkboxes

Selection management

• Maintains facet selection state across search requests
• Automatically updates selections based on current search filters
• Provides visual feedback for selected filters

Selected filters display

• Shows all currently selected filters as removable buttons
• Displays filter labels with appropriate formatting (including currency for price ranges)
• Provides individual remove functionality for each selected filter

Clear all functionality

• “Clear All” button to remove all selected filters at once
• Automatically triggers a new search with no filters applied

Facet selection behavior

Range buckets (radio buttons)

• Only one range can be selected at a time
• Selecting a new range automatically deselects the previous one
• Commonly used for price ranges, ratings, or other numeric ranges

Scalar buckets (checkboxes)

• Multiple values can be selected simultaneously
• Each selection is independent of others
• Commonly used for brands, colors, sizes, or other discrete attributes

Example

import { Facets } from '@adobe-commerce/storefront-search-dropin';

function ProductFilters() {
  return (
    <Facets
      slots={{
        Facet: {
          component: CustomFacetComponent
        },
        SelectedFacets: {
          component: CustomSelectedFilters
        },
        Facets: {
          component: CustomFacetsContainer
        }
      }}
    />
  );
}