# Shop by age and the age filter

Chapter 8 of the Littles user guide.

Parents and gift-givers shop by age first. Littles gives them four ways in, all built on the **Age range** metafield (`custom.age_range`, chapter 7) and Shopify's own storefront filtering:

* The **Shop by age** section's **growth chart** on the home page: pastel tiles that stand as tall as a child at the top of each age, against a centimetre ruler, each with a kicker ("Newborn"), the age in big rounded numbers ("0–3 m"), a short line ("First cuddles and long naps"), your photo or a doodle, and a round arrow. A tile opens your products filtered to that age.
* **Age chips** on collection and search pages: a row above the toolbar with **All ages** and one chip per age, each with its product count, ordered by age (not alphabetically). Shoppers tick one or more and the grid narrows in place.
* The **age badge** on every card and product page: "Fits 3–6 m".
* An **age column** in the mega menu and **age chips** at the top of the phone menu (chapter 3).

## Set up the age filter

1. Create the **Age range** product metafield (`custom.age_range`, Single line text, List of values) and fill it on your products (chapter 7). **Limit to preset choices** with your ages keeps the values consistent, which the filter needs.
2. Install Shopify's free **Search & Discovery** app from the Shopify App Store and open it.
3. Go to **Filters › Add filter**, choose the product metafield **Age range** as the source, and save. Put it where you like in the filter list. New filters can take a little while to appear while Shopify indexes your products.
4. Leave **Theme settings › Shop by age › Age filter metafield** at `custom.age_range` (and the Shop by age section's **Filter metafield** too) unless your filter uses another metafield. Both must name the metafield the filter uses, as namespace.key, or the whole filter (below).
5. In each age tile, set **Filter value** to the age exactly as it is stored in the metafield, such as `0-3 months` (blank uses the tile's **Label**, which only works if the label is written exactly like the stored value).

Once the filter exists, collection and search pages show the age chips instead of an Age range dropdown in the toolbar, and every Shop by age tile opens the filtered collection.

**Ages as a product option instead?** If your sizes are an option called Age (with values such as 0-3 m), you can filter on the option instead: add the **Age** option filter in Search & Discovery and set **Theme settings › Shop by age › Age filter metafield** to `filter.v.option.age` (a value starting with `filter.` is used as the whole filter, so the chips, the menu's age column and the Shop by age tiles read it). The Shop by age section's **Filter metafield** takes the same two forms; leave it blank to follow the theme setting, and set each tile's **Filter value** to the option value, such as `0-3 m`.

> **No Search & Discovery filter?** Until the filter exists, Shopify ignores the filter in a tile's link and shows the whole collection. If you don't want to set up the filter, make one collection per age (a manual collection, or an automated one with a condition such as a product tag "0-3 months", or, where Shopify offers it for your definition, the Age range metafield equal to 0-3 months) and choose it in each tile's **Collection**. Then build an **Age menu** of the same collections (Content › Menus, one link per age, titled "0–3 m" and so on) and choose it in **Theme settings › Shop by age › Age menu**: the collection pages show those links as chips instead of the filter chips, and the phone menu shows them at the top.

## Shop by age section

| Setting | Default | What it does |
| --- | --- | --- |
| Doodle, Kicker, Heading, Text under the heading | Moon, empty, "Shop by age", "From first cuddles to the first day of school. Pick an age and we'll show you everything that fits." | The section heading |
| Layout | Growth chart | **Growth chart** (tiles as tall as a child, against a ruler) or **Tiles** (equal pastel tiles with a "Shop …" link, for skills or gift ideas) |
| Collection the age links open | Empty | The collection the tiles open, filtered by age. Blank opens all products. |
| Filter metafield | custom.age_range | The metafield your Search & Discovery filter uses, as namespace.key, or a whole filter starting with `filter.`, such as `filter.v.option.age`. Blank uses Theme settings › Shop by age. |
| Columns | 6 | 3, 4 or 6 tiles per row on desktop. The tiles layout uses 3 or 4. |
| Show the height ruler | On | Growth chart only: the centimetre ruler at the left |
| Note under the tiles | "Each tile stands as tall as a child at the top of that age. Not sure what fits?" | A line with a ruler icon under the tiles; empty hides it |
| Note link label, Note link | "Find their size", empty | A link at the end of the note. Blank link hides it. Try your size guide page (a page with the `page.size-guide` template, chapter 9) or a product page. |
| Background | Page | Page, a pastel block or Quiet fill |

Add up to eight **Age** blocks, one per tile:

| Setting | Default | What it does |
| --- | --- | --- |
| Kicker | Newborn | The small line at the top of a growth chart tile |
| Label | 0–3 m | The age, shown big (or the tile's title in the Tiles layout) |
| Filter value | 0-3 months | Exactly as in the product metafield. Blank uses the label. |
| Text | First cuddles and long naps | One short line |
| Colour | Pastel block 1 | Pastel block 1 to 4, or Quiet fill |
| Image | Empty | Your product or lifestyle photo on the tile. Blank shows the doodle. |
| Doodle | Cloud | Cloud, Star, Moon or Heart |
| Tallest child at this age | 62cm (40 to 140) | Sets the tile's height in the growth chart, so the row reads like a height chart |
| Collection | Empty | Opens instead of the filter link |
| Link | Empty | Opens instead of everything else |
| Link label | Empty | Tiles layout: the link at the bottom of the tile. Blank uses "Shop" and the label ("Shop Fine motor"). |

A tile links, in this order, to its own **Link**, its own **Collection**, or the section's collection (all products when blank) filtered by the **Filter metafield** and the tile's **Filter value**. A tile needs a **Label** or a **Link** to show. With no tiles, shoppers see nothing and the theme editor shows a note.

**The growth chart**: on desktop the tiles stand in one row, each as tall as its **Tallest child at this age** (at least 220px), with the ruler marked every 10cm and a star over the tallest. On tablets the tiles go three to a row without the ruler; on phones they become one row of equal tiles that scrolls sideways. The tiles' heights are a picture of growth, not a size chart: the size helper (chapter 9) does the fitting.

**The section has three presets** in **Add section**: **Shop by age** (the growth chart with six ages: Newborn 0–3 m, Little baby 3–6 m, Big baby 6–12 m, Toddler 1–2 yrs, Preschool 2–4 yrs, Big kid 4–6 yrs, with filter values 0-3 months to 4-6 years), **Shop by skill** (tiles, four columns, **Filter metafield** `custom.skill`: Fine motor, Imaginative play, Early maths, Music and movement) and **Gift guide** (tiles, three columns: Newborn gifts, Under $30, Baby shower). The gift guide tiles in the presets link to all products: give each a **Collection** or **Link** of your own.

**Shop by skill** works like Shop by age with the **Skill** metafield (`custom.skill`, chapter 7): create it, fill it in, add it as a filter in Search & Discovery, and make each tile's **Label** (or **Filter value**) match a stored skill exactly. Or give each tile a collection.

## Age chips on collection pages

The chips appear above the toolbar on every collection and search page whose results include the age filter, with **Enable filtering** on in the Collection or Search section. Each chip shows the age ("3–6 m") and how many products in the current results have it; ages with no products there are hidden. **All ages** clears the age filter. The chips are ordered by age, youngest first (values the theme can't read as an age go last). On phones the chips are one row that scrolls sideways. The rest of your filters stay in the toolbar (chapter 13).

Without the filter, the chips come from **Theme settings › Shop by age › Age menu** (one chip per link, as titled, the current page marked); with neither, there are no chips.