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).