PortfolioAbout This Project
When selling apparel and sports equipment on e-commerce sites, size charts are essential information for purchase decisions. However, the applicable size chart varies depending on category, item type, and gender.
In this project, we built a system that automatically displays "the right size chart for this product" on product pages.
The Challenge
The apparel e-commerce site faced these challenges:
- With many products, manually setting appropriate size charts for each was impractical
- Many size charts exist for combinations of category × item type × gender
- Special products (racing suits, etc.) require dedicated size charts
- Administrators need to flexibly change mappings during operation
The Solution
We implemented a system that automatically selects appropriate size charts based on mapping tables, utilizing product metafields (e.g., category, gender, product type).
Learn More
We explain the size chart feature in detail across three articles.
Size Chart Selection Logic
We explain the mapping rules based on priority and exception handling mechanisms.
Data Structure and File Management
We explain JSON file structure, normalization processing, and dynamic management with KV store.
Size Guide Checker
We explain the implementation of a feature that allows users to check recommended sizes by entering height and chest measurements.
Architecture
Displays product info (category, gender, product type, etc.)
Mapping table lookup・Priority evaluation・Normalization
data/sizecharts/*.json
Dynamic mapping changes
Key Features
- Auto Selection: Automatically determines appropriate size chart from product category, type, and gender
- Priority Control: Handle exceptions → SKU exceptions → Normal mapping → Fallback
- Normalization: Absorbs notation variations (unifying "women", "woman", "ladies")
- Dynamic Management: Mappings can be changed from admin panel
- Size Guide Checker: Suggests sizes matching user's body measurements
Key Results
- Centralized management of numerous size charts
- Fully automated size chart configuration during product data updates
- Improved user experience with size guide checker
Technologies Used
- Shopify Storefront API (metafield retrieval)
- Next.js (frontend, API Routes)
- Vercel KV (dynamic mapping management)
- TypeScript