Kids FAQ Page: Single-Level Variant of the FAQ Engine

A second FAQ page for the kids sub-brand that shares the help center's content model — the same page metafield, the same accordion contract — but drops the category layer, so a shorter list of questions reads as one flat, keyboard-operable accordion with its own tone and its own way out.

A kids sub-brand's questions — age suitability, tear-free formulas, routines for children — would sink among the main help center's shipping and returns answers if merged. This page template reads the same page metafield as the help center and renders it as one flat accordion: a role="button" trigger into a role="region" panel, ids composed from section id and indexes, answers through metafield_tag, and its own cross-link and contact prompt.

The Problem

A Shopify page has one content field and one template. That is fine for a page that is prose, and wrong for a page that is a list of structured questions, because the questions have to be authored somewhere with a shape — and if that shape is different for every FAQ page a storefront runs, the content team learns a new pattern each time.

LUS Brands runs a kids line alongside the adult line, and the kids audience asks different things: is this suitable for a four-year-old, does it sting, what does a routine for a child look like. Filing those under the main help center would bury them in shipping and returns; giving them a page built a different way would mean two authoring models for one team. The kids page needed its own route, its own tone and its own bottom-of-page contact prompt, on the same content model as the help center.

The Constraint

The content had to come from page.metafields.custom.faq_sections — the same field, the same shape, as the help center — so a question written for one page could be moved to the other by moving data, and so the marketing team learned one authoring pattern. But the kids page didn't need the help center's two levels. A category layer over a short list is friction, not structure.

The page also lives where the help center lives: inside the shell of a third-party help-center app that was already on the site. The section had to render its accordion inside that template, without taking over the route.

And rich-text answers arrive as metafield values. They have to go through metafield_tag to render as HTML; output raw, the formatting arrives escaped.

What We Built

faq-kids.liquid is a section restricted through enabled_on to page templates. It's installed on page.faq-kids with the template's main-page section disabled, so the section owns the entire page: heading, accordion, cross-link, banner, contact prompt.

It reads page.metafields.custom.faq_sections and, for each section in the field, renders the section's title as a heading and its items beneath it as one flat accordion — no category layer between the two, and no grouping logic to run. Each question is a role="button" summary carrying aria-expanded and an inline icon-caret chevron; each answer is a role="region" panel labeled by its trigger. Ids are composed from section.id plus the section index and the item index, so two FAQ sections on the same page never produce a colliding trigger-and-panel pair. The accordion is single-open per group: opening one question closes its siblings.

Answers accept either an answers or an answer field, both rendered through metafield_tag, so older and newer entries in the metafield render the same way.

Three settings carry the page furniture. more_faq_text is an inline_richtext cross-link — the live copy points shoppers at the main help center for everything the kids page doesn't cover. bottom_banner_text and a button label and link render the contact prompt at the foot of the page. Those three settings are all the schema exposes; the questions themselves are not settings. A merchandiser edits the kids questions in the same admin field they edit the help center's, and moves one between the pages by moving it between sections of that field.

Why This Way

Reusing the metafield shape rather than inventing a kids-specific one is the decision everything else follows from. A question can be moved between the two pages by moving data, not by re-authoring it, and the content team has one pattern to learn. The accordion follows the help center's data hooks and ARIA pattern, so the theme's accordion behavior and stylesheet serve both pages without a second interaction model.

Dropping the category level is what makes this a variant rather than a copy. The help center groups questions under categories because it has enough of them to need grouping; the kids page has a handful per section, and a flat list is the honest structure for that.

What we gave up is headroom. A flat list is right for a handful of questions per section and stops being right if the kids corpus grows to the help center's size, at which point the answer is the two-level engine, not more settings here. The section's schema is deliberately thin — three settings for furniture, none for structure — so a merchandiser who wants a different page shape gets a developer, not a checkbox. We took that in exchange for a kids page that reads as its own page, with its own tone and its own exit, rather than as a filtered view of the help center.

Why Not an App

The same reasoning as the help center: the content lives in Shopify metafields, where Liquid can read it and any template can reuse it, rather than in an FAQ app's dashboard. An app's accordion is a reasonable accordion; an app's content store is the wrong home for answers the storefront wants to show in more than one place.

For the kids page specifically, an app would have meant a second FAQ list in a second dashboard, or the same list filtered by a tag the app controls. Reading one metafield from two templates keeps the split a content decision — which questions belong to which page — rather than a configuration in someone else's admin.

Implementation Notes

• enabled_on.templates is ['page'], so the section can only be placed on page templates and never appears as an option on product or collection pages.
• Installed on page.faq-kids with main-page disabled, so the section — not the page's body field — owns the whole route.
• Answers fall back faq.answers → faq.answer, both through metafield_tag, covering two spellings of the same key in the metafield's history.
• Trigger and panel ids are built from section.id plus the section index and item index, matching the help center's scheme, so ids stay unique if a second FAQ section is added to the page.
• The chevron is an inline icon-caret SVG rotated by the open state, not an icon font glyph.
• more_faq_text is inline_richtext, so the cross-link's wording and destination are editable in the theme editor without touching the section.

Edge Cases

• A section in the metafield with no items renders only its title, so an empty group is visible to the content team as a heading with nothing under it rather than silently disappearing.
• Both answer field names are supported, so entries authored before and after the key changed render identically.
• The accordion is single-open per group: opening a question closes its siblings, so a long answer never pushes the next question off screen while another stays open above it.
• A blank more_faq_text renders no cross-link block; the page ends at the contact prompt.

Platform Primitives Used

• metafields — one page-level field, custom.faq_sections, shared with the help center; the section reads it and nothing else.
• liquid-schema-settings — three settings for page furniture and an enabled_on restriction; the content is deliberately not a setting.
• json-templates — page.faq-kids disables its main-page section so this one owns the route.

Where It Runs

One landing-page template, page.faq-kids, where the section is the only thing rendered. The help center it cross-links to runs on its own template with its own section; the two share a metafield, not a route.

What This Demonstrates

• Accessibility remediation at component level — the primary capability: a role="button" trigger with aria-expanded into a role="region" panel labeled by it, with ids composed to survive repetition.
• FAQ and self-service content — a second FAQ surface on the same content model, split by audience rather than by app.
• Multi-brand and sub-brand theming — a kids sub-brand with its own page, its own tone and its own exit, on the storefront's shared authoring pattern.

How We Know

One section file from the theme, plus three client working records: two working-session records and a page-scope entry. Documented from the code; no client-side record of the decision survives. The records establish that the kids brand was built from the adult brand's templates with zones that could be hidden — which is the shape this page has — but none of them describes the kids FAQ page itself. The flat accordion, the shared metafield and the page furniture are read from the section.

Related Builds

• Metafield-driven two-level FAQ accordion grafted into a help-center app's shell — the help center this page is a variant of: same metafield, two levels, three grouping paths. That page covers the content model; this one covers what a single-level page does with it.
• Adults/Kids audience-switching header with automatic menu swap — the header that routes a kids shopper toward pages like this one.
• Metafield-driven product information tabs with mobile accordion and variant refresh — the same storefront's other metafield-to-accordion pattern, on the product page.
• PDP content accordion that borrows the premium theme's collapsible contract — a different storefront's accordion, where the open-close behavior is the vendor's and only the markup is ours.

The Buy-vs-Build Question

An FAQ app buys an accordion and a dashboard and pays for it with content that lives outside Shopify. Reading one metafield from two page templates bought a kids page that shares its content model with the help center and cost a page whose structure is fixed in code. Where the content should live is the question, and it's the subject of the accessibility remediation decision page as much as any FAQ app comparison.

Provenance & Evidence

• Client: LUS Brands — loveurcurls.com
• Surface: Landing page
• Templates served: one — page.faq-kids
• Complexity: Medium
• Attribution: Built inside a third-party help-center app's page shell, which stayed in place, in a theme built on Dawn 15.4.1. The section that reads the metafield, the flat accordion and the page furniture settings are our modification; the shell around them is the app's.
• Status: Live, verified 2026-09-07
• Evidence: One section file from the theme, plus two client working-session records and a page-scope entry
• Confidence: Moderate — documented from the code; no client-side record of the decision survives
• Primary capability: Accessibility remediation at component level

Ready for a Second FAQ Page Without a Second Content Model?

You dream it. We build it. If your sub-brand needs its own answers and your team can only learn one way to write them, Contact us today and we'll build the page on the metafield you already have.