Kent Automotive — filter modals side by side

The PLP filter modal (from kent-plp-preview) and the Search-results filter modal (from kent-search-preview), the real live previews embedded whole and each opened to its filter sheet. Both are transcoded stylized webviews re-skinned to the Figma 1427 shop style. Scroll each sheet independently.

PLP filter modalFasteners PLP · kent-plp-preview
Search-results filter modal“rivet” search · kent-search-preview

What lines up · what differs

Shared chrome (matches)

  • Bottom sheet — rounded top, grab handle, dimmed backdrop
  • Section titles — uppercase Roboto Condensed 14, tracked
  • Checkbox rows — 20px blue box, 5px radius, blue check
  • Sort rows — blue radio dial
  • Footer — Clear all + blue Show N results pill
  • Header — Montserrat 600 / 18px

Differs by surface (each mirrors Kent’s live filters for that surface)

  • Header — PLP “Filters” · Search “Sort & Filter”
  • Dismiss — PLP “Close” · Search “Hide Filters”
  • Sort — PLP Relevance / Name A–Z / Price · Search Relevance / Most popular (all Kent’s live search offers)
  • PLP filters = Subcategory + Refine by keyword + Availability
  • Search filters = live Algolia facet groups (Category, Brand, Type, Material, Diameter, Head Style…) as collapsible dropdowns; no keyword (stripped per your call)

The two surfaces expose different filters on kent-automotive.com itself — the PLP refines a category, search refines an Algolia result set — so the sheets carry different controls by design. The frame, buttons, rows and footer are the one shared treatment. Say the word if you want either sheet’s header/dismiss text harmonized.