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:
- 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.
- No inseam option, and
custom.inseamdiffers 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. - 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.