# Fit and size

Chapter 9 of the Ribbon user guide.

"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`:

1. 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.
2. Under **Theme template**, choose **size-guide**, then **Save**.
3. 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.