Header & Navigation
The header area is four stackable pieces — announcement bar, utility bar, header, and mobile drawer — each independently configurable.
Header layouts
Two settings combine into nine desktop layouts:
| Setting | Options |
|---|---|
| Logo position | Left · Centre · Right |
| Navigation position | Inline with logo · Above logo · Below logo · Split around centre logo |
Split around centre logo halves your menu either side of a centred logo — the classic premium look. On mobile, every layout collapses to the standard toggle / logo / actions bar with a slide-out drawer.
Dropdowns & mega menus
Menu items with children get hover/focus dropdowns automatically, up to three levels. To upgrade a top-level item to a full-width mega menu:
- In the Header section, click Add block → Mega menu.
- Type the menu item's title into the block — the match is exact, so "Shop" must be spelled exactly as it appears in your navigation menu.
- That item's dropdown becomes a full-width panel: second-level links render as column headings with third-level links beneath.
- Optionally add up to two promo images per mega menu, each with a heading and link.
Sticky header
Three modes under Header → Sticky header:
- Off — the header scrolls away normally.
- Always visible — the header pins to the top of the screen for the whole scroll.
- Show on scroll up — the header hides while scrolling down (maximising content space) and slides back the instant the shopper scrolls up.
Transparent homepage header
One switch (Header → Transparent on homepage) overlays the header on your hero image: the header and utility bar become transparent, an alternate logo can swap in, and everything restores to solid the moment the shopper scrolls. Set a transparent-mode text colour that suits your hero imagery — white over dark photography is the classic pairing.
Utility bar
A slim bar above the header for the things that shouldn't crowd your navigation: a utility menu (assign any navigation menu), social icons (reads your Theme settings social accounts), and the currency/language pickers. Desktop-only by default; a switch shows it on mobile too. Its contents also fold into the mobile drawer footer.
Announcement bar
Announcements are blocks — add up to five, each with its own text, link, and background/text colours. Two or more auto-rotate (3–10s, pausing on hover); optional arrows and a dismiss button (dismissal persists for the shopper). Text size and vertical padding are adjustable.
Predictive search
The search icon opens a flyout — shoppers never leave the page. As they type, live results appear with product image, title and price (sale pricing included), plus a "View all results" link to the full search page. On desktop the flyout is a compact popover anchored to the search icon; on mobile it spans the full width. Results are rendered server-side, so currencies and translations are always correct.
Next: build your homepage →