Length and texture picker

"What length should I get?" and "which texture is that?" are the two questions every hair brand answers all day. Tress answers them on the product page, in quick view and in the Featured product section, from your product's own options: a length scale with a line-drawn figure, texture chips with a picture of each texture, and an (i) glossary that explains lace, density, grade and cap sizes in plain words.

The length scale

What turns it on: an option named in Theme settings › Hair, lashes and nails › Length option names (Length, Hair length by default) whose values are all lengths. Each of these reads as a length: 18 in, 18 inches, 18", 18, 18.5 in and 45 cm. A value without a unit counts as inches. Whole numbers and one decimal place work. If even one value isn't a length ("18 in + leave out"), the whole option shows as plain tiles instead, so a row is never half scale, half tiles.

What shoppers see: the option's label, "Length: 18 in (46 cm)", with a Length chart link and a ruler icon on the right when you've chosen a Length chart page. Under it, two columns:

• The figure: a simple line drawing from head to hip, with dashed lines at your landmarks and the hair drawn in the accent color, falling over the shoulders to the chosen length with a level line across it. When a shopper picks another length, the hair grows or shortens to it (instantly, for visitors who prefer reduced motion).
• The stops: one row per length, in your option's order, each with a ring on a rail, the length in its own unit ("18 in") and the other unit beside it ("46 cm"), the landmark when one matches ("Armpit", from Length landmarks), and on the right the price of that length with the shopper's other choices (texture, lace and so on). The chosen stop fills with a soft accent wash and its ring becomes an accent dot.

A length that is sold out with the other choices is struck through, says "Sold out" instead of its price (or "Unavailable" when you don't sell that combination at all) and can't be chosen, so the arrow keys skip it. The prices and sold-out marks update as the shopper changes the other options. Values in cm show the cm first ("45 cm", then "18 in").

For keyboard and screen reader users the scale is a real group of radio buttons: Tab moves into it on the chosen length, the arrow keys move between lengths, and each move is read out in full, "18 in, 46 cm, Armpit, $219.00".

When the figure hides: with only one length, with more than 14 lengths (the stops then flow in two columns), in narrow spaces such as a small quick view, when Show the figure beside the length scale is off, or when the Variant picker block's Figure beside the length scale says Hide. That block setting (Use the theme setting, Show or Hide) lets one template differ from the rest, such as a lash template that never needs a figure.

Getting the figure right. The figure has six fixed points: chin, shoulder, armpit, mid-back, waist and hip. The first six lines of Length landmarks say which length reaches each one (10, 14, 18, 22, 26 and 30 in by default), and the hair is drawn between them in proportion. If your hair is measured on a taller or shorter model, change the numbers, not the order (chapter 7). With fewer than two landmark lines, the hair is placed by the stop's position in the list: the first length reaches the chin, the last the hip.

Texture chips

What turns them on: an option named in Texture option names (Texture, Pattern by default) where every value has a picture. Each value's picture comes from, in this order:

1. A Shopify swatch image on the option value (chapter 7).
2. A line in Texture images matching the value ("Body wave: body-wave-swatch.jpg", a file in Content › Files).
3. With Draw the texture when there's no image on (the default), a drawn texture: seven fine strands in the heading color on the band color, picked from words in the value's name, first match wins:

If one value has no picture by any of the three ways (a value called "Natural black", say), the whole option shows as plain tiles.

What shoppers see: the label, "Texture: Body wave", and a row of tall capsule chips with each texture's name under it (four to a row on phones). The chosen chip gets a ring in the heading color. A sold-out texture is faded with a diagonal line, and stays selectable so shoppers can see its lengths; the add button then says Sold out.

The same pictures appear wherever Tress shows a texture: the install builder's step 1 (chapter 9), the Texture filter's mini capsules (chapter 13), the mega menu's texture row (chapter 3) and collection tiles with no image whose title names a texture (chapter 4).

The glossary

What turns it on: an option named in Options with a glossary (Lace, Density, Grade, Cap size by default) where at least one value has a definition in Glossary (chapter 7). A small round (i) button then sits after the option's label. Screen readers hear it as "What do these lace options mean?".

What shoppers see: a dialog titled "Lace, explained" listing the option's values that have a definition, in the option's order, each with its one-line definition; the value the shopper has chosen is highlighted and marked Selected. With a Full glossary page chosen, "Read the full hair glossary" links to it at the foot. On desktops the dialog opens as a popover under the (i), always placed fully on screen; on phones it slides up from the bottom. Esc, the close button or a click outside closes it, and focus goes back to the (i).

Definitions are matched to values without regard to capitals: exactly first, then the longest term the value contains, so one line for "HD lace" covers "HD lace 13×4" and "HD lace 5×5" too. A value with no definition is simply left out of the dialog.

The Length guide section

A home page spotlight, and the body of your length chart page. On the left (or right), a panel with the figure drawn large and every landmark from Length landmarks placed at its own height ("22 in Mid-back"), the Highlighted length drawn in the accent and dashed lines at the other lengths you mark; beside it, the eyebrow, heading, text, a button and a text link.

The section reads only its own settings and your landmarks, so it shows on any store, with or without products.

Set up your length chart page

1. In admin, go to Online Store › Pages › Add page. Title it "Length guide" (its handle becomes length-guide, which the Tress preset's links expect) and write an introduction in its content if you like.
2. In the page's Theme template field, choose page.length-guide, and save.
3. In Theme settings › Hair, lashes and nails, choose it as the Length chart page. The "Length chart" link beside every length scale, the header's utility link (when its own link is empty) and the Length guide section's button now go there.
4. Open the page in the theme editor: under the Length guide section ("Every length on one chart") there's a Rich text section, "How each length sits", with a placeholder line. Replace it with your own chart: the lengths you sell, how they sit on different heights, and how much shorter each texture looks.