Front Row Furniture: BigCommerce Advanced Category Filter System

Type
BigCommerce Custom Development · Category UX · Advanced Filtering
Role
BigCommerce Stencil · JavaScript · Custom CSS · Catalog API
Stack
BigCommerce Stencil · JavaScript · Custom CSS · Catalog API
Status
01

The Problem: Limited Native Filtering on BigCommerce Category Pages

Front Row Furniture sells events and hospitality furniture to UK buyers banqueting chairs, folding chairs, stacking chairs, bar stools across a catalogue with multiple materials, finishes, conditions, and price points. A buyer sourcing for a wedding venue needs plastic folding chairs under £15. A hotel sourcing for a restaurant needs featured steel banqueting chairs with five-star ratings.

BigCommerce’s default category filters do not support custom product attributes material, finish, condition or merchandising flags like Is Featured and In Stock. Buyers landing on the Chairs category saw the full catalogue with no way to narrow it. Finding the right product in 29+ items across five sub-categories meant manually browsing every card.

02

The Solution: A Custom BigCommerce Category Filter System

Codinative built a custom multi-attribute sidebar filtering system on BigCommerce Stencil. Price, Rating, Colour Option, Material, Finish, Condition, Is Featured, In Stock, and Has Free Shipping are all live filter dimensions  each pulling from BigCommerce custom fields and product metadata. Results update in real time. Active filter tags show in the Refine by bar. Every filter action updates the URL with query parameters so filtered views are shareable and bookmarkable. No page reload on any filter action.

Project Framework

BigCommerce Filter System Development: Situation, Task, Action, Result

The Situation: Limited BigCommerce Category Filtering for Large Catalogs

Front Row Furniture had a large events furniture catalogue but limited BigCommerce native filtering. Buyers could not narrow by material, finish, condition, or merchandising flags making product discovery slow and friction-heavy.

The Task: Building a Multi-Attribute BigCommerce Filter System

Build a custom multi-attribute filtering system that lets buyers refine by any combination of material, price, rating, colour, finish, condition, featured status, and stock status with real-time updates and clean active filter states

The Action: Custom Sidebar Filtering on BigCommerce Stencil

Built a custom sidebar filter panel on BigCommerce Stencil with checkbox filters for Material (Plastic, Steel), Colour Option (Black, Blue, Burgundy, Grey, White), Finish (Dark Oak, Light Oak, Walnut), Condition (Used), and Other flags (Is Featured, In Stock, Has Free Shipping). Added a star rating threshold filter with five levels and product counts per level. Added a price range filter with Min/Max inputs. Implemented active filter tags with individual dismiss and a Clear all link. Connected all filters to BigCommerce custom fields via client-side JavaScript with real-time DOM updates and URL query parameter sync. Added grid and list view toggle persisting across filter changes.

The Result: Faster Product Discovery Through BigCommerce Filtering

Material: Plastic alone returns one result Folding Plastic Chairs Grey at £8.99. Plastic and Steel combined returns two Tolix Style Bar Height Chairs at £19.99 and Folding Plastic Chairs Grey at £8.99. Is Featured returns four curated products instantly. Rated 5 Stars or More returns 27 products. Buyers go from full catalogue to a purchase-ready shortlist in one or two filter selections.
Core Features

Core Features of the BigCommerce Category Filter System

01
Feature 01

Sidebar Filter Panel

The sidebar loads all available filter dimensions for the current category on page load. Each section collapses independently. Product count per filter value is shown inline Black (1), Blue (1), Burgundy (1), Grey (1), White (1) so buyers know before selecting whether a filter returns results. Filter values with zero matching products in the current category do not render, preventing dead-end filter combinations.
Feature 02

Active Filter Tags and Clear State

Every applied filter appears as a tag in the Refine by bar “Plastic ×”, “Is Featured ×”, “Rated 5 Stars or More ×”. Each tag has an × button removing that single filter. A Clear all link removes every active filter in one click. Each filter section also has its own Clear → link to remove one dimension without touching others. All state is managed client-side in JavaScript with no page reload.
02
03
Feature 03

Multi-Select and Cross-Attribute Filtering

Within a single dimension Material multiple selections use OR logic: Plastic and Steel returns products matching either. Across dimensions Material and Rating selections use AND logic: only products matching both criteria appear. This matches how buyers think when narrowing a furniture catalogue by multiple requirements simultaneously.
Feature 04

Rating Threshold Filter

Five threshold levels from 1 star and up through 5 stars and up with product counts per level. Selecting 5 stars and up 27 products returns only the Round Back Steel Banqueting Chairs at £21.99 and all other five-star products. The filter compares each product’s average review rating against the selected minimum rather than using BigCommerce’s native sort.
04
05
Feature 05

Featured, In Stock, and Free Shipping Flags

Is Featured maps to the is_featured boolean on each product via the BigCommerce Catalog API. In Stock maps to inventory availability. Has Free Shipping maps to the product’s free shipping flag. Checking Is Featured instantly returns the four products Front Row Furniture has manually curated including Cross Back Stacking Chair Oak at £46.99 without the buyer needing to know which products are featured. All product data loads once at category page load and filters client-side with no additional API calls per filter action.
Deliverables

BigCommerce Category Filter System: What Was Shipped

Custom sidebar filter panel Price, Rating, Colour, Material, Finish, Condition, Other flags

Per-filter-value product counts inline no zero-result values displayed

Multi-select filters with OR logic within dimension, AND logic across dimensions

Active filter tags with individual dismiss and Clear all

Per-section Clear link to remove one dimension without affecting others

Rating threshold filter five levels from 1 star up to 5 stars up

Is Featured, In Stock, Has Free Shipping as filterable flags via Catalog API

URL query parameter sync filtered views shareable and bookmarkable

Grid and list view toggle persisting across filter changes

Real-time product grid update on every filter action no page reload

Common Questions

Front Row Furniture BigCommerce Filter System FAQ's

BigCommerce's native faceted search supports variant-level options and a limited set of product attributes. It does not support custom fields as filter dimensions, boolean merchandising flags like is_featured, star rating thresholds, or condition flags. For a furniture catalogue where material, finish, condition, and curation status drive the buying decision, the native system cannot surface what buyers need.

At filter panel load time, JavaScript reads the full product set for the current category and counts how many products match each custom field value. The count renders inline next to each checkbox label. Filter values with zero matching products do not appear in the sidebar, preventing buyers from selecting a filter that returns an empty page.

Within a single dimension, multiple selections use OR logic Plastic and Steel returns products matching either material. Across dimensions, selections use AND logic Material: Steel and Rating: 5 Stars and Up returns only products that are both steel and five-star rated. This matches how buyers narrow a catalogue by multiple requirements at once.

Is Featured maps to the is_featured boolean on each BigCommerce product. In Stock maps to inventory availability. Both are read at category page load from BigCommerce product data. The JavaScript filter logic checks these against the active filter state when rendering the grid. No additional API call is made per filter action.

Yes. Every filter action updates the page URL with query parameters for the active filters. A buyer who narrows to Material: Plastic and Rating: 5 Stars and Up gets a URL that can be shared or bookmarked. The filter panel reads from URL query parameters on page load and restores the active state automatically.

Yes. The filter sidebar reads available dimensions from the products in the current category. The Tables category page with different custom field values renders its own filter options automatically. The same JavaScript and CSS handles every category on the Front Row Furniture store without per-category configuration.

Codinative is a verified BigCommerce Partner. Every project is BigCommerce only — no split focus across platforms

Custom apps, B2B Edition, Stencil and Catalyst storefronts, REST API v3 integrations — built by
developers who work on BigCommerce every day.

Scroll to Top