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-23Replace 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.