Gaoth

A warm, friendly design made for pet stores and animal businesses.

Who it's for

Pet stores, animal supplies, vet clinics, pet food brands, and animal rescue organizations. If your customers are animal lovers, Gaoth speaks their language.

The vibe

Warm orange and amber tones paired with natural greens. The palette feels energetic and approachable — like a happy dog greeting you at the door. Friendly without being childish.

Color schemes

Gaoth includes four color schemes. You can use any of them on any section, and edit the colors at any time.

Scheme 1 — Light

Heading text

Body text sample

Button

Scheme 2 — Dark

Heading text

Body text sample

Button

Scheme 3 — Accent

Heading text

Body text sample

Button

Scheme 4 — Bold

Heading text

Body text sample

Button

Font pairing

Role	Font	Weight
Headings	Work Sans	Semi-Bold (600)
Body	Work Sans	Regular (400)

Work Sans is a friendly geometric sans-serif. The semi-bold headings feel welcoming without being cutesy.

Recommended sections

These sections pair especially well with Gaoth's warm tones:

• Shop by pet — The signature pet-portrait selector, right under the hero
• Slideshow — A carousel of happy pets and product imagery
• Featured collection — New arrivals or best-selling products
• Promo tiles — Category highlights (dogs, cats, birds, fish)
• Testimonials — Happy pet owners sharing their stories
• Newsletter — Sign-up form with a discount incentive

Catalog size

Best for small to medium catalogs (20–200 products). The warm, image-forward design really shines when you have strong product photography.

Live demo — Gaoth preset homepage

---

Target merchant profile

Celtic for "wind" — Gaoth is the warm, playful pets-niche preset for Shopify merchants selling pet food, supplies, veterinary products, grooming tools, or accessories. The playful-curve visual signature (asymmetric border-radius framing on niche-anchor sections) conveys approachability and care — right for merchants competing against Chewy/Zooplus on Shopify, particularly independent pet stores and specialist feed brands.

Gaoth serves merchants who:

• Sell pet food, treats, supplements, or care products
• Need species/lifestage browsing and filtering ("food for kittens", "senior dog supplements")
• Publish care guides and educational content (care sheets, feeding schedules, breed guides)
• Operate as independent pet retailers with a curated, knowledgeable position vs big-box chains

Independent pet stores, specialty pet food brands, and veterinary product resellers with 50–500 SKUs across 2–6 species (dog, cat, rabbit, hamster, bird, fish). Revenue model: repeat-purchase consumables (food, supplements, treats) plus occasional durables (beds, leads, toys).

Visual signature details

The Gaoth preset loads assets/preset-gaoth.css when settings.preset is gaoth. This CSS:

• Applies playful-curve framing: asymmetric border-radius (large top-left and bottom-right, small top-right and bottom-left) on the niche cards, the feeding-chart table, each care-guide topic, and the pet category cards — .preset-gaoth .niche-anchor__card, .feeding-chart__table, .care-guide__topic, and .category-card--pet
• Lays a warm accent gradient wash across every niche-anchor section
• Warm earthy/amber accent tones complementing the base color scheme

The visual signature applies to the Shop by Pet, Feeding Chart, and Care Guide sections when they appear on Gaoth preset pages.

Header signature — warm breeze pet-store chrome

The header (a shared component across all presets) wears Gaoth's wind/air signature, loaded from assets/gaoth-visual.css:

• Warm-cream frosted bar — a translucent cream chrome (backdrop-filter: blur(16px)), warmer and friendlier than cool glass or grey stock themes. On the homepage hero it carries a warm-cinnamon scrim; on scroll it settles to solid cream with a soft amber-toned shadow.
• Amber wind-trail underline — each nav link reveals a 2px amber underline, fully rounded, that drifts in from the start edge like a gust passing by (scaleX from transform-origin: inline-end). It is the breeze blowing past, not a flat line.
• Friendly pill icon affordances — the icon controls reveal as fully-rounded pills on hover/focus, filling with a soft cream tint and lifting on a 4px amber wind-trail shadow.
• Amber cart badge — the item-count bubble is warm amber with cream digits.
• Warm-cream airy drawer — the mobile panel opens onto a warm-cream surface with a rounded amber leading edge.

The signature is decoration only — colour, border, blur, and the underline animation. It adds no menus; your navigation comes from your Shopify menu. It is right-to-left safe and reduced-motion safe (the wind-trail appears instantly, without animating, when reduced motion is requested). See the Header guide for the live demo.

Feeding chart section (sections/feeding-chart.liquid)

A tabular feeding-amount reference section with species/lifestage filter — allows shoppers to quickly find the correct feeding quantity for their pet before purchasing.

What it does

• Renders an HTML table with four columns — Product, Weight, Amount, Frequency — one row per product in the collection you pick in Product collection, driven by Gaoth product metafields (uisce_gaoth.feeding_amount, uisce_gaoth.feeding_frequency, uisce_gaoth.pet_type, uisce_gaoth.lifestage)
• Filter bar above the table: a Species list and a Lifestage list, each an accessible listbox of options. Choosing an option keeps every row in place and fades the non-matching ones back, so shoppers keep their bearings in the chart
• Table uses <th scope="col"> and <th scope="row"> for WCAG 2.1 AA tabular semantics
• Both lists start with nothing selected, which shows every row at full strength. Each list is single-select, so picking a different option swaps the filter
• A polite live region announces "{species}, {lifestage} — {count} feeding amounts shown" in the current locale (all strings localized via sections.feeding_chart.* keys)

Schema settings

Setting	Type	Default	Description
heading	text	—	Section heading
niche_metafield_namespace	text	uisce_gaoth	Namespace prefix for feeding metafields
feed_collection	collection	—	Product collection — the products the chart draws its rows from
lifestages	text	Puppy,Adult,Senior	Comma-separated lifestage names; each becomes an option in the second list
related_article_handle	article	—	Optional blog post linked under the heading
color_scheme	color_scheme	scheme-1	Section background

Species options come from Species blocks: add one per species and give it a display name, a value that matches the product metafield (for example Dog), and an icon.

Where to find it in the theme editor: Sections → Feeding chart → Section settings tab.

Populating feeding data

The Feeding Chart renders data from your product metafields, not from section blocks. For each pet food product:

1. Define metafields in Shopify Admin → Settings → Custom data → Products:
   • uisce_gaoth.pet_type (single_line_text_field, e.g., "Dog", "Cat")
   • uisce_gaoth.lifestage (single_line_text_field, e.g., "Puppy", "Adult", "Senior")
   • uisce_gaoth.feeding_amount (number_decimal, e.g., 265 — the daily grams figure; the section rounds it and adds the unit, so a text value like "200–300g/day" leaves the cell blank)
   • uisce_gaoth.feeding_frequency (single_line_text_field, e.g., "2× daily")
   • uisce_gaoth.weight_band (single_line_text_field, e.g., "10–20 kg") — optional; the Weight column falls back to the first variant title when it's empty
2. Back-fill values on each food product.
3. Add the Feeding Chart section to your homepage or a dedicated "Feeding guides" page, then set Product collection to the collection holding your food products. The chart stays empty until that collection is set; it generates one row per product in it that has a feeding amount.

Care guide section (sections/care-guide.liquid)

An FAQ-style accordion section for pet care education — species care sheets, feeding schedules, veterinary advice disclaimers, grooming instructions.

What it does

• Renders an <details>/<summary> accordion pattern (keyboard accessible; no JavaScript dependency for open/close — pure HTML disclosure widget)
• Each care-guide block defines exactly two things: the Question that becomes the <summary> text, and the Answer body (richtext — supports inline links, lists, bold)
• Every topic starts closed; shoppers open the ones they need
• Suitable for: species care sheets, feeding frequency tables, toxic-food warnings, insurance/veterinary referral disclaimers

Schema settings

Setting	Type	Default	Description
heading	text	—	Section heading
related_article_handle	article	—	Optional blog post linked under the heading
color_scheme	color_scheme	scheme-1	Section background

Where to find it in the theme editor: Sections → Care guide → Section settings tab.

Adding care guide entries

1. Click Add block → Care topic in the Care guide section.
2. Enter the topic in Question (this becomes the <summary> text).
3. Enter the answer in Answer (richtext — supports formatting, links, lists).
4. Repeat for each care topic.

Veterinary disclaimer note: Care content is editorial, not professional veterinary advice. Add a first Care topic carrying a disclaimer such as: "This care guide is for general information only. Always consult a qualified veterinarian for health, nutrition, and treatment decisions." Translate that block's text alongside the rest of your page content.

Shop by pet — the signature section

Gaoth's homepage opens, right under the hero, with a "who are you shopping for?" pet selector: large, warm, rounded pet-portrait cards — Dogs, Cats, Puppies, Small Animals — each with a real at-home photo and a plain-language promise ("Gentle, safe essentials for new arrivals"). A dog owner finds their lane in one tap. It's the opposite of a clinical product grid: tactile, emotional, and unmistakably a pet store.

←Shop by category

Color scheme

Eyebrow

Short kicker text rendered above the heading in smaller, uppercase type.

Heading

Subheading

Columns

234

Sets how many category cards show per row on tablet and desktop. Mobile always shows two across so the cards stay large and easy to tap.

Columns on mobile

12

Storefront preview

FIND THEIR LANE

Shop by pet

Tell us who you're shopping for — we'll point you to what's right for them.

Bestsellers

Dogs

Food, treats, and toys for loyal companions

Cats

Food, play, and comfort for every mood

Puppies

Gentle, safe essentials for new arrivals

Small Animals

Food, bedding, and care for little ones

Under the hood this is the theme's general-purpose Shop by category section — the same one any store can use to "shop by room" or "shop by occasion". On Gaoth it wears the pet treatment:

• Asymmetric playful-curve corners + a 6px amber wind-trail that lifts each card on hover and keyboard focus.
• The photo un-grayscales and gently scales as you point at it, bringing the animal forward (instant, no animation, under reduced motion).
• A sage "Bestsellers" pill pinned to the lead card's corner.
• Equal-height cards with their arrow markers on one baseline, however the promise copy wraps.

It ships with the four-lane pet example pre-filled on the Gaoth homepage; edit the cards, photos, and the collection each links to from the theme editor. Every card photo needs descriptive alt text naming the animal — it's content, not decoration. Full settings, responsive behaviour, and accessibility notes live on the Shop by category page.

Niche-specific structured data — Product + additionalProperty

The Gaoth preset extends snippets/json-ld.liquid to emit Product JSON-LD with an additionalProperty array for pet food products. This maps feeding-chart data to Schema.org PropertyValue entries for feeding amount and frequency:

Schema.org field	Source
@type	Product
name	Product title
additionalProperty	Array of PropertyValue objects (feeding_amount, feeding_frequency)

The schema activates when either uisce_gaoth.feeding_amount or uisce_gaoth.feeding_frequency is populated on the product.

The additionalProperty fields record feeding guidance only. They do not constitute nutritional adequacy claims.

Note on AAFCO/FEDIAF: If your products carry AAFCO/FEDIAF complete-and-balanced statements, put those in the product description so shoppers read them on the page. This block carries feeding guidance only.

To validate:

curl -s "https://your-store.myshopify.com/products/adult-dog-food" \
  | grep -A 20 '"@type": "Product"'

And verify the feeding data appears in additionalProperty:

curl -s "https://your-store.myshopify.com/products/adult-dog-food" \
  | grep '"additionalProperty"'

Paste the product URL into Google's Rich Results Test at search.google.com/test/rich-results.

Schema settings reference

niche_metafield_namespace setting

Default: uisce_gaoth. This is a Feeding chart section setting — change it only if your existing products use a different metafield namespace prefix, and only for that section's table. The PDP blocks below don't read it: they build their namespace from the active preset (uisce_ + your preset), so they always read uisce_gaoth on a Gaoth store.

Per-preset PDP blocks (Gaoth)

Two blocks are available in the Gaoth product template (listings/gaoth/templates/product.json):

Block handle	Description
feeding-chart	Lists Amount, Frequency, and Life stage for the product as labelled pairs, from the product's own feeding metafields
lifestage-info	Shows a single life-stage badge (for example "Puppy"), with the daily amount underneath when it's set

These blocks appear in the Gaoth product template by default. If you have customized your product template, add these blocks via Sections → Product → Add block.

Demo-data setup

The scripts/populate-niche-gaoth.mjs provisioner creates:

• The five Gaoth product metafield definitions: pet type, life stage, feeding amount, feeding frequency, and suitability
• 10 pet food products across dog and cat, with those metafields pre-populated, published to the Online Store
• One page, pet-care-guide, on the Care guide template — its accordion holds six general care topics (feeding, grooming, dental, exercise, settling alone, warm weather)
• One main-menu link: Pet care guide → /pages/pet-care-guide

It reads the store's credentials from .env.stores and touches nothing else — your footer and the rest of your navigation stay as they are. Re-running it is safe: existing products, the page, and the menu link are updated in place rather than duplicated.

node scripts/populate-niche-gaoth.mjs

# preview without writing anything
node scripts/populate-niche-gaoth.mjs --dry-run

Manual setup steps

1. Care guide page: Create page, assign page.care-guide template, handle pet-care-guide. Add a Care topic block per question you want to answer.
2. Shop by pet: Add the section to the care guide page or the homepage. Configure each pet tile with an image, title, promise copy, and the collection it links to.
3. Feeding chart: Add the section to the care guide page or homepage, set Product collection, add a Species block per species, and populate the product metafields so the chart generates its rows.
4. Verify header menu includes the "Pet care guide" link.

Recommended apps

The Gaoth theme ships the browsing and care-content SURFACE. Apps that extend it:

App	Use case	Connection method
Pumpkin	Pet insurance upsell on product pages	Add a Pumpkin app block to your product template via the Shopify app block system.
Vetster	Telehealth veterinary consultations	Embed a Vetster booking widget as a custom HTML block on your care guide page.
Shopify Subscriptions / Recharge / Bold	Subscribe & save for repeat food orders	Enable subscription selling plan on each food product; the cart shows the subscription cadence selector automatically.

There is no first-party feeding-tracker recommendation. Feeding-tracker functionality requires app integration; the theme ships the display (feeding amounts in metafields), not the calculation/reminder logic.

Behavior callouts

Feeding chart populates from product metafields, not section blocks

Unlike most content sections, the Feeding Chart section does not use add-a-block for each row. It reads the collection you set in Product collection and generates a row for every product in it that has uisce_gaoth.feeding_amount populated. Add metafield values to those products; the section reflects them.

Care guide is a pure HTML accordion

No JavaScript is used for open/close. The <details>/<summary> pattern opens and closes natively. This means:

• Accordion works without JavaScript enabled (progressive enhancement)
• No aria-expanded management needed (browser handles it)
• Screen readers announce the expanded/collapsed state correctly without intervention

Species filter is aria-live

When a customer picks a species or lifestage option in the Feeding Chart, a polite aria-live region announces the updated count in the current locale. This meets WCAG 2.1 AA 4.1.3 (Status Messages). Non-matching rows stay in the table and fade back rather than disappearing, so the chart never jumps under the reader.

Gaoth PDP blocks are Gaoth-specific

The feeding-chart and lifestage-info PDP blocks are included in listings/gaoth/templates/product.json but not in other preset product templates. Both read their metafields from uisce_ plus the active preset, so on a non-Gaoth store they find nothing and render nothing.

Accessibility implementation details

Feeding chart table accessibility

The Feeding Chart section implements WCAG 2.1 AA tabular data semantics:

• <table> with a visually-hidden <caption> naming the chart for screen readers
• Column headers use <th scope="col"> for Product, Weight, Amount, and Frequency
• Row identifiers use <th scope="row"> for the product name in the first column of each data row
• The filter bar is a role="toolbar" with its own label; each of the two filters is a role="listbox" of role="option" items, driven by arrow keys with Enter or Space to choose
• The live count announcement sits in a visually-hidden aria-live="polite" region and updates the moment a filter changes

Care guide accordion accessibility

The <details>/<summary> pattern has native browser accessibility:

• Screen readers announce "expanded" / "collapsed" state changes
• Keyboard: Enter or Space on <summary> toggles the disclosure
• Every topic starts closed, so the page loads at a predictable length with no layout shift

Shop by pet tile accessibility

Each tile wraps its photo, title, and promise copy in a single <a>, so a screen reader reads the whole card as one link with the title and description as its name. The arrow affordance at the foot is decorative and hidden from assistive technology. The tile image carries the alt text you set on the image in Shopify — write it there, naming the animal, because it's content rather than decoration. Tiles are keyboard-navigable via standard link focus.

RTL support

The Gaoth preset sections use logical CSS properties throughout:

• margin-inline-start / margin-inline-end instead of left/right margins
• padding-inline shorthand for horizontal padding
• Feeding chart table columns follow the document direction, so the Product column leads on the right in Arabic and Hebrew with no override needed
• Each filter stacks its label above a flex-wrap: wrap list of options — correct in both LTR and RTL
• Care guide accordion arrow indicator uses transform: rotate(180deg), which reads the same in both directions
• The amber wind-trail underline is the one piece that needs a direction flip: [dir="rtl"] feathers the gradient toward the visual inline-start

Pre-submission checklist

Shopify Theme Store checklist (Gaoth-specific)

• [ ] At least 4 products with uisce_gaoth.pet_type and uisce_gaoth.feeding_amount metafields
• [ ] Feeding chart section has a Product collection selected, and that collection holds those products
• [ ] Care guide page exists with at least 2 accordion entries
• [ ] Shop by pet section has at least 3 species tiles
• [ ] Page pet-care-guide uses page.care-guide template
• [ ] Header menu includes species-browsing links
• [ ] settings.preset is set to gaoth in Theme settings

Google Rich Results (Gaoth — Product + additionalProperty JSON-LD)

The Gaoth preset emits Product JSON-LD with additionalProperty entries for feeding amounts. To validate:

curl -s "https://your-store.myshopify.com/products/adult-dog-food" \
  | grep -A 20 '"@type": "Product"'

Check that the result includes additionalProperty with feeding_amount and feeding_frequency entries. The checklist item to verify: "Product + additionalProperty JSON-LD appears on pet food products."

AAFCO / product claims

The care guide content is for general information. Do not make AAFCO/FEDIAF nutrient-adequacy claims in care guide blocks unless your products carry AAFCO-compliant nutritional statements. Put an appropriate disclaimer in the first Care topic on the page.