# Hair details, care and the wig cap guide

Chapter 11 of the Tress user guide.

Shoppers buying hair want the facts a salon would tell them: where the hair is from, its grade, how much a bundle weighs, the lace, the density, whether it can be coloured and how long it lasts. Tress puts them on a **Hair details** label under the gallery, with **care steps** beside it and a **wig cap guide** that turns a head measurement into a cap size. For lashes and press-ons the same label shows how many wears they last.

## The Hair details label

A satin panel under the product's photos (the static **Hair details** block of the Product section; it can also go in the buy box, the Featured product section and the Compare section). It shows:

* **The heading** ("Hair details"; Flutter uses "Lash details") and an optional **Note beside the heading** ("From this frontal's label").
* **Stat pills**: up to three small capsules, each a big value over its label: **Grade** ("10A"), **Density** ("150%"), **Weight** ("100 g") and **Wears** ("20"). They are the first three, in the order of the **Stat pills** setting, that the product has a value for. A value shown as a pill isn't repeated in the rows.
* **Rows**, each from a product metafield (chapter 7) and skipped when the product has no value: **Origin**, **Grade**, **Weight per bundle** ("100 g", the chosen variant's weight, updating as the shopper changes length), **Lace**, **Cap size**, **Density**, **Colouring** (a tick and "Can be dyed and bleached", or a cross and "Not for colouring"), **Lifespan** and **Wears** ("Wear up to 20 times").
* Then, while **Show variant options** is on, the product's options with the chosen values ("Length: 18 in"), and any **Spec row** blocks.

| Setting | Default | What it does |
| --- | --- | --- |
| Heading | "Hair details" | |
| Note beside the heading | Empty | For example, "From this frontal's label" |
| Stat pills | "grade, density, weight, wears" | Up to three, in this order, from grade, density, weight and wears. A value shown as a pill isn't repeated in the rows. Clear it for rows only. For lashes, "wears" alone works well. |
| Show origin, Show grade, Show weight per bundle, Show lace, Show cap size, Show density, Show colouring, Show lifespan, Show wears | All on | Each row's switch. Each row also has a label setting (**Origin label** "Origin", **Grade label** "Grade", **Weight per bundle label** "Weight per bundle", **Lace label** "Lace", **Cap size label** "Cap size", **Density label** "Density", **Colouring label** "Colouring", **Lifespan label** "Lifespan", **Wears label** "Wears"), shown while the row is on. |
| Spec row position | Below product details | Where your **Spec row** blocks go: Above product details or Below product details |
| Show variant options | On | The product's options and the chosen values, as rows |
| Show SKU, Show product type, Show vendor in spec table, Show weight, Show barcode | All off | Shopify's own fields, for mixed stores. **Show weight** prints the variant's shipping weight, not `custom.weight_grams`. |

**Spec row** blocks add rows of your own, such as "Band: Cotton" for lashes or "Glue: Included" for press-ons: **Label** ("Band"), **Product metafield** (its namespace and key, such as `custom.band`, from Settings › Custom data › Products), **Value** (used when the metafield is empty; a typed value shows on every product that uses this template) and **Unit** (shown after the value, such as g or in; leave it empty for weight, volume and dimension metafields, which include their unit). Lists of text, true or false values, measurements and dates are formatted for the shopper's language; a category metafield shows each entry's label. In the theme editor, a Spec row that can't show says why (no such key, an unsupported type, no value).

A product with nothing for the label to show shows no panel. In the theme editor, a product without data shows sample rows and pills tagged **Sample**.

## Care

The **Care** block (static under the gallery, beside Hair details; it can also go in the buy box) is a satin panel headed **Care** with the product's care steps: its `custom.care` metafield (rich text, chapter 7), or, for products without one, the block's own **Care steps**. A numbered list shows each step in a numbered capsule, and a bold first sentence becomes the step's title line.

| Setting | Default | What it does |
| --- | --- | --- |
| Heading | "Care" | |
| Care steps | Three steps: "**Detangle before you wash.** Wide-tooth comb, from the ends up.", "**Wash cool, condition well.** Sulphate-free shampoo every 7 to 10 days." and "**Sleep in silk.** Wrap it in the bonnet we send with every install." | Shown when the product has no `custom.care` metafield. Clear it to hide the card on those products. It shows on every product that uses the template, so make it true of all of them, or use the metafield. |
| Always show the cap size link | Off | It shows anyway on products with a cap size option or a `custom.cap_size` value |

**For wigs**, the card ends with a row: a small drawing of a head with a tape measure, "Wearing it as a wig?" and a **Find your cap size** link that opens the wig cap guide. It shows on products with an option named in **Cap size option names**, a `custom.cap_size` value, or with **Always show the cap size link** on.

## The wig cap guide

The guide opens from the Care card's **Find your cap size** and from the same link beside the label of a Cap size option in the variant picker. It is a dialog headed "Find your cap size":

* **Your head measures**: a number field with a **cm** or **in** switch (cm by default; one decimal, such as 56.5). Anything that isn't a number gets "Enter a number, like 56.5."
* **Your cap size**: the size from your **Cap size table** whose range includes the measurement (the matching row of the table below it is highlighted), with its range. Between two ranges, it suggests the larger: "Between sizes: choose Medium and tighten the band." Outside every range: "That's outside our sizes. Write to us and we'll help.", linked to your contact page (the page with the handle `contact`), or your store's email.
* **Choose Medium**: when the product's Cap size option has a value with that name (capitals don't matter), a button picks it, closes the guide and moves focus to the chosen size ("Medium cap selected").
* **How to measure**: a drawing and three steps: "Start at your front hairline, just above the eyebrows.", "Wrap a soft tape behind your ears and across the nape." and "Read the number where it meets. Between sizes? Choose the larger and tighten the band."

Esc or a click outside closes it, and focus goes back to the link that opened it. The sizes and ranges come only from **Theme settings › Hair, lashes and nails › Cap size table** (chapter 7): set it to the caps you actually make.

## The instalments message

The last piece of product page information is Shopify's: with the **Price** block's **Show Shop Pay Installments** on, stores with Shop Pay Installments get Shopify's instalments message under the price, styled to fit beside Tress's type and to wrap cleanly on a 320px phone. Stores without it see nothing there (chapter 7).