Introduction
You can prepare a beautifully detailed size chart and still leave the hardest part to the shopper: comparing those numbers against their own body and deciding which size actually fits. Faced with a label like "Euro 50" or "M," people can't be confident it's right for them, hesitate, and abandon the purchase. For an EC site, uncertainty about sizing is that direct a cause of lost sales.
So we built a "size guide checker": the user enters their height and chest measurement (or waist, depending on the item), and the feature uses the size chart data to answer with "this is the size we'd recommend for you."
This article explains how that works underneath, in three parts — switching the input fields, calculating the recommendation, and presenting the result. The underlying idea is simple: stop asking people to read a table, and start handing them an answer.
Switching the Input Fields to Match the Product
Different Items Are Measured in Different Places
Choosing a jacket size needs a chest measurement; trousers need a waist; gloves need the circumference of the hand. Lock the form into a single fixed shape and you end up asking for numbers that mean nothing for the product on screen.
So the input fields switch automatically, based on what the currently displayed size chart contains.
As the table shows, the user is only ever asked for the two measurements that genuinely matter for that item. Keeping the input effort to a minimum is what decides whether the feature gets used at all.
Reusing What the Chart Already Contains
Which fields to ask for is worked out from the size chart itself — whether it has a row for height, whether it has a row for chest. There is no separate configuration file for the checker; it simply reads the chart data as it is. Add a new chart, and the checker supports it automatically.
How the Recommended Size Is Calculated
Turning the Chart Into Range Data
The groundwork for the calculation is converting a size table written for human eyes into something a machine can work with. The process finds the height row and the chest row inside the table and rewrites them as a list of ranges: "height 165–172cm means M," "chest 92–100cm means M," and so on.
In one sentence, that's a preparation step: reshape a chart made for people into a list of ranges a machine can match against. The advantage is that the displayed chart and the data used for the calculation never have to be maintained twice.
Reconciling Two Answers: Height and Chest
Once the user submits their measurements, the system works out the size suggested by the height and the size suggested by the chest, then compares the two to settle on a final recommendation.
In one sentence: when height and chest disagree, how the recommendation is presented depends on how far apart they are. Chest wins in a one-size gap because how a jacket feels to wear is largely decided by the fit around the chest. For body shapes where the gap reaches two sizes or more, we don't force a single answer — both are shown so the user can choose.
Borderline Measurements Keep Both Candidates
Some inputs land exactly on a boundary — a height of 172cm sitting right between M and L, for instance. Rather than picking one, both are held as candidates and the final call is made in combination with the chest measurement. If that still doesn't narrow it down, the result is presented as a pair, written "M-L."
Handling boundaries carelessly leads straight to "I ordered it and it was too tight." When a case genuinely is ambiguous, showing it as ambiguous is the more honest option — and it earns more trust in the end.
Presenting the Result
Give the Reasoning, Not Just the Size
The result is never shown as a bare size. It comes together with the reasoning behind it — something like "Recommended size: L / Height 175cm → L / Chest 96cm → M-L / Based on the chest measurement, we suggest L."
Why the reasoning matters
With the reasoning attached, users aren't asked to take the suggestion on faith. They can weigh it against how clothes usually fit them and choose with confidence.
That's the whole point of the format: it targets the single biggest reason for returns, "the size wasn't what I expected."
Built Into the Size Chart Panel
The checker isn't a separate page. It sits inside the size chart panel that opens from the product page.
Back button and title
Scrolls horizontally, with the left column pinned in place
Input form and the recommendation
How to take the measurements properly
In one sentence, the diagram shows a single panel covering the whole journey: look at the table, enter your measurements if you're unsure, and check how to measure correctly. Because there's no jumping back and forth between chart and checker, a hesitating user can be carried all the way to an answer on the spot.
Ideas for Future Versions
There's still room to improve both the accuracy and the ease of use. Three things are on the list:
- Linking to purchase history: pre-fill the form with sizes the user has bought before
- Converting from clothes they already own: base the suggestion on "the M I usually wear"
- Body type selection: fine-tune the recommendation for "standard," "broad," or "slim" builds
All three point the same way — less to type in, more evidence behind the suggestion.
Summary
The size guide checker converts size chart data into a list of ranges, matches the user's height and chest against both axes, and calculates a recommended size. The rules that settle disagreements and the handling of borderline values are decided in advance, and the result always carries its reasoning. Changing a size chart from something to read into something that answers you takes a surprising amount of weight off the decision.
How the right chart gets chosen for each product, and how the chart data itself is managed, are covered in the related articles.