Fit finder

"What size am I?" is the question behind most activewear returns. The fit finder asks three things, height, weight and how the shopper likes things to fit, and answers from your size chart. The answer is remembered on the shopper's device, so every product they open after that says Your size: M.

What shoppers see

• On the product page, a Fit finder link with a ruler icon sits in the size option's label row. It opens a dialog: Height (cm, or feet and inches), Weight (kg or lb), and How do you like it to fit? with Snug, True to size or Relaxed. The answer appears as they type, with no button to press: the size in a round colour-block disc, Your size: M, "Based on 168 cm, 63 kg and a true fit." and, when it applies, a note such as "Between sizes? Size up for comfort." Choose M closes the dialog and picks that size.
• On every product after that, the size label row says Your size: M, the M pill wears a small You tab, and (with Preselect the shopper's size on) M is already chosen.
• On product cards, the quick add tray rings the shopper's size with the You tab. Cards themselves carry no badge, so collections stay calm.
• In the How it fits chart under the product, the shopper's row is highlighted with the Your size pill.
• In Complete the set, each piece's size starts on the shopper's size for that piece (chapter 10).
• On the home page, the Fit finder promo runs the same form in a band, and its answer links to your collection in that size.

Theme settings › Fit finder

The default Size chart:

Size | Height cm | Weight kg
XS | 150–160 | 45–52
S | 155–165 | 52–60
M | 160–170 | 60–68
L | 165–175 | 68–77
XL | 170–180 | 77–88

Replace it with your own sizes before you publish. The sizes must be written exactly as your Size option's values: a chart that says "M" doesn't match a product whose sizes are "Medium". Give products cut differently, such as compression leggings that run small, their own chart in custom.size_matrix (chapter 7).

The Fit finder block

The product template has it; product.no-set doesn't, because accessories have no sizes. It adds the dialog, and the variant picker's label row shows the Fit finder link while the block is in the same section. Products without a size option show nothing.

How the size is worked out

1. Units. Inches become centimetres (× 2.54) and pounds become kilograms (× 0.45359237). Heights from 120 to 220 cm (3 ft 11 in to 7 ft 3 in) and weights from 30 to 200 kg (66 to 440 lb) are accepted; outside that, the field says "Enter a height between 120 and 220 cm." A comma works as a decimal point.
2. Where the shopper falls on the chart. Rep takes the middle of each size's height range and the middle of each size's weight range, and finds where the shopper falls between those middles, once by weight and once by height. With the default chart the weight middles are 48.5, 56, 64, 72.5 and 82.5 kg, so 63 kg sits most of the way from S to M; the height middles are 155, 160, 165, 170 and 175 cm, so 168 cm sits between M and L.
3. Blend. The two positions are blended, weight counting Weight share (70%) and height the rest (30%), because weight predicts a garment's fit better.
4. Preference. Snug moves the answer about a third of a size smaller, Relaxed about a third larger, True to size not at all.
5. Round. An answer close to one size gives that size. An answer in the middle third between two sizes is between sizes:
   • a compression style (its custom.compression at or above Suggest sizing up from compression, or its custom.fit_type "Compression"; chapter 9) rounds up and shows the Size-up line, "Between sizes? Size up for comfort.";
   • any other style rounds to the nearer size and says "Between M and L. M for a true fit, L for room."
6. Off the chart. More than half a size below the smallest size gives the smallest, with "You're below our size range; XS is our smallest." More than half a size above the largest gives the largest, with "You're above our size range; XL is our largest."
7. This product's sizes. The chart's size is matched to the product's size values (capitals and spaces at the ends don't matter). A size the product isn't made in goes to the nearest one it is, the larger on a tie: "M isn't made in this style. Closest: L." A size that's sold out says "Your size: M (sold out)"; Choose M becomes "M is sold out", and a Tell me when it's back link picks the size anyway so the shopper can use the back-in-stock form.

Two worked examples

With the default chart and Weight share at 70%:

The numbers count the sizes from 0: XS is 0, S is 1, M is 2, L is 3 and XL is 4. In feet and pounds the same shopper works the same way: 5 ft 6 in and 140 lb (167.6 cm, 63.5 kg) also gives M.

Where the answers are kept

The answers (height, weight, preference and units) are saved in the shopper's own browser, in its local storage under rep:fit. Nothing is sent to you, to Shopify or to anyone else, and no cookie is set. That's why a shopper enters them again on another device or browser, and why you can't see your customers' sizes.

• Clear my size in the dialog forgets them, and every page follows.
• If the browser won't save (some private browsing modes, or blocked site data), the answers last for the page and the form says "Your browser isn't saving this, so we'll ask again on the next page."
• A change in one tab reaches the shopper's other open tabs.

The Privacy line says this to shoppers; keep it true if you change it.

"Your size" on later products and preselect

Each product works out its own size from its own chart (its custom.size_matrix, else the theme's) and its own firmness, so a shopper can be M in a relaxed tee and L in compression leggings. With Preselect the shopper's size on, the product page chooses that size when it opens, except when:

• the link already picks a variant (?variant= in the address, such as from a cart line or an ad);
• the shopper has already picked a size on that page;
• the shopper's size is sold out;
• the size is already chosen.

A new answer in the dialog doesn't change the size by itself; Choose M does.

The Fit finder promo section

The fit finder inline on the home page, on a colour block with the bend and lanes: your words and ticks on one side, the form on a white card on the other. The answer gives the size from your theme-wide Size chart and a Shop in size M button.

Shop in size M needs the Size filter in Search & Discovery (chapter 13). Without it, Shopify ignores the filter and shows the whole collection. The link uses the first name in Size option names, lower-cased; keep that name one word, such as Size, so the address matches Shopify's filter.

Size option names

Rep finds sizes by the option's name, compared without capitals or spaces at the ends: "Size", "size" and " Size " all match Size. If your bras use "Bra size" and everything else "Size", set Size option names to "Size, Bra size". A product whose size option has another name gets no Fit finder link, no Your size pill, no size pills in quick add and no How it fits chart.

In the theme editor

On a product without a size option, the block shows its own link and a sample answer (168 cm, 63 kg, a true fit) with a "Sample" pill, so you can style it on any product. Until you type in the dialog, it shows the sample values; what you type in the editor is saved in the editor's own browser storage, not your shoppers'.