Wrong size is still the number one reason fashion shoppers send items back. Most stores try to fix it with a discount code or a friendlier returns policy. The cheaper fix is upstream: a size guide page design that people actually read, understand and trust before they add to cart. canva.com has covered this at length.
This guide is a build-ready blueprint. It covers the table structures that stay readable on a 375px screen, how to handle centimetres and inches without confusing anyone, how to present body measurement diagrams, and exactly where to place the size guide link on product pages so it gets used instead of ignored.
Why size guide page design is a conversion problem, not a content problem
A size chart is usually treated as a dusty PDF someone uploaded once. In reality it sits on the critical path between “I like this” and “I’ll buy this”. When it fails, one of three things happens:
- The shopper leaves the product page to research and never comes back.
- The shopper buys two sizes on purpose, which inflates revenue then destroys margin on return shipping and restocking.
- The shopper guesses, receives the wrong fit, refunds, and rarely reorders.
Good size guide UX attacks all three. The goals are simple and measurable:
- Answer “what size am I in this garment” in under 15 seconds.
- Never force a shopper to leave the product page or lose their scroll position.
- Remove unit ambiguity so nobody confuses a 38 cm chest with a 38 inch chest.
- Set fit expectations (relaxed, true to size, runs small) so the delivery matches the mental image.
The anatomy of a high-performing size guide page
Before you touch a single table cell, agree on the components. A complete size guide page contains:
| Component | Purpose | Priority |
|---|---|---|
| Measurement table | Maps sizes to numbers | Essential |
| Unit toggle (cm / in) | Serves international traffic without maths | Essential |
| How to measure diagram | Makes the numbers usable at home | Essential |
| Fit description per product | Sets expectation: slim, regular, oversized | High |
| Model reference (height + size worn) | Gives a human benchmark | High |
| International size conversion | Translates UK / EU / US / JP labels | Medium |
| Fabric and stretch note | Explains tolerance between sizes | Medium |
| Between-sizes advice | Answers the most common hesitation | High |
Step 1: choose garment measurements, body measurements, or both
This single decision drives your whole layout. Most stores get it wrong by publishing only one type.
| Type | What it shows | Best for | Risk |
|---|---|---|---|
| Body measurements | The body a size is designed to fit | Tailoring, denim, swimwear, lingerie | Hides how loose or tight the cut is |
| Garment measurements | Flat dimensions of the item itself | Tees, shirts, knitwear, outerwear | Requires the shopper to own a similar item |
| Both, tabbed | Two tables in one panel | Most multi-category stores | Needs clear labelling to avoid confusion |
Recommendation: use a two-tab panel labelled “Find your size” (body measurements) and “Garment measurements” (flat item measurements). Default to body measurements, because that is what a first-time buyer can actually action with a tape measure.
Example: body measurement table (womenswear tops)
| Size | UK | EU | Bust (cm) | Waist (cm) | Hips (cm) |
|---|---|---|---|---|---|
| XS | 6 | 34 | 78 – 82 | 60 – 64 | 86 – 90 |
| S | 8 – 10 | 36 – 38 | 83 – 88 | 65 – 70 | 91 – 96 |
| M | 12 | 40 | 89 – 94 | 71 – 76 | 97 – 102 |
| L | 14 – 16 | 42 – 44 | 95 – 102 | 77 – 84 | 103 – 110 |
| XL | 18 | 46 | 103 – 110 | 85 – 92 | 111 – 118 |
Notice the ranges rather than single values. Ranges reduce “I’m between sizes” anxiety and make your chart honest about grading tolerance.
Step 2: responsive table patterns that survive mobile
Mobile is where most size charts break. A seven-column table shrunk to 375px produces four-point text or an unusable pinch-zoom image. Pick one of these four patterns and commit to it.
Pattern A: horizontal scroll with a sticky first column
The safest default. Keep the size label column pinned while the measurement columns scroll horizontally.
- Wrap the table in a container with
overflow-x:auto. - Apply
position:sticky; left:0with a solid background to the first cell of each row. - Add a visible affordance: a soft gradient fade on the right edge, plus a small “swipe to see more” hint that disappears after the first scroll.
- Never rely on the scrollbar alone. On touch devices it is invisible until the user guesses.
Pattern B: stacked cards, one per size
Below roughly 600px, transpose the table into a card per size: a bold size heading, then measurement label and value pairs. This removes horizontal scrolling completely and works well for charts with five or fewer sizes.
Pattern C: measurement-first accordion
Flip the axis. Each accordion row is a measurement (Chest, Waist, Inseam) and expands to show every size value. Useful when shoppers arrive knowing one number and want to find their size from it.
Pattern D: interactive size finder on top of the table
Add two or three inputs (chest, waist, height) above the chart. When the shopper types a value, highlight the matching row and print a plain sentence: “Based on a 96 cm chest, we recommend size M.” Keep the full table visible underneath, because power users and sceptics want to verify.
Mobile readability rules
- Minimum 14px body text inside cells, 16px for the size labels.
- Minimum 44px touch target for the unit toggle and tab controls.
- Zebra striping or row hover highlighting so the eye does not jump lines.
- Right-align numeric columns, left-align labels.
- Never publish a size chart as a flat image or PDF. It cannot be zoomed cleanly, translated, read by screen readers or indexed.
Step 3: the cm / inch unit toggle done properly
Unit confusion is a silent return generator. A shopper in Manchester and a shopper in Austin need the same table with different numbers, and neither should be doing mental arithmetic.
Toggle design rules
- Place it directly above the table, aligned to the right of the table heading, not buried in a footer or a settings menu.
- Use a two-option segmented control labelled “cm” and “in”. Avoid a dropdown, avoid a checkbox, avoid the word “metric”.
- Show the active state clearly with filled background plus
aria-pressedso assistive tech announces it. - Set a smart default from shipping country or store locale: inches for US, UK and Canada, centimetres elsewhere. Always let the user override.
- Remember the choice in local storage and apply it across every product and category the shopper visits in that session.
- Convert client side, instantly, with no page reload and no layout shift. Reserve the column width for the longest possible value.
- Repeat the unit in the column header, for example “Chest (cm)”, so a screenshot still makes sense out of context.
Rounding and conversion accuracy
- Store your master data in one unit only, ideally centimetres to one decimal place, and generate the other on the fly.
- Round centimetres to the nearest whole number, inches to the nearest 0.5 or 0.25 depending on category. Denim and tailoring deserve quarter inches, sweatshirts do not.
- Keep range logic consistent: convert both ends of the range, never the midpoint.
- Do not mix units inside a single table, for example height in feet and chest in centimetres.
| Measurement | Centimetres | Inches (displayed) |
|---|---|---|
| Chest, size M | 96 – 101 | 37.75 – 39.75 |
| Waist, size 32 | 81 | 32 |
| Inseam, regular | 81.5 | 32 |
Step 4: body measurement diagrams that remove guesswork
A table of numbers is useless if the shopper measures the wrong place. Pair every measurement column with a visual and a one-line instruction.
Diagram design specs
- Use clean vector line illustrations rather than photographs. They render sharply, weigh almost nothing and stay inclusive across body types.
- Number each measurement point on the figure and use the same numbers in the table headers. The link between image and data must be explicit.
- Make measurement points clickable or hoverable so tapping “2. Waist” highlights that line on the figure.
- Provide separate figures per category: tops, trousers, dresses, footwear, headwear. One generic body outline never covers inseam and hat circumference.
- Keep the diagram beside the table on desktop, and directly above the table on mobile so instructions are read before the numbers.
- Write alt text describing the measurement, for example “Tape measure around the fullest part of the chest, kept level under the arms”.
How-to-measure copy that works
| Measurement | Instruction |
|---|---|
| Chest / bust | Measure around the fullest part, keeping the tape level and the arms relaxed. |
| Natural waist | Measure at the narrowest point, usually just above the navel. Do not pull tight. |
| Hips | Stand with feet together and measure around the widest part of the seat. |
| Inseam | Measure from the top of the inner thigh down to the ankle bone. |
| Sleeve length | From the centre back of the neck, over the shoulder, to the wrist with the arm slightly bent. |
Add a no-tape fallback. Most people do not own a tape measure. Offer a short alternative: “No tape measure? Lay your best-fitting t-shirt flat and compare it to our garment measurements tab.” This single line rescues a large slice of hesitant shoppers.
Step 5: fit tips that set expectations before delivery
Numbers answer “will it fit”. Fit tips answer “will it look like the photo”. You need both.
- Fit scale: a three or five point visual scale from slim to oversized, with the product’s position marked.
- Model reference: “Model is 178 cm and wears size S.” Include this for every model shown in the gallery.
- Between sizes advice: a single explicit sentence per product type, such as “Between sizes? Size down for a closer fit, up for a relaxed drape.”
- Fabric behaviour: mention stretch percentage, rigid denim shrink or relax, and whether knitwear grows with wear.
- Customer fit feedback: if you collect reviews, surface an aggregate such as “82% say true to size” next to the size selector. Quantified social proof outperforms generic reassurance.
- Care and shrinkage note: a washing warning inside the size panel prevents “it shrank” returns that were never a sizing problem.
Step 6: where to link the size guide from product pages
You can build the best chart in your category and still see no impact if the entry point is weak. Placement beats polish.
| Location | Format | Verdict |
|---|---|---|
| Beside the size selector, same row | Text link or icon plus label “Size guide” | Primary placement, non-negotiable |
| Inside an “error” state when no size is chosen | “Please select a size. Not sure? See size guide” | High value, rarely implemented |
| Product details or specification accordion | Embedded table for the exact product | Good secondary support |
| Under the model image | “Model wears S, height 178 cm. Size guide” | Strong on mobile galleries |
| Site footer | Link to the full standalone page | Needed for SEO and returning visitors |
| Cart or pre-checkout reminder | “Double-check your size” micro link | Useful, keep it subtle |
| Only in a mega menu or help centre | Buried navigation item | Not sufficient on its own |
Modal, drawer or full page?
Use all three, serving the same source data:
- Desktop: a centred modal, at least 700px wide, with a dark overlay and a clearly visible close button. Never let it force page-level scrolling.
- Mobile: a bottom drawer that slides up to around 90% viewport height, with its own internal scroll and a drag handle. This preserves product page scroll position, which a full redirect destroys.
- Standalone page: a real indexable URL such as
/size-guide/with per-category anchors, linked from the footer. This is what search engines, customer service agents and email templates link to.
Context matters. The panel opened from a jeans page must open on the jeans chart, not a generic index of every category. Pass the category as a parameter and deep link the correct tab.
Step 7: accessibility and technical details developers forget
- Use real semantic markup:
<table>,<thead>,<th scope="col">and<th scope="row">. Divs styled as a grid break screen reader navigation. - Add a
<caption>naming the chart, for example “Men’s t-shirt body measurements in centimetres”. - Give the scrollable wrapper
tabindex="0"and an accessible name so keyboard users can scroll it. - Trap focus inside the modal, return focus to the trigger on close, and close on Escape.
- Maintain at least 4.5:1 contrast on table text. Light grey on white is the most common failure.
- Keep the guide crawlable on its own URL. Queries like “brand name size guide” are real and high intent.
- Load the diagrams as SVG or lazy-loaded WebP so the modal opens instantly on a mobile connection.
- Feed accurate size and measurement attributes into your product feed. Consistent sizing data also helps shopping listings.
Step 8: measure the impact
Treat the size guide like any other conversion asset and instrument it from day one.
- Size guide open rate: percentage of product page sessions that open the panel. A very low number usually means the link is invisible.
- Add to cart rate, opened vs not opened: shoppers who consult the guide should convert better. If they do not, your chart is confusing them.
- Unit toggle usage by market: reveals whether your default unit is wrong for a region.
- Size-related return rate: track “too small” and “too big” separately per SKU. A one-sided skew means your grading or your chart is off, not the shopper.
- Multi-size orders per customer: bracketing behaviour is a direct symptom of low sizing confidence.
Review the worst offending SKUs each quarter, remeasure the actual garments, and update the chart. Size guides rot as suppliers change.
Common size guide page design mistakes
- A single global chart applied to every category, including footwear and accessories.
- Charts published as images or PDFs, unreadable and untranslatable.
- Inches only, or centimetres only, with no toggle.
- Opening the guide in a new tab or redirecting away from the product page.
- Ambiguous headers like “Waist” with no indication of body versus garment.
- No advice for shoppers between two sizes.
- Numbers copied from a supplier spec sheet and never verified against real stock.
- Charts that contradict the review section where dozens of customers say “runs small”.
Implementation checklist
- Audit returns data and list your top ten size-related offenders.
- Remeasure those garments flat and record everything in centimetres, one decimal place.
- Build one chart per category, with body and garment tabs.
- Code the table semantically with a sticky first column and horizontal scroll.
- Add the cm / in segmented toggle with locale default and stored preference.
- Commission per-category SVG measurement diagrams with numbered points.
- Write fit descriptions, model references and between-sizes advice for every product template.
- Place the size guide link next to the size selector, in the unselected size error, and in the footer.
- Ship a standalone indexable
/size-guide/page with category anchors. - Add event tracking, then review open rate and return reasons after 60 days.
FAQ
How do I make a size guide for my clothing store?
List every size you sell, measure a verified sample of each garment flat, convert those flat measurements into the body measurements the size is designed to fit, then publish both sets in an HTML table with a cm / inch toggle and a numbered measurement diagram. Finish by linking it next to the size selector on every product page.
Should a size guide show body measurements or garment measurements?
Both, separated into clearly labelled tabs. Body measurements help shoppers choose a size with a tape measure. Garment measurements help them compare against an item they already own, which is often faster and more convincing.
Where should the size guide link go on a product page?
Directly beside the size selector, on the same line, as a visible text link. Reinforce it in the unselected-size error message, under the model shot with the model’s height and worn size, and in the footer for the full standalone page.
Should the size chart open as a modal or a separate page?
Open a modal on desktop and a bottom drawer on mobile so the shopper never loses their place on the product page, and also maintain a standalone indexable page for search, email and customer support links. All three should read from the same data source.
How do I handle cm and inches without confusing shoppers?
Store one master unit, default the display based on the shopping locale, offer a two-option cm / in toggle above the table, remember the preference across the session, and always repeat the unit inside the column header.
Does a size guide page actually reduce returns?
Yes, when it is specific and easy to reach. Generic charts buried in a help centre barely move the needle. Per-category charts with garment measurements, fit descriptions, model references and a prominent product page link consistently lower size-related returns and reduce size bracketing.
What size should the size guide table be on mobile?
Full container width, with body text no smaller than 14px, touch targets of at least 44px, and either horizontal scrolling with a sticky size column or a stacked card per size. Never scale a wide table down to fit. Reference: https://nngroup.com.
Ready to rebuild your size guide?
A well built size guide page is one of the cheapest margin improvements in fashion e-commerce. It costs a few development days and it keeps paying back on every order. If you want help auditing your current chart, designing the measurement diagrams or coding a responsive, accessible size guide into your store, the team at Fat Cow Web Design can take it from audit to launch.
