Navigation, Header & Footer
Pick a premium header template and layout variant, build your top navigation and mega-menus, configure your footer columns and payment icons, and set how the menu behaves on mobile.
Your header and footer appear on every page of your store, so they're worth setting up carefully. Both have their own dedicated editor with a live preview of how they'll look on desktop and mobile.
Screen: Online Store → Theme → Page Layouts, then open Header or Footer from the journey rail. Both editors show a live mock of the header or footer in context.
Before you publish anything: premium defaults, not a blank chrome
If you've never published a Header or Footer design, your store doesn't show a bare, unstyled navbar and footer — since the 2026-07-12 premium-by-default rollout it automatically renders a premium default instead: a centered logo, split navigation header and a centered minimal luxury footer, both built from your real branding (logo, store name, and navigation links) rather than placeholder content. This also applies if your store's saved header/footer design ever fails to load. Publishing your own Header or Footer design here replaces the default immediately and permanently for that surface — there's no way to intentionally revert to the automatic default once you've published something.
Premium header templates and layout variants
Your header has two separate configuration surfaces that work together:
- The premium template picker (this section) — picks the header's overall visual design (one of 7 templates) and its arrangement (one of 4 variants). This is the same picker experience used for every other page in Page-Layout Pickers — Templates / Variants / Themes / Config tabs, Save Draft, and Publish.
- The classic Header editor (Desktop / Mobile / Shared modes, described below) — your navigation links, mega-menus, colours, and mobile behaviour. Whichever premium template and variant you pick still renders your logo, navigation links, and brand colours from here — the template picker changes the shape and skin, not the content.
Screen: Online Store → Theme → Page Layouts → Header, or click Browse Templates from inside the classic Header editor's Desktop mode.
The four tabs
| Tab | What it does |
|---|---|
| Templates | 7 thumbnail cards, one per header design. The one currently live on your store carries a green Active badge |
| Variants | 4 arrangement cards — see below. Every template supports every variant |
| Themes | A shortcut into the Theme Hub — applies your store-wide theme, same as every other page picker |
| Config | Page Text (button labels, search placeholder, and other chrome strings for the selected template), Capabilities (toggle features like search, mega-menus, and the commerce icons below), and Color Overrides where available |
The 7 templates: Floating Pill Navbar, Two Tier Utility Bar, Centered Logo Split Nav, Tech SaaS Bar (a SaaS-dashboard-style bar), Serif Luxury Bar, Minimal Hamburger Bar, and Retro Arcade Bar.
All 7 header templates require a paid plan
Every header template in this picker is a flagship design, so on the Free plan every card in the Templates tab shows a lock icon and an Upgrade badge instead of the usual Selected state — clicking a locked card does nothing. Hover a locked card to see "Upgrade to a paid plan to unlock flagship templates." The moment your store is on any paid plan — Starter, Growth, Pro, or Max — every template unlocks; you don't need Pro or above specifically. Go to Billing → Plans & Billing to upgrade (see Plans & Billing). If a template still shows locked right after you upgrade, reload the Admin Panel — the picker reads your plan from a subscription check that runs when the page loads, so it can lag a freshly-completed upgrade by a page refresh.
The 4 variants
| Variant | Arrangement | When to use it |
|---|---|---|
| Standard | The template's own native layout — whatever that design was originally built as | Keep this unless you specifically want a different arrangement; it's the best-tested option for that template |
| Centered Split | Logo dead-centre, navigation links split evenly left and right of it | A boutique/editorial look where the brand mark should visually anchor the bar |
| Stacked | Two rows — brand (and icons) centred on row one, navigation centred on row two below it | Stores with a longer navigation list that would crowd a single row, or that want a more spacious, brand-forward header |
| Logo Right | Mirrored layout — navigation and icons lead on the left, the logo sits on the right | Stores that want customers to see navigation first and treat the logo as a secondary sign-off |
Default: Centered Logo Split Nav, Centered Split
If you've never published your own header design, your store's default is the centered logo, split navigation layout (see Before you configure anything in Page-Layout Pickers) — the same look you'd get by explicitly picking the Centered Logo Split Nav template with the Standard variant.
Cart, wishlist, and account icons (Config tab)
Every one of the 7 templates ships three matching Config-tab toggles under Capabilities: Show Cart Icon, Show Wishlist Icon, and Show Account Menu — all on by default. When enabled, the cart and wishlist icons show a live count badge (hidden when the count is 0, capped at 99+), and clicking wishlist while signed out sends the customer to login instead of the wishlist page.
Two places can hide an icon — both must be on for it to show
These Config-tab toggles work together with the classic Store Branding switches in the Header editor's Desktop mode below (Show cart / Show wishlist / Show user-menu icons): an icon renders only when both its Config-tab toggle and its Store Branding switch are enabled. If you turned on Show Cart Icon here and the icon still doesn't appear on your storefront, check the matching Store Branding switch — either control alone can hide it, and remember the change reaches customers only after you Publish (Save Draft keeps it in the editor).
Header editor: Desktop, Mobile, and Shared modes
The Header editor's Desktop / Mobile / Shared control at the top is not just a preview-viewport switch — it swaps the entire settings form underneath it. Each mode edits a different set of settings and drives a matching live preview on the right:
| Mode | What it edits |
|---|---|
| Desktop | Your navigation links, mega-menus, and header appearance (sticky, colours, scroll effect, icon toggles) — the desktop navbar |
| Mobile | The mobile-only navigation style, bottom-nav items, slide-out menu content, and mobile header bar — see below |
| Shared | Settings common to both Desktop and Mobile |
Where the mobile header settings live
The mobile navigation and header settings used to live on the Mobile Customization page. They've moved into this Header editor's Mobile mode — see Mobile Customization for the note left in their old location.
Header navigation (Desktop mode)
Open Header from the Page Layouts journey rail, then make sure the mode switcher at the top is set to Desktop.
Navigation links
Add, edit, and remove links using the link list editor. Each link has:
| Field | Notes |
|---|---|
| Label | The text shown in the navbar |
| Path or URL | An internal store path (e.g. /products) or an external URL |
| Order | Drag to reorder — links display in this order |
| Enabled | Toggle a link off without deleting it |
A link can point to a single page, or you can turn it into a mega-menu — a multi-column dropdown that can include images and quick links straight into specific categories or products, configured per navigation item.
Some links are locked
System links like Login and Orders are locked to prevent accidental removal — you can still reorder them, but you can't delete them from the navbar.
Empty link list falls back to Home / Shop / About
If you haven't added any navigation links yet, the header shows three default links — Home, Shop, and About — instead of an empty navbar. Add your own links above and they replace this fallback.
Header appearance
| Setting | What it does |
|---|---|
| Sticky header | Keeps the header fixed at the top as customers scroll, or lets it scroll away |
| Background colour (initial) | The header's background before the customer scrolls — supports HEX, RGB/RGBA, or transparent |
| Text colour (initial) | Text/icon colour to match the initial background |
| Scroll effect | Toggle on to have the header switch to a different background and text colour once the customer scrolls past a threshold — useful for a transparent header over a hero image that needs to become solid and legible once the page scrolls |
| Scrolled background / text colour | The colours the header switches to once scroll effect triggers |
| Wishlist / cart / user-menu icons | Toggle each on or off independently |
Header editor: Mobile mode
Switch the mode control at the top of the Header editor to Mobile to edit your mobile navigation, slide-out menu, and mobile header bar. This replaces the entire form on the left with three cards; the preview on the right switches to the mobile storefront.
Navigation style
| Setting | What it does |
|---|---|
| Navigation type | Hamburger drawer, a bottom-navigation bar with labelled icons, or a drawer — pick the mobile nav pattern |
| Drawer direction | Slide in from the left or right (shown when navigation type is Hamburger or Drawer) |
| Bottom-navigation items | When navigation type is Bottom tab: add, edit, and remove up to 5 items, each with an icon, label, path, and an enabled toggle |
Slide-out menu
| Setting | What it does |
|---|---|
| Profile / cart / wishlist / social-links in drawer | Toggle whether each appears in the mobile slide-out menu |
| Menu animation style | Slide, fade, or none |
| Custom menu links | Off by default (the drawer inherits your desktop navbar links); switch on to define a separate set of links (label, path, enabled) just for mobile, up to 20 |
Mobile header bar
| Setting | What it does |
|---|---|
| Compact mode | A slimmer mobile header, giving product images more vertical space |
| Show search | Show or hide the search bar in the mobile header |
| Sticky header | Pin the header at the top on scroll, or let it scroll away |
| Header style | Standard, Minimal, or Centered logo |
| Show cart / wishlist / user-menu icons | Each icon defaults to inherit — it follows the matching desktop navbar toggle (shown as an "Inherit on/off" chip). Press Override to set a mobile-only value, or Reset to go back to inheriting |
Footer
Open Footer from the Page Layouts journey rail, or click Browse Templates from inside the classic Footer editor to jump straight to the footer's own template picker at Online Store → Theme → Page Layouts → Footer (same picker shell — Templates / Variants / Themes / Config tabs, Save Draft, Publish).
All 7 footer templates require a paid plan
Just like the header, every one of the footer's 7 premium templates is a flagship design — on the Free plan each card in the Templates tab shows a lock icon and an Upgrade badge, and clicking one does nothing. Any paid plan (Starter, Growth, Pro, or Max) unlocks all 7; upgrade from Billing → Plans & Billing (see Plans & Billing). If a template still shows locked right after upgrading, reload the Admin Panel so the picker re-checks your plan.
Layout and content
| Field | What it does |
|---|---|
| Background colour / text colour | Footer's own colour scheme, independent of your header |
| Columns | Organise footer links into columns, each with its own heading |
| About text | A short description shown in the footer |
| Copyright text | Supports {year} and {companyName} placeholders — for example "© . All rights reserved." renders with the current year and your store name automatically |
Why don't I see my footer tagline?
The About text field above is what shows as the short description/tagline under your logo in the footer — it's blank until you set it, so a store that hasn't filled it in simply shows no tagline (not an error). If you've never published a Footer design at all, the copyright line is generated automatically from your store name (for example, “© 2026 Sage & Still. All rights reserved.”) rather than using whatever is saved in the Copyright text field above — publish a Footer design to take control of the exact copyright wording.
Link toggles
Toggle individual footer links on or off: About, Contact, FAQ, Track Order, Privacy Policy, Terms, Refund Policy, and Shipping Policy.
Features
| Toggle | What it does |
|---|---|
| Show socials | Displays icons for whichever social links you set in Store Branding |
| Show payment icons | Displays badges for accepted payment methods (Visa, Mastercard, UPI, COD, and others) so customers see at a glance which payment options you support |
| Newsletter sign-up | Adds an email sign-up field directly in the footer |
| Simplified mobile footer | Collapses the multi-column footer into a compact layout on small screens |
Social icons come from Store Branding
You don't re-enter your social links here — the footer's social icons pull from the same links you set in Online Store → Theme → Look & Feel → Logo & Identity.
Newsletter sign-up is a real subscription
When a customer submits the footer's email field, they must also check a GDPR consent box before the button becomes clickable — this applies to every footer design, not just one look. Submitting saves them to your subscriber list — it isn't a decorative form. New subscribers, tagged with source Store, show up in Marketing → Newsletter alongside subscribers captured from your landing pages and hosted sites — see Forms & Newsletter for how to review, filter, and broadcast to your list.
Some footer designs don't show an email field at all. A handful of the more minimal footer looks are deliberately text-and-links only — toggling Newsletter sign-up on has no visible effect for those designs. If you've enabled the toggle and still don't see the email field on your live storefront, switch to a different footer template from the Templates tab and check again; most designs do include it.
Why don't I see new subscribers from my footer?
If a customer says they signed up but never appears in Marketing → Newsletter, the most common cause is that they left the GDPR consent box unticked and their submission never went through — the button stays disabled until it's checked, so nothing was ever sent. Ask them to try again and confirm they check the box before submitting.
All footer templates now show the same content
Every premium footer template (Templates tab above) renders the same set of content your classic footer settings define: your About text, the newsletter sign-up description (the line of copy above the email field, editable wherever your newsletter copy is set), the payment-method badges when Show payment icons is on, and the language switcher (if you've enabled multiple storefront languages). If your footer previously looked like it was missing your tagline or payment badges after switching templates, that's fixed — every template now shows the same content, just arranged in that template's own visual style. Stores on plans that include the BillionBiz platform badge also see a "Powered by BillionBiz" link in the footer automatically; it isn't a setting you toggle here.
