PortfolioWhat are Metafields?
Shopify Metafields allow you to add custom information to products. You can freely set attributes like "season," "target sport," or "material type" that aren't available by default.
Example Attributes
We set up attributes to match product characteristics:
| Attribute | Description | Example Values |
|---|---|---|
| Season | Spring/Summer, Fall/Winter, All-season | SS, FW, ALL |
| Gender | Target gender | Men's, Women's, Unisex |
| Category | Product type | Jacket, Pants, Helmet |
| Sport | Compatible sport | Motorcycle, Ski, MTB |
How Filter Processing Works
When customers select filters, the conditions are sent to the API. The API parses the conditions, converts them to Shopify's filter format, and retrieves the data.
Processing Steps
- URL parameter parsing: Read the conditions selected by customers
- Value normalization: Unify variations ("Men's", "Man" → "Man")
- Filter conversion: Transform to Shopify API-compatible format
- Data retrieval: Fetch matching products from Shopify
Server and Client Responsibilities
Processing all filters on the server would increase API calls. So we divide processing based on filter type.
Server-side Filters
- Gender, season, category, sport type
- Tag-based filtering
- Stock availability
These are directly supported by Shopify API, so processing them server-side efficiently retrieves data.
Client-side Filters
- Size (when multiple size systems exist)
- Detailed price ranges
- Specific stock conditions
Additional filtering is applied browser-side on retrieved data.
Handling Variations
The same meaning can have different data formats depending on how it was registered.
Example: "Men's", "Men", "Man", "Male"
We perform normalization to unify these. Filters work correctly regardless of how data was registered.
Architecture
Summary
By using Metafields, we can add custom filter items not supported by default features. Combined with divided processing and variation handling, we achieve user-friendly and stable filter functionality.