case study · metaobjects · liquid · navigation
Navigation merchandisers edit like content
Background. Navigation is where merchandising pressure meets theme code: every campaign wants a new highlight in the menu, and every change used to be a developer ticket. The fix: navigation stops being theme configuration and becomes content — structured entries the marketing team edits in the admin.
The data model. Each item in the demo store’s category bar is a
navigation_item metaobject with three fields: a title, a position, and a
content_data JSON document that decides what the item is:
{
"panel": "mega",
"columns": [
{ "heading": "Light & scent",
"links": [{ "label": "Candles", "url": "/collections/candles" }] }
],
"promo": { "text": "Buy 2+ candles, unlock bundle rewards",
"cta": "Shop candles", "url": "/collections/candles" }
}A {"panel": "link"} entry is a plain link; a {"panel": "mega"} entry
renders columns of links plus an optional promo card. Reordering the bar is
editing a number. Adding a seasonal entry is creating a metaobject — the
“Summer Edit −20%” item in the demo bar is exactly that.
Ownership split that matters in production. The metaobject definitions
are merchant-owned (created once in the admin), while the entries are
written by the same custom app that seeds the rest of the store. Apps get
their own namespaced types in Shopify; keeping definitions merchant-owned is
what keeps the Liquid clean (shop.metaobjects.navigation_item) and the
content editable by any staff account.
Progressive enhancement. The menu is a <details> disclosure — it works
with JavaScript disabled, on touch, and with a keyboard. A small script adds
desktop hover intent (200ms open, 300ms close grace), Escape, and
click-outside. No framework, ~50 lines.
Try it. Hover “Shop” in the demo store’s category bar for the mega panel; shrink the window to see the same data render as a stacked mobile panel. The case-study video shows the admin side: editing a metaobject and reloading the storefront.