Fit and size — Ribbon docs

"Will it fit?" is the question that keeps fashion in the bag or sends it back. Ribbon answers it on every product page, from your own data:

Under the size pills, the fit block: "Fit" and the fit phrase ("Runs a little large"), a five-step scale with a marker on the product's step and "Runs small · True to size · Runs large" under it, then the advice and the model line: "Size down if you're between sizes. Model is 175 cm (5′9″) and wears S."
At the end of the size row's label ("Size · M"), a Size guide link with a ruler. For a product without a size option, the link sits in the fit block instead.
The link opens the size guide: "Size guide", the product and the chart's title ("Juliet satin slip dress · Dresses and tops"), a cm | in switch, Find my size, the size chart with the recommended row marked, your chart notes and "Between sizes? Size up for a relaxed fit."

The fit scale reads custom.fit (chapter 7):

Fit	Phrase	Advice
1	Runs small	Size up from your usual size.
2	Runs a little small	Size up if you're between sizes.
3	True to size	Take your usual size.
4	Runs a little large	Size down if you're between sizes.
5	Runs large	Size down from your usual size.

Screen readers hear the phrase and the advice as text ("Fit: runs a little large. Size down if you're between sizes."); the scale itself is decoration.

Find my size

Shoppers type their Bust, Waist and Hip (any of them; at least one) and press Find. The answer appears in a result card: "Your size", the size in large figures, a sentence such as "Bust, waist and hip all sit in M." and a Choose M button, and the chart's row for M is highlighted.

The answer is the smallest size whose ranges hold every measurement the shopper entered. Ranges include both ends, so a bust of 82 in a chart with XS 78-82 and S 82-86 gets XS.
Between sizes: when no single size holds every measurement but each one is inside the chart, the card says "Between sizes: size up for a relaxed fit." and recommends the largest of the sizes the measurements fall in.
Outside the chart: below the smallest size, "Smaller than our XS: try XS and see the notes."; above the largest, "Larger than our XL: see the notes or ask us." with no size and no button.
With the fit: on a product with fit 4 or 5, the sentence adds "This piece runs large: S will fit closer." (the next size down); with fit 1 or 2, "This piece runs small: L will fit better." (the next size up).
Choose M selects M in the size pills, closes the size guide and puts the shopper back on the pill ("Size M selected"). If M is sold out with the other options as chosen, the button is disabled and reads "M is sold out". On a page without size pills (the size guide page, a product whose sizes don't match the chart) there's no button.
Mistakes: an empty form gets "Enter at least one measurement"; anything that isn't a number gets "Enter a number, such as 88".

The cm | in switch converts the table and the fields (inches to the nearest half inch, centimetres to whole numbers). The guide opens in the chart's own unit, and the shopper's choice is remembered in their browser for next time. Find my size uses the chart's bust (or chest), waist and hip columns (chapter 7); a chart without them shows the table only.

Sizing and fit settings

In Theme settings › Sizing and fit:

Setting	Default	What it does
Size option names	Size	The product option names that hold sizes, separated by commas (capitals don't matter). They decide which option shows as size pills, where the Size guide link goes, which sizes the card's quick add, Shop the look and Wear it with offer, and which option Choose sets. A shop whose option is called "Talla" or "Shoe size" adds it here: `Size, Shoe size`.
Low stock at or under	3 (0 to 10)	Sizes with tracked stock at or under this number show a "2 left" pill (chapter 11). 0 turns them off.
Size guide page	Empty	A page using the `page.size-guide` template (below), linked as Find my size in the phone menu. Leave blank to hide the link.

Fit and size block

The Fit and size block goes in the Product section (the presets put it right under the variant picker) and the Featured product section; quick view always has it. It shows for any product with a fit, a model line or a size chart, and the size chart is always there unless you clear the Default size chart.

Setting	Default	What it does
Show the fit scale	On	Off keeps the fit phrase and advice but hides the scale
Show the model line	On	The model line after the advice
Show the Size guide link here when the product has no size option	On	For one-size pieces with a chart, such as a bag with measurements, or a product whose sizes aren't in an option named in Size option names
Fit when a product has none (0 hides the scale)	0 (0 to 5)	1 runs small, 3 true to size, 5 runs large. Products set their own with the `custom.fit` metafield.
Model line when a product has none	Empty	Products set their own with the `custom.model_info` metafield
Default size chart	A women's chart in cm, XS to XL (below)	Used when a product has no size chart (`custom.size_chart`). Pipe format: a header line, then one size per line (chapter 7).
Chart unit	Centimetres	Or Inches: the unit the Default size chart is written in
Chart notes	"Measure over underwear with the tape level and snug, not tight."	Under the chart, when the product's chart has no notes
Show Find my size	On	Off shows the chart without the finder

The Default size chart ships as:

Size | Bust | Waist | Hip
XS | 78-82 | 60-64 | 86-90
S | 82-86 | 64-68 | 90-94
M | 86-90 | 68-72 | 94-98
L | 90-96 | 72-78 | 98-104
XL | 96-102 | 78-84 | 104-110

Replace it with your own measurements. The first column must match your size option's values (capitals don't matter), or Choose finds nothing to select.

With no fit, no model line and no chart, the block shows nothing and the size row has no Size guide link. With a chart but no fit or model line, it shows the Size guide link only. In the theme editor, a product with no fit and no model line shows a sample (fit 3 and "Model is 175 cm (5′9″) and wears S.") tagged Sample.

Quick view always shows the Fit and size block with the block's own defaults: the product's metafields first, then the women's chart above. A chart or fallback you type into the product template's block doesn't reach quick view, so for anything that must show there, use the metafields (chapter 7).

Size guide page

For a page of its own, such as the presets' /pages/size-guide:

In admin, go to Online Store › Pages › Add page and title it "Size guide" (the handle becomes size-guide). Write any measuring tips in its content, or leave it empty.
Under Theme template, choose size-guide, then Save.
In the theme editor, open Theme settings › Sizing and fit and choose the page as Size guide page, so the phone menu shows Find my size. Link it from your menus or the announcement bar too.

The page shows the Size guide section: your heading and text, the page's own content, then the chart with the cm | in switch and Find my size, in the page rather than in a pop-up. There's no product on this page, so it has no Choose button: shoppers get their size, then pick it on the product page.

Setting	Default	What it does
Heading	Size guide	Blank uses the page's title
Text	"Our pieces are cut to the chart below. Measure over underwear with the tape level and snug, then let Find my size do the rest."	Under the heading
Size chart	The same women's chart, XS to XL	This page's chart, in the pipe format (chapter 7). It is the section's own setting, so keep it in step with your Default size chart.
Chart unit	Centimetres	Or Inches
Notes	"Measure over underwear with the tape level and snug, not tight."	Under the chart
Show Find my size	On

The Size guide section can also be added to any other page template in the theme editor, for example once per garment type.