About This Project
On EC sites selling apparel and sports gear, the size chart is often what decides whether a purchase happens. Buying without knowing how something fits feels risky, and wrong sizes come straight back as returns — so this is information neither users nor store operators can afford to treat lightly.
The catch is that one size chart is never enough. Jackets and pants are measured in different places, and men's and women's cuts follow different dimensions. Multiply category by item type by gender, and the number of charts you need quickly climbs into the dozens. Assigning the right one to each product by hand stopped being realistic the moment the catalog passed a few hundred items.
In this project, we built a system where opening a product page automatically shows the size chart that matches that product. Nobody has to configure a chart when registering a product anymore, and special cases can be handled with a quick change in the admin screen.
The Challenge
An apparel-focused EC site selling motorcycle gear faced these problems:
- Too many products to assign size charts to manually, one by one
- A large number of charts driven by combinations of category × item type × gender
- Special products, like racing suits, that need their own dedicated charts
- Administrators wanting to change chart assignments flexibly during day-to-day operations
The Solution
We used product metafields (extra information you can attach to products in Shopify — category, gender, item type and so on) as the clues, and implemented a system that looks up a mapping table — "this combination gets this chart" — to select the right size chart automatically. Products that don't fit the table can be assigned individually through exception rules.
Learn More
The size chart system is explained in detail across three articles.
Size Chart Selection Logic
Priority-based mapping rules and how exceptions are handled.
Size Chart Data Structure and File Management
How chart data is stored, how spelling variations are normalized, and how mappings are changed dynamically.
Size Guide Checker
A feature that lets users enter height and chest measurements to get a recommended size.
Architecture
Displays product information (category, gender, item type, etc.)
Looks up the mapping table, applies priority rules, absorbs spelling variations
Where the size tables themselves live
Mapping table editable from the admin screen
In one sentence: the product page hands over its product information, the selection logic consults the mapping table, and the matching size chart comes back ready to display.
Key Features
- Automatic selection: Determines the right size chart from a product's category, type, and gender
- Priority control: Checks per-product exceptions → per-SKU exceptions → the standard mapping → a unisex fallback, in that order
- Normalization: Absorbs input variations like "women," "woman," and "ladies" before matching
- Dynamic management: Chart assignments can be changed from the admin screen
- Size guide checker: Suggests a size that fits when users enter their height and chest measurements
Results
- Dozens of size charts managed in one place
- Size chart setup work on product updates reduced to zero
- Less pre-purchase hesitation over sizing, thanks to the size guide checker
Technologies Used
- Shopify Storefront API (fetching product metafields)
- Next.js (frontend and API)
- Vercel KV (storage for the admin-editable mapping table)
- TypeScript