Header builder

The Header tab is a visual builder for the bar at the top of every storefront page. You arrange the logo, search, menus, cart and other elements into rows, separately for desktop and mobile, and watch the result in a live preview of your real storefront. You can keep several headers and choose which one shoppers see.

StoreFront›Settings›Header

Before you start

• Set the Storefront URL on the General tab. Without it, the live preview falls back to a simplified mock-up. See Connect the storefront.
• Create your menus under Appearance›Menus. The header’s Menu and Mobile menu elements link to WordPress menus.
• Upload your logo to the Media Library, if you want a logo image rather than the default brand mark and store name.

How the Header tab works

• You can keep several headers. The one marked Default header is the one shoppers see.
• The header has its own save button, Save header, inside the editor. The Save Changes button used by the other tabs doesn’t appear here and doesn’t save headers.
• Set as default, Duplicate, Import header and Delete take effect at once, without a separate save.
• As with every setting, shoppers see a saved change within about 5 minutes.

The header list

The tab opens on a list of your headers: “Compose the storefront header. The header marked as default is the one shown on the storefront.”

Control	What it does
Search by name…	Filters the list.
Import header	Uploads a .json header file and adds it as a new header. A file that can’t be read shows “Invalid JSON file.”
Add new header	Creates a header (see below).
Default header chip	Marks the header the storefront currently shows.
Edit	Opens the header in the editor.
Set as default	Makes this header the one the storefront shows.
Duplicate	Copies the header as “name (Copy)”.
Export	Downloads the header as header-name.json, to back it up or move it to another site.
Delete	Asks “Delete this header? This cannot be undone.” Not offered on the built-in header. Deleting the header in use switches the storefront back to the built-in one.

Create a header

1. Click Add new header.

2. Type a Name, for example “Summer sale header”.

3. Choose what to Start from:

   • Blank (default layout): the built-in layout described below.
   • Classic: the same as the built-in layout.
   • Logo centered: search on the left, logo in the centre, account, wishlist and cart on the right, with the menu centred in the row below.
   • Minimal: a single slim sticky row with logo, search, account and cart.

4. Click Create. The new header opens in the editor.

5. Make your changes and click Save header.

6. Back on the list, click Set as default on the new header when you want shoppers to see it.

Working on a copy is the safe way to change a live header: Duplicate the default header, edit the copy, check it in the preview, then Set as default.

Edit a header

1. On the list, click Edit next to the header.

2. Use the Desktop | Mobile switch to choose which layout you’re editing. Desktop and mobile are separate layouts; change both.

3. To add something, click Add element in a slot, filter the list (“Start typing to find elements…”) and pick an element. The list shows only elements allowed in the current view.

4. To change an element, hover over its chip and use Edit (opens its settings), Clone or Delete.

5. To move an element, drag its chip within its slot or into another slot of the same view.

6. To change a whole row, click the gear icon on the row (see Row settings below).

7. For header-wide options, click Settings in the bar at the top (see Header settings below).

8. Click Save header. The button shows Saving… and then Saved. The editor reloads the header as stored.

Save before you click Back

Back returns to the header list and discards unsaved changes without asking. Always click Save header first.

The editor bar also has:

• Header name: rename the header.
• Edit JSON: edit the raw header file in a window, then Apply (or Cancel). This changes only what’s on screen (“Edits the in-memory document — use Save header to persist.”). Meant for advanced users.

Live preview

With a Storefront URL set, the editor shows your real storefront header drawing your unsaved draft, labelled “Live preview” and “Desktop layout — real storefront” or “Mobile layout — real storefront”. It’s 1,280 pixels wide for desktop and 390 for mobile, and updates a moment after each edit.

Without a Storefront URL, a simplified mock-up appears instead, with the hint “This is a simplified mock. Set the Frontend URL in the Auth tab to preview the real storefront header here.” (The Storefront URL is now on the General tab.)

Rows and slots

Every header has the same three rows. Each row has slots that hold elements.

Row	Desktop slots	Mobile slots
Top bar	Left, Center, Right (or one Full width slot)	Full width
Main header	Left, Center, Right (or one Full width slot)	Left, Center, Right
Header bottom	Left, Center, Right (or one Full width slot)	Full width

A row that’s hidden in the current view shows a “Hidden on desktop” or “Hidden on mobile” tag.

Header settings

Setting	What it does	Default
Full width	Stretches the header contents across the full screen width.	Off
Sticky	Keeps the header (its sticky rows) at the top while shoppers scroll.	On
Sticky effect	How the header sticks: stick or slide.	stick
Hide on scroll	Hides the header while scrolling down.	Off
Sticky shadow	Draws a shadow under the header while it’s stuck.	On

Row settings

Setting	What it does	Default
Height	Row height on desktop, in pixels (24 to 200).	56
Mobile height	Row height on mobile, in pixels (24 to 200).	56
Hide desktop	Hides the row on desktop.	Off
Hide mobile	Hides the row on mobile.	Off
Sticky	Makes this row stick at the top when scrolling.	Off
Row columns	3 gives Left, Center and Right slots; 1 gives one Full width slot on desktop. Elements in the three slots are kept and come back if you switch back to 3.	3
Row flex layout	With 3 columns: “Which columns absorb the row’s leftover width.” Flexible centre or Flexible sides.	Flexible sides

Elements

Element settings are grouped into General and Style tabs in each element’s window. An element with no settings says “This element has no settings — drop it in and it renders as-is.”

Element	Shows	Where allowed	Settings (default)
Logo	Your logo	Desktop, mobile	Image (empty = the default brand mark and store name) · Width 150 px (30 to 500) · Add dimensions (on)
Menu	Links from a WordPress menu	Desktop, mobile	The menu (listed as “Menu id”; pick from “— Select a menu —”). Style: Menu style Default, Underline, Border, Separated, Background (Default) · Align Left, Center, Right (Left) · Gap Small, Medium, Large (Large) · Items color, Items color hover, Items bg color, Items bg color hover (empty = follow the Colors tab)
Icon Menu	A strip of links with icons or images	Desktop, mobile	Up to 20 items. Each item: Links to a Category, Brand, Page or Custom URL; Visual: Icon (search over 2,000 icons), Image or None; Label (optional; falls back to the category or brand name). Icon position Above label or Beside label (Above) · Icon size Small, Medium, Large (Medium) · the same Style settings as Menu
Categories	A categories drop-down	Desktop, mobile	Label “All Categories” · Show icon (on) · Limit 10 (1 to 20) · Show count (on) · Show view all (on)
Brands	A brands drop-down	Desktop, mobile	Label “Brands” · Show icon (on) · Limit 12 (1 to 24) · Show count (on) · Show view all (on)
New	A link to the newest products	Desktop, mobile	None
Sale	A link to products on sale	Desktop, mobile	None
Search (search form)	A search box	Desktop, mobile	Display form or icon (form)
Account	Sign-in link, or the account for signed-in shoppers	Desktop, mobile	Display Text, Icon, Icon with text (Icon with text) · Show username (off; text modes only: “Replace the default text with the username when the user is logged in.”) · Text design (three looks) · Icon design First to Fourth
Cart	The cart, opening the mini cart	Desktop, mobile	Show count (on) · Display (Icon with text) · Text design · Icon design
Wishlist	The wishlist	Desktop, mobile	Show count (on) · Display (Icon with text) · Text design · Icon design
Compare	The compare list	Desktop, mobile	Show label (on) · Show count (on). Its icon comes from the Compare tab.
Mobile menu	The burger icon that opens the mobile menu	Mobile only	Menu (none = the desktop menu’s links) · Show wishlist (on) · Show compare (on) · Show account (on) · Drawer logo (“Shown at the top of the mobile menu instead of the store name.”) · Drawer logo width 120 px (40 to 300). Style: Menu style Divided, Plain, Background (Divided) · Item spacing Small, Medium, Large (Medium) · four item colours
Search (mobile search)	A mobile search box or icon	Mobile only	Display form or icon (form)
Text/HTML	Plain text or simple formatted text	Desktop, mobile	Text/HTML content (links, paragraphs, lists, headings, bold and italic are kept) · Display inline · Additional CSS class
Space	Horizontal spacing	Desktop, mobile	Width 20 (4 to 200)
Divider	A thin vertical line	Desktop, mobile	Color (empty = follow the Colors tab) · Full height (on)

Good to know about elements:

• The Menu element shows only a menu’s top-level items.
• An element placed in a view it isn’t allowed in (for example a Mobile menu on desktop) is removed when you save.
• Icon Menu items whose category or brand was deleted show “Missing item” in the editor and are hidden on the storefront. On mobile, an Icon Menu’s settings offer Copy items from desktop.
• The Wishlist and Compare elements only appear on the storefront while those features are switched on (on their own tabs).
• The Text/HTML element’s Display inline and Additional CSS class are saved but not used by the storefront yet.

Pages an Icon Menu item can link to

Home, Shop, Category collections, Brands collection, Blog, Compare, About us, Contact us, FAQ, Shipping, Returns & refunds, Find a store, Privacy policy, Terms & conditions, Cookies policy, Imprint.

The built-in Default header

A fresh install shows this layout, also used by Blank and Classic:

Row	Desktop	Mobile
Top bar (40 px, hidden on mobile)	Text “Free delivery on orders over €80” on the left, “Need help? Call Us” on the right	Hidden
Main header (72 px; 64 px on mobile; sticky)	Logo · search · cart and account	Burger · logo · cart
Header bottom (48 px; 56 px on mobile; sticky)	A menu with Home, Shop, Blog, About Us and Contact Us on the left; Categories, Compare and Wishlist on the right	A full-width search

Fix two links in the built-in menu

In the built-in header (and the Logo centered preset), About Us links to /about and Contact Us to /contact. The storefront’s pages live at /about-us and /contact-us. These built-in links can’t be edited in the element’s form, so replace them with a menu of your own:

1. Under Appearance › Menus, create a menu (for example “Main navigation”) with Custom Links to /, /shop, /blog, /about-us and /contact-us.
2. In the header editor, Edit the Menu element in the Header bottom row, choose your new menu and click Save header.

Change the top bar’s “Free delivery…” text to match your own offer, too.

Troubleshooting

Symptom	Likely cause	What to do
The preview says “This is a simplified mock”	No Storefront URL, or the storefront isn’t reachable	Set it on the General tab.
My changes disappeared	You clicked Back before Save header	Make them again and save first.
The header didn’t change on the storefront	You edited a header that isn’t the default, or 5 minutes haven’t passed	Click Set as default on it; wait and reload.
The menu shows no drop-down items	The header Menu uses top-level items only	Put the links you need at the top level of the menu.
An element vanished after saving	It isn’t allowed in that view	Use the mobile-only elements on Mobile only.
The menu is empty	No menu picked, or the menu was deleted	Edit the element and choose a menu.

Next steps

Footer and mobile barThe footer builder, the mobile tab bar and social links.

Colors and dark modeThe colours every header element follows.

Theming and layoutWhat shoppers see.

Customers and engagementSwitch the wishlist and compare features on.