Name header Description Props for the HeaderShop above the page; the header
Type GridHeader Default {} breadcrumbs GridCrumb[] [] Name breadcrumbs Description The trail above the heading; the last crumb shows as the current page.
Type GridCrumb[] Default [] title string '' Name title Description Shown as the page heading.
Type string Default '' description string '' Name description Description Shown under the page heading; hidden when empty.
Type string Default '' products Product[] [] Name products Description The current page's products, shown as cards.
Type Product[] Default [] totalResults number 0 Name totalResults Description Number of products matching the filters; sets the page count and the results labels.
Type number Default 0 perPage number 12 Name perPage Description Products per page; sets the page count and the range shown under the grid.
Type number Default 12 filters UiFilter[] [] Name filters Description The filters to offer; type boolean rating color range
Type UiFilter[] Default [] activeFilters Record < string , unknown > {} Name activeFilters Description Applied values by filter key for switch, rating and range filters; list options carry selected
Type Record < string , unknown > Default {} sortOptions UiSort[] [] Name sortOptions Description The sort orders in the sort select.
Type UiSort[] Default [] activeSorting string 'default' Name activeSorting Description The value
Type string Default 'default' swatchColors Record < string , string > { ... DEFAULT_SWATCH_COLORS } Name swatchColors Description Swatch colour per colour-filter value, keyed lowercase; values without one show grey.
Type Record < string , string > Default { ... DEFAULT_SWATCH_COLORS } currency string 'EUR' Name currency Description ISO 4217 code the price filter shows its range in.
Type string Default 'EUR' locale string — Name locale Description BCP 47 locale the prices are formatted in; the ConfigProvider's when left out.
Type string Default — resultsLabel ( ( count : number ) => string ) ` ${ count } ${ count === 1 ? 'product' : 'products' } ` Name resultsLabel Description Builds the results count next to the sort select from totalResults
Type ( count : number ) : string Default ` ${ count } ${ count === 1 ? 'product' : 'products' } ` rangeLabel ( ( from : number , to : number , total : number ) => string ) `Showing ${ from } – ${ to } of ${ total } ${ total === 1 ? 'product' : 'products' } ` Name rangeLabel Description Builds the line under the grid from the first and last product shown and totalResults
Type ( from : number , to : number , total : number ) : string Default `Showing ${ from } – ${ to } of ${ total } ${ total === 1 ? 'product' : 'products' } ` sortPlaceholder string 'Sort by' Name sortPlaceholder Description Shown in the sort select while no option is selected.
Type string Default 'Sort by' filtersLabel string 'Filters' Name filtersLabel Description Shown on the button that opens the filter sheet on small screens, and as the sheet's heading.
Type string Default 'Filters' showResultsLabel ( ( count : number ) => string ) `Show ${ count } ${ count === 1 ? 'product' : 'products' } ` Name showResultsLabel Description Builds the label of the button that closes the filter sheet from totalResults
Type ( count : number ) : string Default `Show ${ count } ${ count === 1 ? 'product' : 'products' } ` clearAllLabel string 'Clear all' Name clearAllLabel Description Shown on the link next to the active filters and on the empty state's button; both clear every filter.
Type string Default 'Clear all' removeLabel ( ( label : string ) => string ) `Remove ${ label } ` Name removeLabel Description Builds the screen-reader name of an active filter's remove button from the option's label.
Type ( label : string ) : string Default `Remove ${ label } ` emptyTitle string 'No products match these filters' Name emptyTitle Description Shown as the heading when no product matches the filters.
Type string Default 'No products match these filters' emptyText string 'Remove a filter or clear them all to see more.' Name emptyText Description Shown under the heading when no product matches the filters.
Type string Default 'Remove a filter or clear them all to see more.' previousLabel string 'Previous' Name previousLabel Description Shown on the pagination's previous-page button.
Type string Default 'Previous' nextLabel string 'Next' Name nextLabel Description Shown on the pagination's next-page button.
Type string Default 'Next' class ClassValue — Name class Description Classes added to the part's own element, after its recipe classes.
Type null | string | false | Record < string , any > | ClassValue[] Default — page number 1 Name page Description The page of results on show, from 1.
Type number Default 1