Introduction
Run an EC site long enough and requests like these start coming up: "we want users to filter by season" or "let people browse by which sport a product is for." The standard features of Shopify (the platform the site is built on), however, only cover basic criteria such as price and availability — site-specific classification axes can't be added as they are.
This article explains how we used Shopify Metafields (a feature for attaching custom information to products) to build filter criteria that don't exist in the standard feature set. By the end, you should have a clear picture of which parts combine to make a custom filter work.
When Standard Filters Stop Being Enough
"Filter by Season" Is Not Something the Defaults Can Answer
Take an EC site selling motorcycle gear. The angles users search from are specific to that world: spring/summer versus autumn/winter items, men's versus women's, which sport the gear is made for. None of these attributes exist in Shopify's product data by default, so they can't appear as filter options either. The more distinctive your catalog, the sooner you run into this gap between how users search and what the standard filters offer.
A Metafield Is a Custom Note Attached to Each Product
Metafields fill that gap. Think of them as extra note fields you can attach to every product: "Season: Spring/Summer," "Target sport: Motorcycle," and so on — information the standard product form has no place for. Decide the rules once, register the values, and those attributes become available for filtering and sorting. The flexibility goes well beyond what the built-in filters allow.
The Attributes We Set Up
For this project, products carry the following attributes.
As the table shows, the exact angles a user searches from — which season, for whom, for which sport — are stored directly on each product as attributes.
From Selected Conditions to a Product List
Conditions Travel in the URL
When a user picks "Season: Spring/Summer" and "Gender: Men," those conditions are appended to the page URL as parameters (the part of the URL that carries extra instructions). Because the conditions live in the URL, users can bookmark or share a filtered view, and opening that URL later reproduces the same results. The server reads the URL to learn which conditions to search with.
Normalization Absorbs Inconsistent Spellings
Product data is entered by people, so the same meaning shows up in different spellings — "Men," "Mens," "Man," or the Japanese "メンズ." Left as is, filtering by one spelling would silently miss products registered under another. To prevent that, a normalization step converts every variant to a single internal value before searching. It's an unglamorous step, but it's what keeps data-entry quirks from turning into missing search results.
Translate and Query Shopify
Once normalized, the conditions are converted into the format Shopify's API (the gateway for querying data) understands, and only matching products come back. Here's the full flow.
In one sentence: the user's selection is translated, spelling-corrected along the way, into words Shopify understands.
Dividing the Work Between Server and Browser
Filters the Server Handles
Gender, season, category, sport type, and stock availability are all conditions Shopify's search can process directly, so they're applied on the server. The heavy lifting — cutting a large catalog down to candidates — is delegated to Shopify, which owns the data anyway. Only matching products travel over the network, keeping the payload small.
Filters the Browser Finishes
Size filtering (where multiple sizing systems coexist) and fine-grained price ranges are applied in the browser, against data already fetched. Since it's just rearranging and trimming what's already on hand, no extra API calls are needed, and the response when a user tweaks a condition is nearly instant.
What the Division Bought Us
Doing everything on the server multiplies API calls; doing everything in the browser means loading a huge dataset upfront. The rule "the server cuts big, the browser trims fine" gave us both speed and flexibility. It also makes future decisions easy — every new filter criterion has a clear home based on whether Shopify can process it directly.
Summary
Metafields let you add site-specific filter criteria that standard features can't provide. The keys are settling the attribute rules first, absorbing spelling variations through normalization, and dividing filter work between server and browser. With those three in place, the filter stays usable no matter how large the catalog grows.