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.

←Care guide

Color scheme

Heading

related_article_handle — unsupported in docs panel (article)

←Care topic

Question

Answer

<p>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.</p>

Storefront preview

Pet care guide

Read more

• 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 more" 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 and layout mirror automatically.

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.