About This Project
Once a catalog grows past a few hundred products, users start saying the same thing: "I can't find what I'm looking for." Opening a category and scrolling through page after page is a real burden for the person searching. That's where a filter feature — pick a few conditions, see only matching products — becomes essential. How well it works has a major effect on how usable the whole site feels.
The catch is that the standard features of Shopify (the platform the EC site is built on) only cover basic criteria. Site-specific angles like "season" or "target sport" can't be added out of the box, and as filter combinations grow, pages can slow down or return inconsistent results.
For this project, we used Shopify's custom fields (Metafields — a feature for attaching extra information to products) to build filtering by gender, season, category, and price range, among others. The implementation was carried out by describing the architecture to an AI agent (AI-assisted development) step by step.
Challenges
- Some criteria can't be handled by standard Shopify filters (season, sport type, and so on)
- Complex filter combinations produced incorrect search results
- Each additional filter added processing work, slowing page display
Solution
Metafields give each product its own custom attributes, so filter criteria that the standard features can't handle can be added freely. Once the rules for those attributes are set, adding more criteria later is straightforward.
We also split the filtering work between the server and the browser. Conditions Shopify can handle directly are processed on the server in one pass, while fine-grained conditions are finished in the browser. This division keeps pages fast even with complex filtering.
Learn More
The details are covered in two articles.
Filtering with Custom Fields
How custom attributes (gender, season, category) are set on products and used for filtering.
How Price Range Filters Work
How price range filtering was designed to be both user-friendly and easy to maintain.
Architecture
In one sentence: the user's chosen conditions are divided between the server and the browser, and only the matching products come back to the list.
Technology Used
- Shopify Storefront API (the gateway for fetching product data from the storefront)
- Shopify Metafields
- Next.js API Routes
- Cursor-based pagination (fetching large catalogs in small chunks)