Header

What this section does

Site navigation header with logo, menu, and actions

Where it goes

• Can be used at most 1 time(s) on one page.
• This section is in every plan — no extra plugin needed.

Styles

Different looks for the same section. You can change the style later; your content stays as it is.

The first 2 styles of every section are open on every store. The rest unlock with the Page Editor plugin — all at once, not style by style.

• Classic — The Ledger

  Freestandard

  Drafting-table precision: hairline-ruled bar, index-numbered nav with center-out underlines, and a row-morph search whose results drop as an animated ledger.

• Top Bar

  Freetopbar

  Clean single-row header with logo left, nav center, actions right — pairs with the announcement bar

  Specific to this style: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible

• Editorial — The Front Page

  Page Editoreditorial

  Oversized serif masthead; search opens a typesetter sheet with a giant serif input and an editorial index of results.

  Specific to this style: editorialTagline

• Cinematic Luxe — The Première

  Page Editorcinematic-luxe

  Transparent over the hero with light-catch nav; search fades the page to black and results slide in as a film-strip rail.

  Specific to this style: taglineScript, scriptFont, scrollMorphEnabled, scrollShrinkAmount

• Magnetic Pill — The Attractor

  Page Editormagnetic-pill

  Liquid-blob hover follower that pulls toward the cursor; search morphs the blob itself into the input, results fan out as magnetic glass chips.

  Specific to this style: magneticStrength, morphingHover, pillBlur

• Glass Pill — The Capsule

  Page Editorfloating-island

  One floating frosted capsule; search stretches the capsule itself into a wide field and results float below as a detached glass card.

• Marquee — The Ticker Desk

  Page Editormarquee-editorial

  A kinetic keyword ticker; search pauses the ticker and takes over the strip, results cascade as bold uppercase rows.

  Specific to this style: marqueeItems, marqueeSpeed, marqueeDirection, marqueeRepeatToFill, marqueeBgColor, marqueeTextColor, oversizedNavSize, editorialLogoPosition

• Drawer — The Cloakroom

  Page Editordrawer-nav

  Two-layer drawer with tag-chip links that settle like hanging tags; search flips the same drawer into numbered claim-ticket results.

  Specific to this style: drawerTriggerLabel

• Commerce — The Concourse

  Page Editorcommerce-mega

  The search-first department desk: a departure-board search whose results flip in like a station board, with a live category rail.

  Specific to this style: utilityLinks

• Command Bar

  Page Editorcommand-bar

  Search-first masthead with a centered command-palette pill and minimal actions

• Island

  Page Editordynamic-island

  A clean bar that fluidly condenses into a floating island pill on scroll; search stretches the island itself into a wide capsule.

• Dock

  Page Editordock-nav

  Nav items magnify toward the cursor like a dock; the search item unfurls into an inline field and results magnify on hover.

• Bento

  Page Editorbento-board

  Every header element is a rounded bento tile; the search tile expands across the strip and results assemble as a bento board.

• Origami

  Page Editororigami-fold

  Paper-crisp bar whose nav labels crease like folding paper; search opens a pleated sheet unfolding pleat by pleat.

• Frost — The Veil

  Page Editoraurora-mega

  Serene frosted-glass flagship: calm underline hovers, frost-on-scroll, and a quiet veil search. No glow, no gradients.

  Specific to this style: ctaText, ctaHref, ctaStyle

• Spotlight — The Stage

  Page Editorspotlight-mega

  A cursor-tracking spotlight pill; search dims the page and lights a single beam over the input, results warm up like stage lights.

  Specific to this style: ctaText, ctaHref, ctaStyle

• Velvet — The Playbill

  Page Editorvelvet-overlay

  Fullscreen curtain menu with numbered entries; search lives inside the curtain and replaces links with oversized numbered results.

  Specific to this style: ctaText, ctaHref

• Emporium — The Bazaar Desk

  Page Editoremporium-mega

  Three-zone counter with split-flap menu toggle and rolling pills; search expands into the counter and slides out a perforated media-card tray.

  Specific to this style: social, showUtilityRow, announcementText, announcementHref, utilityLinks, menuToggleLabel, navCollapsedByDefault

• Maison

  Page Editormaison

  Quiet luxury — a letter-spaced serif wordmark centered over a hairline, an inline search that grows from its icon, and a tracked-uppercase nav whose accent underline grows from the center. Editorial mega with a campaign panel.

• Glasshouse

  Page Editorglasshouse

  Glassmorphism — a transparent header floating over a gradient hero that frosts into a solid surface on scroll. Frosted hover mega, full-header search overlay, avatar dropdown.

• Nightdrive

  Page Editornightdrive

  Dark-first tech — deep ink with a single neon accent, angular cut corners, a sliding neon underline, a spec-sheet mega, push-aside search and a live notification bell.

• Botanica

  Page Editorbotanica

  Soft organic — warm neutrals, a rounded pill nav, a leaf mark, a dismissible announcement bar, a rounded imagery mega with a 'New in' badge and a bottom-sheet mobile drawer.

  Specific to this style: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible

• Volt

  Page Editorvolt

  Bold gradient commerce — a chunky wordmark, a floating pill nav, and an electric indigo→magenta→amber gradient on the logo, CTA and accent strip. Click-open mega tiles and an animated cart badge.

  Specific to this style: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible, gradientFrom, gradientVia, gradientTo, ctaText, ctaHref, ctaStyle, searchHintChips, searchSuggestHeading, secondaryAccentColor, profileTrigger

• Aurora Island

  Page Editoraurora-island

  Floating island — a detached rounded glass island floating over an animated aurora hero that shrinks and blurs on scroll, with a floating mega card, a search that morphs the island and an avatar dropdown.

  Specific to this style: gradientFrom, gradientVia, gradientTo

• Vertica

  Page Editorvertica

  Side rail — a slim left icon rail that expands on hover to reveal labels, with flyout submenus and profile + cart pinned to the bottom. On mobile it becomes a top bar with a left drawer.

  Specific to this style: railExpandOnHover

• Bazaar

  Page Editorbazaar

  Marketplace utility — a two-tier header with a top strip and a big bordered search plus an 'All Categories' segment, live suggestions, a category ribbon and a left department drawer with a nested accordion.

  Specific to this style: showTopbar, topbarContent, topbarLink, topbarLinkNewTab, topbarBackgroundColor, topbarTextColor, topbarDismissible, showCategoryRibbon, searchCategorySelect, departmentsLabel, showUtilityRow, utilityLinks

• Kiosk

  Page Editorkiosk

  Fresh grocery — a colour-blocked double-deck header with a curved pill search, a delivery-slot pill, a scrollable category chip row with per-chip mega, and a right-side cart drawer with live subtotal.

  Specific to this style: showCategoryRibbon, deliverySlotText, deliverySlotHref, cartTrigger

• Glass Shell

  Page Editorglass-shell

  A floating rounded frosted-glass card at the top of the page: large centred logo with the nav centred beneath it. Not sticky.

Settings

The fields you see in the Section Settings panel on the right when this section is selected.

Shared by every style

• bg
• textColor
• accentColor
• backgroundOpacity
• backdropBlur
• borderBottom
• borderColor
• borderWidth
• shadow
• borderRadius
• logo
• logoSize
• logoBorderRadius
• showCompanyName
• companyName
• altLogo
• altLogoPages
• logoPosition
• companyNameStyle
• logoBackground
• logoPadding
• navLinks
• navStyle
• navFontFamily
• navFontSize
• navItemFontWeight
• navSpacing
• navAlignment
• submenuStyle
• submenuWidth
• megaMenuOpenStyle
• megaMenuAnimationDuration
• megaMenuShowOverlay
• megaMenuOverlayColor
• megaMenuOverlayOpacity
• megaMenuOverlayBlur
• megaMenuPanelStyle
• megaMenuPanelBackgroundColor
• megaMenuPanelOpacity
• megaMenuPanelBackdropBlur
• navItemTextColor
• navItemHoverBgColor
• navItemHoverTextColor
• navItemActiveBgColor
• navItemActiveTextColor
• navItemTextTransform
• navItemLetterSpacing
• navItemBorderRadius
• showSearch
• searchPlaceholder
• searchDropdownMaxItems
• searchShowRecent
• searchIcon
• searchInProducts
• searchInCategories
• searchInBlog
• searchInServices
• searchInCampaigns
• searchVariant
• searchStyle
• searchTriggerAsInput
• searchSize
• searchIconPosition
• searchExpandable
• searchBackgroundColor
• searchBorderColor
• searchTextColor
• searchIconColor
• searchDropdownWidth
• searchShowCategories
• searchDropdownBackgroundColor
• searchDropdownOpacity
• searchDropdownBackdropBlur
• searchResultItemTextColor
• searchResultItemHoverBgColor
• searchResultItemHoverTextColor
• searchResultItemPriceColor
• searchResultItemBorderColor
• showCart
• cartIcon
• showWishlist
• wishlistIcon
• favoriteBadgeDisplay
• showNotifications
• iconSize
• iconStyle
• buttonStyle
• buttonShape
• badgeStyle
• actionsSpacing
• badgeColor
• badgeTextColor
• iconColor
• showUser
• profileIcon
• profileInitials
• guestIconStyle
• profileIconColor
• profileIconBackgroundColor
• showProfileAccountInfo
• showProfileOrders
• showProfileDownloads
• showProfileFavourites
• showProfileAddresses
• showProfileReviews
• showProfileAppointments
• showProfileReservations
• showProfileApplications
• showProfileNotifications
• showProfileContactMessages
• showThemeToggle
• showMobileProfileMenu
• profileDropdownBackgroundColor
• profileDropdownTextColor
• profileDropdownHoverBackgroundColor
• profileDropdownHoverTextColor
• sticky
• stickyOffset
• transparentUntilScroll
• scrollTriggerPixels
• transparentUntilScrollPages
• height
• paddingX
• overlayLogo
• overlayTextColor
• overlayNavItemTextColor
• overlayIconColor
• overlayLogoTextColor
• overlayNavItemHoverTextColor
• overlayBorderColor
• overlayBadgeColor
• overlaySearchTextColor
• overlaySearchIconColor
• overlaySearchBorderColor
• mobileBreakpoint
• mobileMenuStyle
• mobileDrawerSide
• mobileShowSearch
• mobileShowLogo
• hamburgerPosition
• hamburgerStyle
• contentMaxWidth