# Fabric and fit tech

Chapter 9 of the Rep user guide.

"How does it feel?" is the question a photo can't answer. The **Fabric and fit** card on the product page answers it from five product metafields, and the size picker shows the inseam.

## What shoppers see

Under the trust row, a card headed **Fabric and fit**:

* **Compression**: a meter of five pill segments, four filled, with the words "4 of 5, firm hold". The meter is a picture of the sentence; screen readers hear the sentence.
* **Stretch** ("4-way stretch", with a stretch icon) and **Fit** ("Second skin", with a ruler icon), side by side.
* **Fabric feature chips**, each an icon with its label: Squat-proof, Sweat-wicking, Pockets, Recycled.
* **The composition**: "75% recycled nylon, 25% elastane."
* For firm styles, the **size-up line**: "Between sizes? Size up for comfort."

In the size picker, leggings sold in two lengths show the inseam under the sizes; shorts whose variants all share one length say "Inseam: 4 in". The cart line shows it too: "Fern · M · 25 in".

## What hides when data is missing

Each row shows only when its metafield has a value (chapter 7):

| Row | Reads | Hidden when |
| --- | --- | --- |
| Compression meter | `custom.compression` | Empty, 0, a decimal or a word. Numbers above 5 count as 5. |
| Stretch | `custom.stretch` | Empty |
| Fit | `custom.fit_type` | Empty |
| Feature chips | `custom.fabric_features` | Empty. Up to **Features to show**. |
| Composition | `custom.composition` | Empty |
| Size-up line | `custom.compression` and `custom.fit_type` | The style isn't firm (see below), or **Size-up line** is empty |

When stretch or fit is missing, the other takes the row; the meter and specs share the space that's left. **With none of the five, the block shows nothing at all**, so a gift card or a sticker pack simply has no card. In the theme editor, a product with none of them shows sample values (compression 4, 4-way stretch, Second skin, four features and a composition) with a "Sample" pill.

## Fabric and fit block settings

| Setting | Default | What it does |
| --- | --- | --- |
| Heading | "Fabric and fit" | |
| Show compression | On | The meter row |
| Show stretch | On | |
| Show fit | On | |
| Show fabric features | On | The chips |
| Features to show | 6 | 2 to 8. Shows while **Show fabric features** is on. |
| Show composition | On | |
| Style | Card | **Card** (a rounded box with a fine edge) or **Plain** (no box, for a page with its own) |

The `product` and `product.no-set` templates and Featured product can hold it.

## Theme settings › Fabric and fit

| Setting | Default | What it does |
| --- | --- | --- |
| Compression words | "Light, Soft, Medium, Firm, Maximum" | Five words for levels 1 to 5, separated by commas. The level's word goes into the sentence in lower case: "4 of 5, firm hold". Pick words that read well before "hold". A missing word falls back to the number. |
| Suggest sizing up from compression | 4 | 3 to 5. Firm styles show the size-up line from this level. |
| Size-up line | "Between sizes? Size up for comfort." | Shown on firm styles and in the fit finder. Clear it to turn the line off on the card. |
| Inseam option names | "Inseam, Length" | The variant option that holds the inseam. Separate several with commas. |
| Inseam labels | `25 in \| 7/8 length` and `28 in \| Full length` (two lines) | One per line, as `25 in \| 7/8 length`: an inseam value exactly as in your option, a `\|`, then the words shown under it |

## The size-up rule

A style is **firm** when its `custom.compression` is at or above **Suggest sizing up from compression** (4 by default), or its `custom.fit_type` contains the word "Compression" (any case). Firm styles:

* show the **Size-up line** at the end of the Fabric and fit card;
* round **up** in the fit finder when a shopper falls between two sizes, with the same line (chapter 11);
* round up in Complete the set's suggested size for that piece (chapter 10).

Write `Compression` exactly as the fit type of compression styles: the How it fits chart marks the shopper's row by the same rule, but reads the fit type only when it's exactly "Compression".

## The inseam, three ways

Rep decides how to show the inseam from your options and the variant metafield `custom.inseam`:

1. **An inseam option.** The product has an option named in **Inseam option names** (Inseam or Length): leggings sold as Colour × Size × Inseam with values "25 in" and "28 in". Shoppers get a full-width segmented control under the size pills, each length with its label from **Inseam labels** under it ("25 in" over "7/8 length"), and the label row reads "Inseam: 25 in". A length with no matching line in **Inseam labels** shows without a label.
2. **No inseam option, and `custom.inseam` differs between sizes.** Each size pill shows its inseam as a small second line ("M" over "26 in"). Use it when the length grows with the size.
3. **No inseam option, and every variant shares one `custom.inseam`.** One line under the size pills: "Inseam: 4 in". Use it for shorts and joggers that come in one length.

A product with neither shows no inseam. The cart line adds the variant's `custom.inseam` after its options ("Fern · M · 25 in") when no option already says it.

## The home page's fabric tech row

The presets' **Icon row** ("Made for movement": Squat-proof, Sweat-wicking, 4-way stretch, Pockets) explains your fabric words once, so the chips on product pages make sense. It's ordinary text you edit in chapter 4's **Icon row**, separate from each product's metafields, so keep the two in step.