Shop by age and the age filter

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

Add up to eight Age blocks, one per tile:

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.