# Safety and materials

Chapter 11 of the Littles user guide.

Parents read the small print. Littles puts it where they look, set calmly and clearly:

* Under the price, **certification chips**: "GOTS certified organic", "OEKO-TEX Standard 100", each a mint chip with a check mark. Past the number you choose, "+2 more" jumps to the safety panel.
* Right above the add button, the **age warning**: a butter-yellow box with a warning triangle, "Not suitable for children under 3. Small parts." Screen readers read it together with the add button.
* Under the product, the **Safety and materials** panel of the **Size guide and safety** section: every certification, your own certification logos if you add them, and **Materials** and **Care** as you wrote them.
* On product cards, a small **"Organic" chip** with a leaf on products that hold your highlighted certification (Theme settings › Product cards, chapter 2).

> **Certification chips are text.** Littles never draws certification marks or logos: GOTS, OEKO-TEX and the rest are trademarks with their own rules. The chips print the words you enter, with a generic check mark. If you hold a licence to use a certification's logo, you can add the logo image yourself (below); if you don't, leave the logos out. Only list certifications a product really holds, and keep the certificate details handy in case a customer asks.

## Certifications block

The **Certifications** block goes in the **Product** section (the presets put it under the price), the **Featured product** section and the **Size guide and safety** section (as a list). It reads the product's `custom.certifications` (chapter 7), then the block's **Certifications** fallback.

| Setting | Default | What it does |
| --- | --- | --- |
| Style | Chips | **Chips** (a row of chips, up to **Chips to show**) or **List** (every certification, with an optional heading; the safety panel uses it) |
| Heading | Empty | List style only |
| Chips to show | 3 (1 to 8) | The rest show as "+2 more", a link to the safety panel (or, on a page without one, the hidden chips open in place). Sprout shows 4. |
| Certifications | Empty | Comma-separated, used when the product has no `custom.certifications` |
| Logo 1, Logo 2, Logo 3 | Empty | Your own certification logos, shown 40px tall after the chips, only if you hold a licence to use them. Give each image an alt text (its certification's name) in **Content › Files**: that is what screen readers read. |

> **Note:** The fallback and the logos are typed into the template, so they show on **every product that uses this template**. Use them for a shop where every product holds the same certification, or on a template you make for those products (in the theme editor, **Create template** from the product template and assign it to those products in admin). For a mixed catalog, use the metafield.

## Age warning block

The **Age warning** block goes in the **Product** section, right before **Buy buttons** (where the presets put it), and in the **Featured product** section. It reads the product's `custom.age_warning`, then the block's **Warning**, then **Theme settings › Safety › Default age warning**.

| Setting | Default | What it does |
| --- | --- | --- |
| Warning | Empty | Used when the product has no `custom.age_warning`. Like the certifications fallback, it shows on every product that uses the template, so a whole-catalog warning ("Not suitable for children under 3. Small parts.") suits a toy-only template; for a mixed catalog use the metafield. |
| Show warning icon | On | The warning triangle |

Quick view shows the product's own `custom.age_warning` too, then **Default age warning**: it can't read a template's block, so a warning typed only into the block shows on the product page but not in quick view. For a warning that must show in quick view, use the metafield, or the theme setting when every product needs it. Cards don't show warnings. Write warnings as calm, plain sentences, and follow the labelling rules for toys and children's products where you sell (such as EN 71 in Europe or CPSIA in the US): Littles shows the words you give it, and doesn't decide what a product needs.

## Materials and care block

The **Materials and care** block goes in the **Product** section, the **Featured product** section and the **Size guide and safety** section (stacked, in the presets). It reads `custom.materials` and `custom.care` (rich text), then the block's own text, and shows nothing when both are empty.

| Setting | Default | What it does |
| --- | --- | --- |
| Display | Accordion | **Accordion** (two rows shoppers open and close) or **Stacked** (a heading and the text, one under the other) |
| Materials heading | Materials | |
| Materials | Empty | Used when the product has no `custom.materials` |
| Care heading | Care | |
| Care | Empty | Used when the product has no `custom.care`. Care lists get small colored bullets. |
| Open materials by default | On | Accordion only |

## The safety panel

The **Size guide and safety** section (chapter 4) holds the panel. **Safety and materials heading** ("Safety and materials") titles it, and **Show safety and materials** turns it off. Select its **Certifications** and **Materials and care** blocks in the theme editor to change their settings, such as fallback text. A product with no certifications, materials or care (and no fallbacks) gets no panel, and the size guide takes the whole width.

The home page's **Image with text** section has **Chips** of its own for a shop-wide story ("GOTS certified organic | OEKO-TEX Standard 100 | Nickel-free snaps"), drawn the same way. The same rule applies: only claim what you hold.