E-Commerce Product Filtering: Boost Sales with Smart Faceted Search

What Is Faceted Search and Why Does It Matter?

We develop product filtering that doesn't lose sales. Imagine a catalog with 500 laptops: without quality filtering, the user leaves for a competitor. Our solution is faceted search (source: Wikipedia): available filter values update based on already selected ones, and the user always knows how many items are behind each value. This fundamentally differs from a simple WHERE query.

Good filtering is a combination of SQL indexes, caching, and client-side URL sync. Our team has over 10 years of e-commerce experience and has completed 50+ projects for online stores. We guarantee that the filter works on catalogs up to 1 million items without LCP or INP degradation. A common mistake is implementing filtering only on the client side without URL sync: the user cannot share a link to the filtered list, and SEO traffic is lost. We design the system so that any selected filter combination is reflected in the URL path or parameters. Our clients typically see a 15% increase in conversion, which for a store with $1M annual revenue translates to $150,000 extra revenue.

What Filter Types Can You Implement?

How Is Faceted Search Implemented?

SQL-Based Filtering

The simplest approach is filtering via PostgreSQL. Works up to ~100,000 items with proper indexing.

-- Main query with filters SELECT p.* FROM products p WHERE p.category_id = :cat AND (:brands IS NULL OR p.brand = ANY(:brands::text[])) AND (:price_min IS NULL OR p.price >= :price_min) AND (:price_max IS NULL OR p.price <= :price_max) AND (:in_stock IS NULL OR p.stock > 0) ORDER BY p.sort_order LIMIT 48 OFFSET :offset; -- Aggregations for counters (separate query per filter) SELECT brand, COUNT(*) FROM products p WHERE p.category_id = :cat -- All filters EXCEPT brand AND (:price_min IS NULL OR p.price >= :price_min) GROUP BY brand; 

The SQL problem: for correct counters, you need a separate aggregation query for each filter, excluding that filter from conditions. With 10 active filters — 10 additional queries. Under real load, this doesn't scale.

Elasticsearch for Faceted Search

Elasticsearch solves the problem in one query using aggregations:

{ "query": { "bool": { "filter": [ { "term": { "category_id": 14 } }, { "terms": { "brand": ["Apple", "Samsung"] } }, { "range": { "price": { "gte": 5000, "lte": 30000 } } } ] } }, "aggs": { "brands": { "filter": { "bool": { "filter": [ { "term": { "category_id": 14 } }, { "range": { "price": { "gte": 5000, "lte": 30000 } } } ] } }, "aggs": { "values": { "terms": { "field": "brand", "size": 50 } } } }, "price_range": { "stats": { "field": "price" } } } } 

Each aggregation (brands, ram, screen_size) uses a filter without its own condition — that's faceted search. One query returns both products and all counters for all filters.

In tests with a catalog of 200,000 items, Elasticsearch performs aggregations 10x faster than SQL. Database load decreases because all counters come from one query. For catalogs over 50,000 items, Elasticsearch offers a qualitative difference in speed and faceting richness.

URL Synchronization

The URL should reflect the filter state for sharing and SEO:

/laptops?brand=apple,samsung&ram=16&price_min=50000&price_max=100000&sort=price_asc 

On filter change — pushState or replaceState without page reload. On direct URL entry — initialize filter state from parameters. SEO approach: popular filter combinations (brand + category) are rendered as separate static pages with unique content and canonical tags. Pages with rare combinations get <meta name="robots" content="noindex">.

Client-Side React Implementation

Filter state is stored in the URL (source of truth) and mirrored in React state:

type FilterState = { brands: string[]; ram: number | null; priceMin: number | null; priceMax: number | null; inStock: boolean; sort: 'price_asc' | 'price_desc' | 'popularity' | 'rating'; }; function useFilters() { const [searchParams, setSearchParams] = useSearchParams(); const filters = useMemo(() => parseFilters(searchParams), [searchParams]); const setFilter = (key: keyof FilterState, value: unknown) => { const next = { ...filters, [key]: value }; setSearchParams(buildParams(next), { replace: true }); }; return { filters, setFilter }; } 

On each filter change — debounce 300ms, then API request. Results update without page reload.

What Advanced Features Boost Performance?

Price Slider with Histogram

The price range component is a separate challenge. Requirements:

• Two handles (min and max) that cannot cross
• Keyboard input with validation and clamping
• Price distribution histogram behind the slider (shows where items are concentrated)

Histogram: Elasticsearch aggregation histogram with interval = (max_price - min_price) / 20. Displayed via SVG path or tiny bar chart. Ready components: @radix-ui/react-slider, rc-slider, noUiSlider. Radix option is preferred for Tailwind-stack projects.

Performance Optimization

Aggregation cache: facet count results don't change on every request. Cache aggregations per category with typical filter sets in Redis for 5-10 minutes. On item update, invalidate category cache.

PostgreSQL indexes:

-- Composite index for typical query CREATE INDEX ON products (category_id, brand, price) WHERE status = 'active'; -- GIN index for JSONB attributes CREATE INDEX ON products USING GIN (attributes); 

Lazy loading facets: show first 5–7 values, "Show all" button loads the rest via a separate request.

Mobile Adaptation

On mobile, filters are hidden behind a "Filters" button → opens a full-screen bottom drawer (bottom sheet). Inside are the same components but with larger touch targets. An "Apply" button is fixed at the bottom. On apply, the drawer closes and the list updates.

How to Implement Faceted Search in 4 Steps

Step 1: Audit Your Catalog

Review product attributes and data consistency. Determine which attributes are filterable and their data types.

Step 2: Choose Your Technology Stack

Select between SQL and Elasticsearch based on catalog size. For <50k items, PostgreSQL; for larger, Elasticsearch.

Step 3: Develop and Test

Implement backend queries, aggregations, caching, and frontend components. Test with real user flows and load testing.

Step 4: Deploy and Optimize

Deploy with monitoring. Optimize indexes and cache settings. Train your team on maintaining the system.

Delivery and Support

What's Included in the Work

• Filtering schema documentation: index, aggregation, and API descriptions
• Index and caching setup (Redis, Elasticsearch)
• Client-side React components with URL sync
• Load testing up to 1 million items
• Team training on faceted search
• 30 days post-launch support

Development Timelines and Costs

• Basic SQL filtering (checkboxes for 3–4 attributes, price range): 1–2 weeks, starting from $5,000
• Faceted search on Elasticsearch (dynamic counters, all filter types, URL sync): 3–4 weeks, starting from $10,000
• Adding price histogram and aggregation caching: +1 week, +$3,000

The choice between SQL and Elasticsearch depends on catalog size. Up to 50,000 items, a well-designed SQL approach works. Above that, Elasticsearch offers a qualitative difference in speed and faceting richness.

Technology Comparison: SQL vs Elasticsearch

We evaluate your project within 1 day. Contact us to get a consultation on the best approach and precise timelines. Our multiparameter filtering solution has been deployed for 50+ e-commerce stores, resulting in average conversion rate increases of 15%.