Editing Your Header
How to customise your storefront header — logo, navigation links, CTA button, sticky behaviour, and mobile menu — using the Header & Footer editor.
Your storefront header appears on every page and contains your logo, navigation links, and optional call-to-action elements (cart icon, account login, CTA button). You edit it in Dashboard → Header & Footer.
Opening the Header editor
Go to Dashboard → Header & Footer, then click the Header tab. A live preview appears on the right as you make changes.
Logo
- Click Upload logo to add an image. SVG and PNG (with transparency) work best. Recommended height: 32–48 px. The logo scales proportionally.
- Set a separate dark mode logo if your logo does not look good on a dark background.
- If no logo is uploaded, your store name is shown as text using your heading font.
Navigation links
The navigation in the header is driven by Dashboard → Navigation. Changes to your navigation menu automatically reflect in the header. You can add pages, external URLs, collections, and dropdown sub-menus from the Navigation editor.
CTA button
Add a prominent button to the header (e.g. "Shop now", "Book a call", "Get a quote"):
- In the Header editor, scroll to CTA button.
- Toggle it on and set the label and destination URL.
- Choose the button style: Primary (filled, uses your primary color) or Outline.
Sticky header
Toggle Sticky on to keep the header pinned to the top of the screen as the visitor scrolls. When sticky is on, you can also enable Shrink on scroll — the header reduces in height after the user scrolls past the fold, giving more space for content.
Transparent header
Enable Transparent on first load to start the header with a clear background when the page loads. The header becomes opaque once the visitor scrolls. This works best with hero sections that have a full-bleed image or video.
Icons — cart, account, search
Use the toggles in the Header editor to show or hide:
- Cart icon — shows item count badge. Clicking opens the slide-over cart. Requires the Ecommerce brick to be active.
- Account icon — shows customer login / account menu.
- Search icon — opens a full-screen product search overlay.
Mobile menu
On small screens the navigation collapses into a hamburger menu. You can customise:
- Menu slide direction (left or right).
- Whether the mobile menu shows a search bar at the top.
- Mobile-only CTA link shown at the bottom of the menu.
Saving
Click Save header. Changes take effect immediately on your live storefront — no page publish required.