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.

Fully reproducible — and one API gotcha worth knowing. Definitions and entries are both seeded through the Admin API, so the entire navigation model can be rebuilt from one JSON file. The gotcha: creating an unprefixed definition type like navigation_item requires the write_metaobject_definitions scope — without it, Shopify answers “This type is reserved for use by another application”, which reads like a namespace conflict but is really a missing-scope error. Knowing that saves an afternoon.

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.

← All case studies