Adults/Kids Audience-Switching Header With Automatic Menu Swap

One Liquid predicate decides which audience a page belongs to. The header reads it, replaces the entire navigation with the kids menu, and keeps a two-button switch back to the adult side in reach on desktop and mobile alike.

Shopify has no notion of an audience inside one storefront, so a kids sub-brand usually means a second store — and a split cart, checkout and customer record. This header resolves the audience on the server instead, once per request. One setting names the kids link list, and both the desktop menu and the mobile accordion swap to it before the page is sent.

Fact Strip

Client: LUS Brands
Surface: Global — the header section group, on every page
Audiences served: two, from one theme and one checkout
Mounted by: one section group, header-group.json
Complexity: High
Attribution: Deploi-authored, inside a Dawn 15.4.1 theme. The audience predicate, the toggle and the menu swap are ours. The header they live in is a restructured Dawn header, and the announcement bar they cooperate with is Dawn's.
Status: Live, verified 2026-09-06
Evidence: Strong — theme code plus client working-session and planning records

The Problem

LUS Brands sells two ranges to two audiences from one store: the adult curl-care line and LUCK, the kids line. A shopper who lands on the kids side shouldn't get the adult navigation with a kids link buried in it. They should get the kids navigation — kids collections, kids pages, kids products — plus an obvious way back across to the adult side, because plenty of the people buying kids products also buy for themselves.

The ordinary answer to that is a second storefront, or at least a second theme. A second storefront splits the cart, the checkout and the customer record: one shopper, two accounts, two carts, two sets of order history. A second theme splits the code instead, and every fix gets made twice. Neither cost buys anything the shopper can see.

The Constraint

Shopify has no concept of a section of a site, or of a sub-brand inside one storefront. Markets exist, but they express country and currency, not audience. There is one header group and one footer group per storefront, and section groups can't vary by template. So there is no field to read: the audience has to be worked out at render time, from the request itself.

It also has to be inferred in Liquid, before the response leaves Shopify. A switch made in JavaScript after paint would render the adult menu first and correct it a moment later, which on a kids page is worse than not switching at all. And the whole thing had to keep being a Dawn header inside header-group.json, cooperating with the announcement bar that shares that group rather than replacing it.

What We Built

kids-page-flag.liquid is the piece everything else hangs off. It's a single-purpose predicate — one snippet that answers one question, which audience this page belongs to, and answers it on the server while the page is still being built. Everything downstream asks that snippet rather than working it out again.

header-audience-nav.liquid renders the Adults/Kids switch from four section settings — a label and a link for each side — and marks the active side from that flag. It's one implementation with two placements: the header renders it twice, passing a different wrapper_class each time, once into the desktop header row and once into the top of the mobile drawer. Whatever the toggle learns to do, it learns in both places at once.

The menu swap itself is a text setting. kids_menu_handle names a second link list, and both the desktop menu and the mobile accordion resolve their active_header_menu through the same flag-and-linklists lookup. One setting, both navigations, no second header section.

The same predicate reaches past the header, which is what makes this an audience mode rather than a menu trick. The layout asks it once, adds a kids_page class to <body>, and publishes --kids-page-color and --kids-page-color-dark from theme settings — so a section that needs to look like the kids brand needs a CSS selector, not a Liquid branch. The announcement bar reuses the flag as a content filter: every announcement block carries an audience setting of all, adults or kids, and only the blocks matching the current audience are counted and rendered, so a kids promo never runs on an adult product page.

Around all of that sits the header proper: a three-column brand-split grid, a sticky-header custom element, Shopify Markets country and language forms in both the header and the drawer, the cart notification, and the search modal.

Why This Way

Keeping the predicate in one snippet is the whole discipline. The toggle, the desktop menu, the mobile accordion, the body class and the announcement bar all ask one file the same question and get one answer, inside one render. Naming the kids menu by handle rather than picking it with a link-list setting matters for the same reason: a handle resolves through linklists anywhere, including inside snippets that never receive the section object.

Two costs come with it, and they're both real. The palette arrives as tokens on a body class rather than as a Liquid branch, so nothing inherits the sub-brand by itself — a new section that has to read as the kids line needs its own rules written for it, and a section nobody writes them for renders in the adult palette. The second cost is scope. Audience is a property of a page, not of a shopper. The cart, the checkout and the shared editorial pages have no audience at all, so remembering which side of the store a parent was shopping would be a different build with a different mechanism under it.

Why Not an App

There's an app category for this, sold as audience segmentation or multi-store management, and there's the platform answer, which is a second storefront. Both were on the table.

The audience here is resolved on the server as the page is built, so this needs no cookie, no local storage, no script and no extra request — and nothing that a consent banner has to have an opinion about. The state is correct in the first byte of HTML, which is the one thing a client-side segmentation script structurally cannot offer.

The second storefront is the more serious alternative, and it fails on economics rather than technology. Two stores mean two carts, two checkouts, two customer records and two themes to maintain, for a shopper who thinks of the kids range as a shelf in the same shop. The whole point of this build is that a parent buying for a child and for themselves gets one cart.

Implementation Notes

The audience toggle is one snippet with two placements — the desktop header row and the drawer header — rendered with a wrapper_class parameter, so the two never drift into separate implementations of the same control.
kids_menu_handle is a plain text setting naming a link list, resolved through linklists, so snippets that never receive a picker value can still look the menu up for themselves.
The kids menu takes over only when the named link list actually resolves, so a handle that matches no menu leaves the adult navigation in place rather than emptying the header.
Header labels live in the theme's schema locale file, en.default.schema.json — audience labels, drawer call to action, mega-menu titles — rather than as hard-coded English strings inside the section.
Country and language selectors are built into both the desktop header and the drawer, and both are currently switched off in the live header-group settings.
The search modal in this header is Dawn's own, with the icon assets swapped — an integration-level change rather than a rebuild, and worth saying so.

Edge Cases

A kids link list that doesn't resolve falls back to the main menu, so the header is never left without navigation.
The toggle renders nothing at all when neither audience label is set, rather than an empty <nav> with two blank buttons in it.
Localization forms are emitted only when the shop actually has more than one country or language available to switch between.
Predictive-search markup is conditional on the theme's predictive-search setting, and a plain <search-form> stands in when that setting is off, so the header always ships a working search.
Adult pages run the predicate too and simply come back adult, so there's no code path that exists only on the kids side and gets exercised only there.

Platform Primitives Used

Liquid section schema and settings — the audience labels, links and kids menu handle are section settings, configured in the theme editor.
Section groups — the header and the announcement bar share one group, which is both why they can cooperate and why neither can vary by template.
CSS custom properties — --kids-page-color and --kids-page-color-dark carry the sub-brand palette, so restyling a section is a selector rather than a branch.
Shopify Markets — country and language selection sits in the same header, which is exactly the axis audience is not.
Predictive Search API — the header's search modal, with a non-predictive form behind the same setting.

Where It Runs

One section group, every page of the storefront, both audiences. Every page resolves through the same rule, whichever side of the store it belongs to. There's no separate kids theme, no separate kids header section and no template that opts out.

What This Demonstrates

Mega menu and mobile navigation system — the navigation half: one flag choosing which of two link lists the desktop menu and the mobile accordion render.
Multi-brand and sub-brand theming — one storefront serving two audiences through a Liquid predicate that drives body classes, palette tokens, header state and announcement targeting. LUS Brands and Nudestix both run more than one brand from one theme.

How We Know

Four files read from the live theme — the header section and three snippets — plus client working-session and planning records. Those records are specific: the kids line was scoped from the start as a re-skin of the adult templates rather than a separate site, and the navigation treatment changing depending on which side of the store you're on was flagged as a prerequisite for the kids brand work rather than a refinement of it. That's a rare thing to have. Most architecture decisions of this kind survive only in the code.

Related Builds

Detached mobile drawer with three-level native-details navigation — the drawer this toggle renders into, and the mobile accordion that resolves the same menu handle.
Title-matched mega menu with a full-depth link-list fallback — Nudestix runs several brands from one theme too, and solves the composition problem in the theme editor rather than by inference.
Mega-menu header with separate mobile menu and image blocks — Three Ships splits desktop and mobile navigation by link list, the same instinct applied to device rather than audience.

The Buy-vs-Build Question

Audience switching looks like a navigation feature and is really an information-architecture decision: what a store's sections mean, and what a menu is allowed to infer about the page it's rendering into. Menu apps operate above that line and can't reach below it. The trade-offs, including where a second storefront genuinely is the right call, are set out in the mega menu and navigation build-or-buy page.

Ready to Run Two Audiences From One Storefront?

If you're weighing a second store for a sub-brand, the cart is the thing to think about first. Contact us today and we'll walk through what one theme can carry.