Header & Footer Builder
Header & Footer Builder
Site chrome is built from blocks, the same way pages are, and previewed against the real storefront components — so what you see in the builder is literally what ships.
Open them from Content → Menus → Header Builder / Footer Builder.
How it works
Each builder shows three things: a block list on the left, a live preview in the middle, and the selected block's settings underneath. Blocks can be reordered by dragging, hidden without losing their settings, and removed entirely.
The preview renders at desktop, tablet and mobile inside a real iframe, so Tailwind breakpoints behave exactly as they do on the live site — a shrunk container would not.
Changes go live only when you press Publish, and publishing is visible on the next page load.
Header blocks
| Block | Settings |
|---|---|
| Announcement bar | Message, utility links, social links, layout (spread / centered / split), style (solid / quiet / outline) |
| Logo | Position and mobile position, display mode (image + text / image / text), width and mobile width, retina, custom and dark-mode logo URLs |
| Navigation | Which menu drives it, mode (mega / classic dropdown / editorial centre / split / scroll rail / sticky condensed), orientation, alignment, open on hover or click, mega columns, position, sticky scope, scroll behaviour, spacing, icons, mobile layout, breadcrumbs |
| Search | Visibility (always / desktop / mobile / hidden), position, mobile position |
| Account, wishlist & cart | Show or hide the action icons |
Sticky behaviour and scroll motion
Two separate controls, often confused:
- Sticky scope — what sticks: nothing, the topbar row only, the menu row only, or the full header.
- On scroll — how it reacts: keep as is, hide and reveal on scroll up, or shrink to compact.
Logos
Set a custom logo URL per header, and a separate dark-mode logo that swaps automatically with the theme. Leave them empty to use the branding logo from Settings. Retina serving is on by default and is skipped automatically when a custom URL is set, so a 1x/2x pair can never mismatch.
Footer blocks
Brand & contact, menu columns, newsletter, legal line, text, image, button, social links and dividers. Every block can be removed and re-added, so a footer can be a four-column mega footer, a single legal line, or anything between.
Layout controls: composition (split / stacked / centered), content width (content area / wide / full bleed), padding and section gap.
Menu column headings come from each menu's configured title, and can be overridden per block.
Content width and alignment
Header, breadcrumbs, page canvas and footer all read the same saved frame — content area, wide, or full bleed, plus an optional side margin. Set it once on the header and every public surface lines up with it.
Prebuilt layouts
Press Templates in either builder. Eight header layouts and eight footer layouts ship as system templates, including Store Console Demo (the four-column demo.storeconsole.com footer, which is also the default on a fresh install) and Store Console Production (the lean brand + newsletter + fine print look). Applying one copies its blocks onto the active layout; you can also save your current layout as a reusable template.