Appearance
Header
The bar at the top of every page — your logo, your menu, and the search, account, and cart icons.
One header, five looks — every preset uses the same layout; only the signature changes (the colour, the nav underline animation, and the icon style). Your menu always comes from your own Shopify navigation, never from the theme.
Where to set it up — open the theme editor and click Header in the sections list. The logo image itself lives in Theme settings → Logo.
Try it
Pick a preset to see its signature, then change the settings and watch the preview update. Use the screen-size buttons to see the desktop bar collapse to a mobile bar with a slide-in menu, and the light/dark toggle to check both modes. Tick Reveal hover & active signature to see the nav underline and icon style that normally appear on hover.
←Header
Where the logo sits in the header. Center split places it between the two halves of the menu.
Lets shoppers choose their country or region to see local pricing and currency. Requires markets set up in Shopify.
Lets shoppers switch the storefront language. Requires published languages set up in Shopify.
Header sits over hero content with transparent background. The color scheme switches to light on scroll.
0px
Adds space above the header content.
0px
Adds space below the header content.
120px
160px
Your menu links come from Online Store → Navigation, and the logo image (plus its dark-mode and transparent-header variants) from Theme settings → Logo — so they live there, not in this section.
How it works
The header is one shared component across all five presets — same logo positions, mega-menu, predictive search, icon cluster, and mobile drawer everywhere. What changes per preset is the signature: a decoration layer (colour, border, blur, and the nav hover animation) tuned to that preset's element. It adds no extra menus or structure, and you don't configure it — it follows your Theme settings → Preset choice.
The parts
- Logo — left, centered, or center-split (your menu wraps both sides of a centered logo).
- Navigation — your top-level links, as plain dropdowns or a multi-column mega-menu. Driven by your Shopify menu.
- Predictive search — a full inline bar at wide widths; a compact icon that opens a slide-in drawer below 1400 px.
- Icon cluster — on desktop (1024 px and up): account, search, dark-mode toggle, and cart with a live count. Below 1024 px the bar keeps only cart + hamburger, and account + search move into the menu drawer so the logo can sit larger.
- Mobile drawer — the hamburger opens a panel with a search field, an account link, your menu, the country/language selector, and the dark-mode toggle.
- Sticky + transparent — the bar can stay pinned as you scroll, and float transparently over a homepage hero until you scroll.
In the theme editor
The chrome at the top of every page is grouped under Header in the editor's sections list. That group holds three separate sections plus a logo marker:
text
Header ← the group at the top of the sections list
├─ Announcement bar → the message strip above the header (its own section)
├─ Header → logo · navigation · mega-menu · search · icons
│ └─ Header logo → a placement marker; the image is set in Theme settings
└─ Cart drawer → the store-wide slide-out cartTwo things behave differently from the rest of the editor, by design:
- The logo image is set in Theme settings → Logo, not in the header. Clicking Header logo opens an empty panel with a note pointing you there. Keeping it in Theme settings means the logo — plus its dark-mode and transparent-header variants and its desktop/mobile widths — stays consistent everywhere. Upload nothing and your shop name shows as text instead.
- The cart drawer never appears on the editor canvas. It's an overlay that only mounts when a shopper taps the cart, and the editor renders a static page — so there's no tap and it stays hidden. To style it, set its colour scheme and check the live storefront.
Settings
| Setting | What it does |
|---|---|
| Logo position | Left, Center, or Center (split navigation) — the split flanks a centered logo with two halves of your menu. |
| Menu | Which Shopify menu fills the navigation. |
| Enable mega menu | Turns top-level dropdowns into multi-column panels (best for 10+ links). |
| Mega menu promo image / link / text | An optional promotional tile inside the mega menu panel — image, destination, and caption. |
| Customer account menu | An optional Shopify menu shown in the account dropdown for logged-in shoppers. |
| Color scheme | Colors the bar. Each preset ships its own signature treatment on top. |
| Enable sticky header | Keeps the header pinned as the page scrolls. |
| Enable transparent header | The bar floats over a homepage hero until you scroll. Pair it with a transparent-header logo variant. |
| Show country/region selector | Lets shoppers pick their region; currency follows automatically. Needs Shopify Markets. |
| Show language selector | Lets shoppers switch language. Needs published languages in Shopify Markets. |
| Top / bottom padding | Adds breathing room above and below the bar. |
The logo image, its dark-mode and transparent-header variants, and the desktop + mobile widths are all in Theme settings → Logo. Below 1024 px the bar keeps only cart + hamburger, which leaves room for a larger logo than older themes allowed.
The mobile menu
Below 1024 px the bar slims to logo + cart + hamburger. The hamburger slides in a panel — from the start edge, dimming the page behind it — carrying, top to bottom:
- A close (×) button on its own row.
- A search field, then a My account link (moved here from the bar so the logo can sit larger).
- Your navigation links (nested items expand on tap).
- The country/region and language selectors.
- The dark-mode toggle.
It uses the same menu and settings as the desktop header — nothing extra to configure. Focus is trapped inside the open panel, and Escape or a tap outside closes it.
Preset signatures
Each preset decorates the same header in its own element — switch presets in the demo above to compare. The signature is colour, border, blur, and the nav-hover animation; it adds no menus or structure.
| Preset | Bar | Nav underline | Icon style | Mobile drawer |
|---|---|---|---|---|
| Uisce | Frosted glass | Sea-glass waterline, slides in flat from centre | Soft glyphs, mist-tint fill | Mist-gradient surface |
| Gaoth | Warm-cream frosted | Amber "wind-trail", drifts in from start | Rounded pills that lift | Warm cream, amber edge |
| Talamh | Cream-loam frosted | Two-tone soil-strata band, rises up from the baseline | Squared terracotta tiles, seat down | Cream-loam, moss edge |
| Tine | Tempered-iron | Molten heat-glow, ignites from the centre | Steel tiles, ember-glow on hover | Tempered-iron, forge-red edge |
| Neart | Sand-stone frosted | A vital-pulse line, drives in and thickens | Capsule icons that steady | Sand-stone, vital-green edge |
Each signature is built from logical CSS, so it mirrors correctly in right-to-left languages, and the underline animation turns off for visitors who've asked for reduced motion (the underline still shows on hover — it just doesn't animate). Header colours always come from your active color scheme, so light and dark mode stay legible.
Accessibility & localization
- Reduced-motion safe — the nav animation respects the visitor's preference.
- Right-to-left ready — flows correctly in Arabic, Hebrew, Persian, and Urdu.
- Keyboard + screen reader — the mobile drawer traps focus while open and closes on Escape; the cart count announces the grammatically correct plural across all 50 locales.
Tips
- Keep top-level navigation to 5–7 items — more crowds tablets and buries links in the mobile drawer.
- Upload a dark-mode logo if your mark has dark text or glyphs, and a transparent-header logo (usually light) if your homepage opens on a hero image.
- Lower the mobile logo width (default 160 px) only if your wordmark crowds the cart and hamburger.
- Use Center (split navigation) for a premium, symmetrical look when you have 3+ top-level links.
- The message strip above the header is the Announcement bar — a separate section with its own settings.