PortfolioAbout This Project
On EC sites, customers often think "What would go well with this?" or "Are there similar products?" We designed a product recommendation feature to address these needs.
Two Types of Recommendations
1. Coordination Suggestions (Complete the Fit)
"What pants would go with this jacket?" "What gloves match this helmet?" We suggest products that can be used together.
We display products from different categories that match the same gender, season, and sport type.
2. Related Products
"What products are similar to this one?" We suggest other products in the same category.
We display products useful for comparison, such as different colors or similar price ranges.
Challenges
- Fetching related products takes time when there are many products
- Logic for selecting appropriate products is complex
- Calling APIs every time degrades performance
Solutions
Product Index Utilization
We pre-organize product information into an index and quickly retrieve from it during recommendations. This reduces API calls and improves display speed.
Matching Rule Definition
We clearly define rules for "which products to suggest." Logic such as selecting products that match gender and season but are in different categories from the viewed product.
Learn More
How Coordination Suggestions Work
Learn about the "Complete the Fit" feature that matches products from different categories.
Related Product Display Logic
Learn about the system that selects and displays appropriate related products from the same category.
Architecture Diagram
"Pair with this product" - Same gender, season, sport but DIFFERENT category → Pants, gloves, boots
"Products in same category" - Same category, gender, season → Other jackets
Technologies Used
- Shopify Storefront API
- Vercel KV (product index storage)
- Next.js API Routes
- Cache control