Header / Footer Builder¶

The Header / Footer Builder lets a merchant compose a storefront header and footer visually, with no code. The builder lives in the Shop Dashboard (Online Shop → Headers and Online Shop → Footers). What it produces is a self-contained block of HTML + CSS that the storefront injects verbatim — so a header/footer carries no runtime dependencies and renders identically everywhere.

How it is stored¶

A header or footer entity holds a settings object with three keys:

{
  "config":  { "...": "what the builder edits" },
  "content": "<header>…</header>",
  "styles":  ".ch-scope … { … }"
}

config — the structured model the builder reads and writes.
content — generated HTML, scoped under .ch-scope (header) / .cf-scope (footer).
styles — generated CSS, namespaced to the same scope so it never leaks into the page.

content and styles are always generated from config on save. Never edit them by hand — edit config (via the builder) and they recompile.

The storefront renders from content + styles only.

Header model — zones and elements¶

A header has three zones — left, center, right — and each zone holds an ordered list of elements.

{
  "elements": {
    "left": [
      { "id": "logo-1", "type": "logo", "logoType": "text", "text": "Aurora", "height": 32 }
    ],
    "center": [
      {
        "id": "menu-1",
        "type": "menu",
        "variant": "plain",
        "source": "static",
        "gap": 28,
        "items": [
          { "label": "Home", "url": "/" },
          { "label": "Shop", "url": "/shop" }
        ]
      }
    ],
    "right": [
      { "id": "search-1", "type": "search", "variant": "icon", "placeholder": "Search products…", "categories": [] },
      { "id": "act-1", "type": "action", "action": "account" },
      { "id": "act-3", "type": "action", "action": "cart" },
      { "id": "btn-1", "type": "button", "variant": "solid", "label": "Sale", "url": "/shop?sort=sale", "background": "#e11d48", "color": "#ffffff" }
    ]
  }
}

Element types: logo, menu, search, button, text, text-link, icon-link, image, action (account / wishlist / cart), phone.

A menu element can be "source": "static" (custom links) or "source": "dynamic", bound to a shop menu by menuSlug — dynamic menus stay in sync with the menu manager.

A footer is a grid of columns, and each column holds an ordered list of widgets. The number of columns is the merchant's choice via columnCount.

{
  "columnCount": 4,
  "cols": [
    {
      "id": "col-1",
      "elements": [
        { "id": "h-1", "type": "heading", "text": "Aurora" },
        { "id": "t-1", "type": "text", "text": "Quality products, delivered fast." },
        { "id": "s-1", "type": "social", "facebook": "https://facebook.com/aurora", "instagram": "https://instagram.com/aurora" }
      ]
    },
    {
      "id": "col-2",
      "elements": [
        { "id": "h-2", "type": "heading", "text": "Shop" },
        { "id": "l-1", "type": "links", "links": [
          { "label": "All products", "url": "/shop" },
          { "label": "New arrivals", "url": "/shop?sort=new" }
        ] }
      ]
    },
    {
      "id": "col-4",
      "elements": [
        { "id": "n-1", "type": "newsletter", "title": "Newsletter", "placeholder": "Enter your email", "buttonLabel": "Subscribe" }
      ]
    }
  ],
  "copyright": "© {year} Aurora. All rights reserved."
}

Widget types: heading, text, links, menu (static or dynamic shop menu), image, newsletter, social, html (raw HTML escape hatch).

Choosing the column count¶

columnCount controls the grid:

0 (or omitted) — responsive auto-fit; columns size themselves to the content.
1–6 — that many equal-width columns per row.

The grid automatically collapses to 2 columns on tablet (≤ 768px) and a single column on mobile (≤ 480px).

copyright renders as a bottom bar beneath the grid. {year} is replaced with the current year. Leave it empty to hide the bar.

Authoring guidelines¶

Header: keep it light — a logo, one menu, search, and a couple of action icons. More than ~5 elements in a zone tends to wrap on smaller screens.
Footer: 3–5 columns reads best. Lead with a brand column (heading + text + social), follow with link columns, and end with a newsletter.
Colors: set background, color, and mutedColor on the footer config. Link and social colors derive from mutedColor and brighten to color on hover.
Images: logo and footer image widgets store a media slug in src. The builder resolves it to a full media URL at compile time — do not paste absolute URLs.
Set as default: use the Set as default action to make a header/footer the storefront default for all pages.

Sample presets¶

Complete, ready-to-use samples (full { config, content, styles }) ship in the theme kit:

10-theme-preset-kit/src/themes/custom/header-footer/sample-header.json
10-theme-preset-kit/src/themes/custom/header-footer/sample-footer.json