Building Custom Product Filters for Wix Stores

Wix default filtering works for basic catalogs, but most stores eventually need deeper control: multi-select facets, dynamic counts, and URLs that preserve filter state for marketing campaigns.

We treat filters as query state, not UI state. That means every selection maps cleanly to URL params and backend query constraints.

1) Model your filterable fields intentionally

Normalize catalog fields first. Avoid free text for values like color or size. Structured data is what keeps faceted queries predictable.

1export const filterFields = {
2  category: "string",
3  price: "number",
4  color: "string[]",
5  size: "string[]",
6  inStock: "boolean"
7};

2) Build a deterministic query layer

The query builder should not care about UI widgets. It only receives parsed filter state and returns a query object.

1export function buildProductQuery(filters) {
2  const where = {};
3 
4  if (filters.category?.length) where.category = { $in: filters.category };
5  if (filters.color?.length) where.color = { $in: filters.color };
6  if (filters.size?.length) where.size = { $in: filters.size };
7  if (filters.inStock === true) where.inventory = { $gt: 0 };
8 
9  if (filters.minPrice || filters.maxPrice) {
10    where.price = {
11      ...(filters.minPrice ? { $gte: Number(filters.minPrice) } : {}),
12      ...(filters.maxPrice ? { $lte: Number(filters.maxPrice) } : {})
13    };
14  }
15 
16  return where;
17}

3) Keep filters in the URL

Shareable links are essential for paid campaigns, sales teams, and support tickets. If the user cannot copy the URL and get the same results, the filter architecture is incomplete.

1export function toQueryString(filters) {
2  const p = new URLSearchParams();
3  Object.entries(filters).forEach(([k, v]) => {
4    if (Array.isArray(v)) v.forEach((item) => p.append(k, item));
5    else if (v !== undefined && v !== null && v !== "") p.set(k, String(v));
6  });
7  return p.toString();
8}

4) Performance checklist

• Precompute facet counts for popular categories.
• Debounce free-form inputs like price ranges.
• Paginate results and avoid rendering huge DOM lists.
• Cache identical query responses for short windows.

5) Information architecture for large product catalogs

As catalogs grow, filter UX depends on taxonomy quality. Group attributes by shopper intent: discovery attributes (category, style), decision attributes (size, color), and transactional attributes (price, stock, shipping). This grouping helps you prioritize visible filters and reduce cognitive load.

6) Facet count strategy that keeps UI trustworthy

Facet counts should reflect currently active filters; otherwise users lose confidence. Compute counts from the constrained result set and cache popular filter combinations. If you cannot compute exact counts fast enough, use approximate counts but label them clearly.

• Recalculate counts after each filter update.
• Prevent zero-result dead-ends with disabled options.
• Persist filter state when users move between listing and product detail pages.
• Track abandonment after filter use to identify weak facets.

7) SEO considerations for filterable listing pages

Not every filtered URL should be indexable. Define canonical rules so search engines index only high-value combinations (for example, category + top intent attribute) and avoid crawl waste on low-value permutations.

• Set canonical URLs for index-worthy combinations.
• Noindex parameter combinations that create thin or duplicate pages.
• Generate static landing pages for high-value filter intents when needed.
• Use descriptive titles and meta descriptions for key filter pages.

Custom Wix product filter FAQ

Q: Should filters run on the client or server? A: For small catalogs, client-side can work; for growing catalogs, server-side queries with caching are safer and more scalable.

Q: How many filters should be visible by default? A: Usually 4 to 6 high-impact filters. Hide lower-impact options behind an advanced panel.