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 combinations on niche-anchor section containers and product card thumbnails (.niche-anchor--gaoth selector)
• Warm earthy/amber accent tones complementing the base color scheme
• Slightly softer heading weight to reduce the "industrial" feel of default themes

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 6px 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 and friendly 44px nav rows.

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 columns: Species, Lifestage, Daily feeding amount, Frequency, Notes — driven by Gaoth product metafields (uisce_gaoth.feeding_amount, uisce_gaoth.feeding_frequency, uisce_gaoth.species, uisce_gaoth.lifestage)
• Filter row above the table: species buttons + lifestage buttons; clicking a filter hides non-matching rows (client-side aria-hidden toggle; role="status" live-region announces the visible count)
• Table uses <th scope="col"> and <th scope="row"> for WCAG 2.1 AA tabular semantics
• When no filters are active, all rows are shown; the "All species / All lifestages" filter option is always visible
• Aria-live announcement reads: "{species label}, {lifestage label} — {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
subheading	richtext	—	Introductory copy
show_notes_column	checkbox	true	Show the Notes column
niche_metafield_namespace	text	uisce_gaoth	Namespace prefix for feeding metafields
color_scheme	color_scheme	scheme-1	Section background

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.species (single_line_text_field, e.g., "Dog", "Cat")
   • uisce_gaoth.lifestage (single_line_text_field, e.g., "Puppy", "Adult", "Senior")
   • uisce_gaoth.feeding_amount (single_line_text_field, e.g., "200–300g/day")
   • uisce_gaoth.feeding_frequency (single_line_text_field, e.g., "2× daily")
2. Back-fill values on each food product.
3. Add the Feeding Chart section to your homepage or a dedicated "Feeding guides" page. The section will auto-generate rows from all products in the store that have these metafields.

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: question/topic heading (summary text), answer body (richtext — supports inline links, lists, bold), optional "See also" product link
• Category grouping: blocks may be organized under optional group headings
• Print-friendly: the full accordion content is visible when printed (details elements expand)
• 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
subheading	richtext	—	Introductory paragraph
open_first	checkbox	false	Expand the first accordion item by default
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 entry in the Care guide section.
2. Enter the topic/question in Heading (this becomes the <summary> text).
3. Enter the answer/body in Content (richtext — supports formatting, links, lists).
4. Optionally link a related product: See also product URL + label.
5. Repeat for each care topic.

Veterinary disclaimer note: Care content is editorial, not professional veterinary advice. Include a disclaimer block at the top: "This care guide is for general information only. Always consult a qualified veterinarian for health, nutrition, and treatment decisions." The theme provides a care_guide.disclaimer_text locale key for localizable disclaimer copy.

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)
description	Product description (first 200 chars)
author	Shop name

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, include those in the product description; they will be captured in the description field.

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. Change this only if your existing products use a different metafield namespace prefix. All feeding-chart and PDP block extensions read from this namespace.

Per-preset PDP blocks (Gaoth)

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

Block handle	Description
feeding-chart	Renders species + lifestage feeding amounts from product metafields in a compact table on the PDP
lifestage-info	Renders the lifestage suitability strip (e.g., "Suitable for: Puppy, Adult")

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:

• 6–8 pet food products across dog/cat/rabbit with species, lifestage, feeding amount, and feeding frequency metafields pre-populated
• A care guide page (3 species care sheets — dog, cat, rabbit)
• A shop-by-pet page
• Header navigation: Home, Shop by Pet, Dog, Cat, Rabbit, Care Guides, Contact
• Footer Quick Links: Shop by pet, Dog food, Cat food, Care guides, FAQ

STORE_PRESET=gaoth SHOPIFY_STORE=your-gaoth-store.myshopify.com \
  SHOPIFY_ACCESS_TOKEN=shpat_xxxx \
  node scripts/populate-niche-gaoth.mjs

Manual setup steps

1. Care guide page: Create page, assign page.care-guide.gaoth template, handle pet-care-guide. Add care-guide blocks for each species.
2. Shop by pet page: Create page or add the section to the homepage. Configure each species tile with an image, label, and link to the relevant collection.
3. Feeding chart: Add the section to the care guide page or homepage. Populate product metafields so the chart auto-generates rows.
4. Verify header menu includes "Care guides" and "Shop by pet" links.

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 all products in the store that have uisce_gaoth.feeding_amount populated and generates rows automatically. Add metafield values to 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 clicks a species or lifestage filter button in the Feeding Chart, a role="status" live region announces the updated count in the current locale. This meets WCAG 2.1 AA 4.1.3 (Status Messages). The announcement is delayed 50ms to avoid interrupting fast multi-click filter sequences.

Gaoth PDP blocks are Gaoth-specific

The feeding-chart and lifestage-info PDP blocks are included in templates/product.gaoth.json but not in other preset product templates. If you switch a product's template to a non-Gaoth preset template, these blocks will not render. They are correctly scoped to targets: ['product'] in the block schema.

Accessibility implementation details

Feeding chart table accessibility

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

• <table> with <caption> matching the section heading
• Column headers use <th scope="col"> for species, lifestage, feeding amount, frequency, notes
• Row identifiers use <th scope="row"> for the first column of each data row
• The filter region has role="group" with an aria-labelledby pointing to a "Filter" heading
• The live count announcement uses <span role="status"> — polite by default, debounced 50ms

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
• The first care entry can be opened by default via open_first setting — when open, the open attribute is present on <details>, and the content is visible to both sighted users and assistive technology from page load (no FOUC/layout shift)

Shop by pet tile accessibility

Each tile is an <a> element with visually-hidden species/lifestage text for screen readers: <span class="visually-hidden">Dog food: All dogs</span>. The tile image has alt text set from the block's image alt setting. 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 column ordering uses CSS flex-direction: row (reverses in RTL via [dir="rtl"] override in assets/preset-gaoth.css)
• Filter buttons use flex-wrap: wrap + gap — stack correctly in both LTR and RTL
• Care guide accordion arrow indicator uses transform: rotate() with [dir="rtl"] override for proper direction

Pre-submission checklist

Shopify Theme Store checklist (Gaoth-specific)

• [ ] At least 4 products with uisce_gaoth.species and uisce_gaoth.feeding_amount metafields
• [ ] 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.gaoth 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. Include an appropriate disclaimer in a care entry at the top of each species guide.