How Outfit Suggestions Work

Design and details of "Complete the Fit," a feature that matches products across categories

Outfit CoordinationComplete the FitMatchingRecommendationsCross-selling
5 min read

Introduction

Have you ever closed a single-item order thinking, "if only we could have suggested the matching gear as well"? In a physical store, "this would go nicely with that" comes naturally from the staff. On an EC site, that nudge has to be built into the system.

This article covers "Complete the Fit," a feature built for an EC site selling motorcycle gear that automatically suggests products meant to be used together. It walks through the rules used to pick products and the way display speed is kept up. By the end, you should be able to map the idea onto your own catalog.

What Complete the Fit Is

Automatic Suggestions for "Gear That Goes Together"

Complete the Fit suggests products that can be used together with the one currently on screen. A user viewing a jacket sees candidates like "pants, gloves, and boots that match this jacket" lined up near the bottom of the product page. The goal is a state where the next item appears in front of users without them having to hunt around the site. For motorcycle gear, where riders need a full set of equipment, this style of suggestion is a particularly good fit.

How It Differs from Hand-Picked Recommendations

You might picture staff manually registering "recommended combinations" for each product. That approach works, but the registration and upkeep grow with every product added, and anything left unregistered shows nothing at all. Instead, this implementation selects candidates automatically by rule, based on attributes each product already has (gender, season, and so on). Add a new product with its attributes filled in, and it joins the suggestions with no extra work.

Building the Matching Rules

Three Conditions to Match

Suggested products must match the currently viewed product on three attributes:

  • Gender: same gender (men's with men's)
  • Season: same season (fall/winter with fall/winter, or all-season)
  • Sport type: same sport (motorcycle with motorcycle)

Suggesting women's summer gloves alongside a men's winter jacket doesn't make an outfit. These three conditions guarantee that everything shown "makes sense worn together."

Two Conditions to Exclude

Just as important as what to match is what to leave out. Products in the same category as the one being viewed, and the viewed product itself, are excluded. Showing "another jacket" to someone looking at a jacket is a replacement suggestion, not an outfit.

As the table shows, products of the same kind as the one on screen are automatically dropped from the suggestions.

Randomizing to Keep the Lineup Fresh

In categories with many qualifying products, always showing the same top few means repeat visitors see an identical lineup every time. So the feature picks randomly from the qualifying candidates. Each page load shuffles the faces a little, giving returning users something new to notice — and, from the store's side, spreading exposure across more of the catalog.

The Data Design Behind Fast Display

Building a Product Index in Advance

Querying Shopify (the commerce platform holding the product data) for the full catalog on every match would slow pages down as the catalog grows. Instead, a product index — a lookup table holding only what matching needs — is built and stored ahead of time, and suggestions are drawn from there. The index holds just the product ID, URL, title, price, image, category, gender, season, and sport type. Like finding a book from the catalog card instead of opening every book on the shelf.

Caching Results to Cut Repeat Queries

Once computed, a recommendation result is reused as a cache (a temporary saved copy) for a set time. When traffic concentrates on a popular product page, the same result is served without recomputing, keeping both display speed and backend load in check. To balance this with the random rotation, the cache lifetime is kept short.

Architecture

Outfit Suggestion Processing
User opens a product page
Example: men's fall/winter motorcycle jacket
Read the current product's attributes
Category: jacket, gender: men's, season: fall/winter, sport: motorcycle
Search the product index
Look up qualifying products from the pre-built table
Apply matching conditions
Gender, season, and sport match; category is anything but jackets
Pick randomly from candidates
Keep the lineup varied
Show in the Complete Your Fit section
Pants, gloves, boots, protectors, and more

In one sentence: the current product's attributes act as the key, and "products from other categories that go with it" are pulled from a pre-built index and displayed.

Summary

Under the hood, Complete the Fit is a simple rule — match gender, season, and sport; switch the category — combined with an index and caching for speed. You don't need AI-driven prediction to get practical outfit suggestions; organizing product attributes into rules is enough. A good first step is simply writing down what attributes your own products carry.