About This Project
If you run an EC site, you have probably run into this: users make it to a product page, look at one item, and leave. In a physical store, a staff member can step in with "this goes well with that" — but on an EC site, nobody plays that role.
So for an EC site selling motorcycle gear, we designed and built a product recommendation system that automates the shop-assistant part of the experience. When a user wonders "what would go with this?" or "is there anything similar?", the answer is already waiting on the product page.
The implementation was done from a non-engineer's standpoint, working through the architecture together with an AI agent (AI-powered development support). This page covers the overall picture; the two articles below go into how each part works.
Two Kinds of Recommendations
1. Outfit Suggestions (Complete the Fit)
This answers questions like "which pants go with this jacket?" or "which gloves match this helmet?" by suggesting products that can be used together. The key is that it shows products from a different category with the same gender, season, and sport type. Recommending another jacket to someone already looking at a jacket doesn't make an outfit — so the category is deliberately switched.
2. Related Products
This responds to "is there anything similar?" by showing other products in the same category — different designs, other colors, similar price ranges. While outfit suggestions encourage adding items, related products help users choose with confidence by giving them something to compare against.
Challenges We Solved
On a site with a large catalog, querying Shopify (the commerce platform holding the product data) every time you need candidates slows the page down. And the logic for picking the right products gets complicated as conditions pile up.
The solution was to prepare a product index — a pre-organized lookup table of product attributes — and pull candidates from there instantly at recommendation time. We also wrote the matching rules down explicitly up front ("pick products matching gender and season but in a different category"), so the selection logic stays consistent.
Read More
How Outfit Suggestions Work
How the "Complete the Fit" feature matches products across different categories.
Related Product Display Logic
How the right products from the same category are selected and displayed.
Architecture
Get current product info (category: jacket, gender: men's, season: fall/winter, sport: motorcycle)
"Goes well with this" — same gender/season/sport, different category → pants, gloves, boots
"More like this" — same category (jackets), same gender/season → other jackets
In one sentence: starting from the product being viewed, recommendations branch in two directions — items to combine with it, and items to compare it against.
Technology Used
- Shopify Storefront API (the gateway for fetching product data)
- Vercel KV (storage for the product index)
- Next.js API Routes (the behind-the-scenes endpoints that return recommendations)
- Cache control (reusing results of identical queries for a set time)