Feeding chart

A table that answers the one question every pet owner asks before they buy: how much do I actually feed my pet? Shoppers filter by species and life stage, and the chart shows the daily amount for each of your foods.

The rows come from your products, not from text you retype here — so when you change a feeding amount on a product, the chart changes with it. On the Gaoth preset it becomes a warm "vet-desk" matrix rather than a spreadsheet.

Try it

Change the settings and the preview updates live. The filter pills are the real ones — clicking them runs exactly the code your storefront runs.

←Feeding chart

Color scheme

Heading

Lifestages (comma-separated)

Enter lifestage names separated by commas, e.g. Puppy,Adult,Senior

Storefront preview

Feeding guide

Species

• Dog
• Cat

Lifestage

• Puppy
• Kitten
• Adult
• Senior

Feeding amounts by weight and lifestage

Product	Weight	Amount	Frequency
Adult Dog Kibble — 15 kg bag	10–25 kg	210 g	Twice daily
Puppy Kibble — 6 kg bag	2–10 kg	260 g	Three times daily
Senior Dog Kibble — 12 kg bag	10–25 kg	190 g	Twice daily
Indoor Small-Breed Kibble	1–10 kg	65 g	Twice daily
Adult Cat Kibble — 6 kg bag	3–6 kg	52 g	Twice daily
Kitten Food — 2 kg bag	1–4 kg	55 g	Three times daily
Senior Cat Food — 3 kg bag	3–6 kg	50 g	Twice daily

Before you start: the product data

This section is driven by product metafields. A product only appears as a row once it has a feeding amount. Set these on each food product (namespace uisce_gaoth):

Metafield	Type	Example	What it does
feeding_amount	Decimal	210	Grams per day. Required — no amount, no row.
feeding_frequency	Text	Twice daily	Shown in the Frequency column.
pet_type	Text	Dog	Must match a Species block's value for the filter to match.
lifestage	Text	Adult	Must match one of your life-stage names.
weight_band	Text	10–25 kg	Your pet's body weight — not the bag size.

Two things worth getting right:

• weight_band is the animal, not the bag. If you leave it empty the chart falls back to the variant title, which usually shows the pack size — so the table ends up telling a customer to feed a 15 kg dog because they bought a 15 kg bag. Set it explicitly.
• The amount is a number, not text. Enter 210, not 210 g. The theme adds the unit, translated, in each of your customer's languages.

Section settings

Setting	What it does
Color scheme	Which of your five colour schemes this section paints with.
Heading	The title above the chart.
Product collection	The collection the rows are drawn from. Products in it without a feeding amount are simply skipped.
Lifestages	Comma-separated life-stage names, e.g. Puppy, Kitten, Adult, Senior. These become the second row of filter pills — they must match your products' lifestage values.
Related article	Optional. Pick a blog post to show as a "Read more" link, e.g. a fuller feeding guide.
Metafield namespace	Advanced. Only change this if your metafields live somewhere other than uisce_gaoth.

Choosing the collection

Point this at a collection of the foods you want to advise on. Don't reuse a broad "Food & treats" collection without checking it: treats normally carry no feeding amount (they're fed as needed), and if every product with an amount happens to be a dog food, your Cat pill will filter the table down to nothing — a control that looks broken. A dedicated "Feeding guide" collection is the safe move.

Blocks

Species

One block per species pill.

Setting	What it does
Species value	Must match your products' pet_type exactly — Dog matches Dog, not dog.
Species display name	What the shopper reads on the pill.
Icon	The icon on the pill.

App blocks

The section accepts app blocks below the chart.

Per-preset signature

Only Gaoth carries the vet-desk skin:

• A wind-trail seam under the heading.
• Warm pill filters — the selected one fills with a deep sage and cream lettering.
• A playful-curve table card with a soft warm shadow, a warm header band, and warm-tinted zebra rows.
• The daily amount in bold amber, with tabular figures so the numbers line up down the column.

The other four presets render a clean, unadorned table in their own scheme colours.

Accessibility and behaviour

• A real <table> with column and row headers, so a screen reader can navigate it properly.
• The filters follow the ARIA listbox pattern: the up and down arrow keys move between pills (wrapping at each end), Enter or Space selects, and each change is announced politely.
• Filtering fades the rows that don't match rather than deleting them, so the table never jumps under your thumb.
• Filter pills are at least 44 px tall.
• Without JavaScript the full chart still renders — you lose the filtering, not the information.
• On a phone the table scrolls sideways inside its card. In Gaoth a soft fade appears at the edge to show there's more to see; the other presets scroll without it.

Tips

• Four to six life stages is the ceiling. Past that the pills wrap into a wall on mobile.
• Keep the frequency wording consistent — "Twice daily" everywhere beats mixing "2x/day" and "Twice a day".
• Link a fuller guide with the related-article field. The chart answers "how much"; a blog post can answer "how do I switch foods".