Care guide

A list of questions and answers your customers actually ask — feeding, grooming, dental, exercise. Each question opens when it's tapped, so the page stays short and scannable.

Use it to answer the questions that stop people buying. On the Gaoth preset it becomes a warm "vet-corner" advice panel — rounded topic cards, amber question badges, and a soft amber edge on the topic that's open.

Try it

Change the settings and the preview updates live. Switch preset to see how the same section is treated across the five looks.

Pet care guide

How much should I feed my pet?
Feeding amounts are starting guidelines only — adjust based on your pet’s age, activity level, and body condition. For complete foods, follow the feeding guide on the product packaging.
How often should I groom my dog?
Most coats do well with a weekly brush. Double-coated and long-haired breeds need more — two or three times a week through a shedding season.
How do I care for my pet's teeth?
Daily brushing with a pet-safe toothpaste is the gold standard. Dental chews help between brushings, but they do not replace them.
How much exercise does my dog need?
As a rule of thumb, two walks a day plus play. Working breeds need considerably more, and puppies need less at a time but more often.

Section settings

Setting	What it does
Color scheme	Which of your five colour schemes this section paints with.
Heading	The title above the list. Leave it blank to hide it.
Related article	Optional. Links to one of your blog posts under the heading, as a "Read article" link. If the post can't be found, no link shows.

The related-article setting is a native article picker — select the blog post from the list, nothing to type. If the chosen post is later unpublished or removed, the link simply disappears, so it can never sit broken on your storefront.

Blocks

Care topic

Add one Care topic block per question — six to eight is the sweet spot before the list starts feeling long.

Setting	What it does
Question	The question, shown on the row that customers tap.
Answer	The answer, revealed when the row opens. Rich text — bold, links.

App blocks

The section accepts app blocks, so an app can add its own content below the topics.

Per-preset signature

The accordion itself is shared by every preset. Only Gaoth carries the "vet-corner" skin:

Rounded topic cards with a soft border, each one lifting on hover.
Amber question badges — a circular amber-mist disc behind each question mark.
A wind-trail seam under the heading and under the open question, the same feathered gradient the Gaoth navigation uses.
An amber edge and a warm tint on the topic that's currently open.

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

Accessibility and behaviour

Built on the browser's own <details>/<summary> disclosure, so it works with no JavaScript at all and is keyboard-operable out of the box (Tab to a question, Enter or Space to open).
Rows are at least 44 px tall, so they're comfortable to tap on a phone.
The chevron only animates for visitors who haven't asked their system to reduce motion.
Text and icons meet WCAG AA contrast in both light and dark mode.
In right-to-left languages the seam, the layout and the "Read article" arrow all mirror automatically, so the arrow points along the text rather than back at it.

Tips

Write the question the way a customer would ask it. "How much should I feed my pet?" beats "Feeding guidelines".
Keep answers to a short paragraph. If an answer needs more room, write a blog post and point the related-article field at it.
Lead with the question that blocks the sale. The first topic is the one most people open.

Care guide ​

Try it ​

Pet care guide

Section settings ​

Blocks ​

Care topic ​

App blocks ​

Per-preset signature ​

Accessibility and behaviour ​

Tips ​