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.
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.
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 |
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.