# The size helper

Chapter 9 of the Littles user guide.

"What size for a nine-month-old?" is the question every baby shop answers all day. The size helper answers it on the product page, from one size table for your whole shop (with per-product overrides):

* **Size tiles** show each size's height under it ("62–68 cm"), and the size row's label ("Size · 6–12 m") carries a **Size guide** link with a ruler at its end.
* Under the size tiles, a sky-blue **strip**: a cloud, "**Not sure which size?** Tell us their age or height and we'll pick it." and a **Find their size** button.
* The button (and the Size guide link) opens the **size helper**: "Find their size" with the product and its size range ("Ribbed romper · sizes 0–3 m to 2 years"), a switch between **By age** and **By height**, a number field with its unit (months or years; cm or in) and a **result**: "We'd pick **6–12 m**. Fits 6 to 12 months, 68 to 80 cm, 7.5 to 10 kg." When the child is near the top of that size, a tip follows: "Growing fast? Size up to 12–18 m." **Choose 6–12 m** (and **Choose 12–18 m** with the tip) selects that size on the product and closes the helper. Under it, the full **size table** (Size, Age, Height, Weight) with the picked row highlighted, and a **cm · kg | in · lb** switch.
* Under the product, the **Size guide and safety** section shows the same table and helper on the page ("Size guide"), with one field for "Their age or height".
* A **size guide page** shows your Default size table with the units switch, for links from your menu, hero or Shop by age note (below).

The answer updates as shoppers type. Below the smallest size it says "Smaller than our smallest size. Newborn is the closest." and offers that size; above the biggest, "Bigger than our biggest size, 6 years. Ask us about larger sizes." with no button. Anything that isn't a number gets "Enter a number, like 9 or 9.5." A size that is sold out (with the other options as picked) shows its button disabled as "6–12 m is sold out". A product without a size option, or whose sizes don't match the table, gets the answer but no Choose buttons.

On phones the table tightens to fit four columns; a table wider than the screen (a long size name, imperial units at 320px) scrolls sideways, with a soft shadow on the side that has more, and keyboard users can tab to it and scroll it with the arrow keys. The **units** switch changes every table and helper on the page, and the shopper's choice is remembered in their browser for next time. Heights convert to inches (to the nearest half inch) and weights to pounds (to the nearest 0.1 lb); switching back shows your own figures again.

## Sizing settings

In **Theme settings › Sizing**:

| Setting | Default | What it does |
| --- | --- | --- |
| Size option names | Size, Age | The product option names that hold sizes, separated by commas (capitals don't matter). They decide which option shows as **size tiles**, which products get **size chips** on cards, which option the **age badge** falls back to and which option **Choose** sets. Add your own words: a shop whose option is called "Talla" or "Fits" adds it here. |
| Default size table | Newborn to 6 years (below) | Your shop's size chart in the pipe format of chapter 7. A product's own `custom.size_table` replaces it. |
| Default units | Centimetres and kilograms | Or Inches and pounds: what shoppers see first |
| Suggest sizing up near the top of a size | 10% (0 to 30) | Shows "Growing fast? Size up" when a child is within this share of the top of their size. At 10%, a child of 11.5 months gets 6–12 m and a tip to size up to 12–18 m. 0 turns it off. |
| Detail under size tiles | Height | None, Height ("62–68 cm") or Age ("6–12 m") |

The **Default size table** ships with eleven sizes, newborn to about six years:

```
Size | Age (months) | Height (cm) | Weight (kg)
Newborn | 0-1 | 46-56 | 2.5-4.5
0-3 m | 0-3 | 56-62 | 4.5-6
3-6 m | 3-6 | 62-68 | 6-7.5
6-12 m | 6-12 | 68-80 | 7.5-10
12-18 m | 12-18 | 80-86 | 10-11.5
18-24 m | 18-24 | 86-92 | 11.5-13
2 years | 24-36 | 92-98 | 13-15
3 years | 36-48 | 98-104 | 15-17
4 years | 48-60 | 104-110 | 17-19
5 years | 60-72 | 110-116 | 19-21
6 years | 72-84 | 116-122 | 21-23
```

Replace it with your own measurements. The first column must match your size option's values (chapter 7 explains the matching), or the size tiles show no detail and **Choose** finds nothing. Where rows overlap (Newborn 0–1 inside 0–3), the first row that fits wins.

## Size helper block

The **Size helper** block goes in the **Product** section (the presets put it under the variant picker), the **Featured product** section and the **Size guide and safety** section. It shows for products with a size option (one named in **Size option names**) or their own `custom.size_table`, and always in the theme editor.

| Setting | Default | What it does |
| --- | --- | --- |
| Display | Strip | **Strip** (the sky strip with a button), **Link** (a "Size guide" link with a ruler, for tight spaces) or **Inline** (the table and the helper on the page; the Size guide and safety section uses it) |
| Heading | Find their size | The helper's title (the presets' size guide panel says "Size guide") |
| Strip title, Strip text, Button label | "Not sure which size?", "Tell us their age or height and we'll pick it.", "Find their size" | Strip only |
| Note | Measured on real babies, not hangers. Between sizes? Size up, it'll last longer. | A line under the heading of the inline size guide, and at the foot of the helper. Make it true for your shop. |
| Start with | Age | Age or Height: which way the helper opens |

Quick view always has the helper: its **Size guide** link sits in the size row, as on the product page, and opens the helper inside the quick view panel. With **Display** set to Link, the block itself shows the link only for a product whose sizes aren't in the variant picker (a product with its own `custom.size_table` and no size option); otherwise the size row's link opens it, so shoppers never see two.

## Size guide page

For a page of its own, such as the Littles preset's `/pages/size-guide`: in admin, **Online Store › Pages › Add page**, title it "Size guide" (the handle becomes `size-guide`), write any measuring tips in its content, and choose the **size-guide** theme template. The page shows its title and text, then the **Size guide** section: your **Default size table** in a white panel with the cm · kg / in · lb switch (the shopper's choice carries to the product pages). Settings: **Heading** ("Size guide"; the template uses "All sizes") and **Note**. There's no product on this page, so it has no age or height field and no **Choose**: those are on each product page. You can also add the Size guide section to any other page in the theme editor.