Faceted Search

A large catalog is only useful if shoppers can narrow it down — by price, brand, size, or any other attribute a merchant cares about. BigCommerce calls this faceted search, and like product data, the available facets and their current state arrive as structured data a template just needs to render.

Facets on a category page

A category context includes a facetedSearch object describing every available facet for that category and which values are currently selected:

{{#each facetedSearch.facets}}
  <fieldset>
    <legend>{{this.name}}</legend>
    {{#each this.values}}
      <label>
        <input type="checkbox" name="{{this.name}}" value="{{this.value}}"
          {{#if this.selected}}checked{{/if}}>
        {{this.label}} ({{this.count}})
      </label>
    {{/each}}
  </fieldset>
{{/each}}

Submitting selected facets as query-string parameters re-requests the category page with filtering applied server-side — the same request/response cycle as a normal page load, just with different results based on the parameters sent.

Price range facets

Price is handled slightly differently from a list of discrete values — it's typically a min/max range input rather than a checkbox list, reflecting the underlying data's continuous nature rather than a fixed set of options:

<input type="number" name="price_min" value="{{facetedSearch.priceMin}}">
<input type="number" name="price_max" value="{{facetedSearch.priceMax}}">

Sorting

Alongside filtering, category pages support sorting (by price, name, relevance, or newest) through a dedicated query parameter, usually rendered as a simple select control that resubmits the page on change:

<select name="sort" onchange="this.form.submit()">
  <option value="featured">Featured</option>
  <option value="price_asc">Price: Low to High</option>
  <option value="price_desc">Price: High to Low</option>
{{/select}}

Ajax-driven filtering

As with a Shopify collection, reloading the entire page on every facet change feels slow. Stencil themes commonly intercept the filter form's submit with JavaScript, request just the updated product grid markup, and swap it into the page — avoiding a full navigation while still relying on BigCommerce's own server-side filtering logic rather than reimplementing it in the browser.