Navigation, Header & Footer
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.
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.
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. 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.