Header

What this section does

Site navigation header with logo, menu, and actions

Where it goes

• Can be used at most once 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.

• Icon Tile Mega

  Page Editoricon-tile-mega

  A white bar that shrinks on scroll: logo, a left-aligned nav whose hover panels are icon tiles (side image, flyouts, a promo card, featured, new and coming-soon tiles), an inline search, cart and a solid sign-in button.

  Specific to this style: accountButtonText, shrinkOnScroll

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
• overlayLogo
• 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
• navItemBgColor
• 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
• iconColor
• iconHoverColor
• actionButtonBgColor
• actionButtonHoverBgColor
• badgeColor
• badgeTextColor
• cartIconColor
• wishlistIconColor
• 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
• overlayTextColor
• overlayLogoTextColor
• overlayNavItemBgColor
• overlayNavItemTextColor
• overlayNavItemHoverBgColor
• overlayNavItemHoverTextColor
• overlayNavItemActiveBgColor
• overlayNavItemActiveTextColor
• overlayBorderColor
• overlayIconColor
• overlayIconHoverColor
• overlayActionButtonBgColor
• overlayActionButtonHoverBgColor
• overlayBadgeColor
• overlayBadgeTextColor
• overlaySearchIconColor
• overlayCartIconColor
• overlayWishlistIconColor
• overlayProfileIconColor
• overlayProfileIconBackgroundColor
• overlaySearchTextColor
• overlaySearchBorderColor
• mobileBreakpoint
• mobileMenuStyle
• mobileDrawerSide
• mobileShowSearch
• mobileShowLogo
• hamburgerPosition
• hamburgerStyle
• mobileDrawerTone
• mobileDrawerBackgroundColor
• mobileDrawerTextColor
• mobileDrawerMutedTextColor
• mobileDrawerBorderColor
• mobileDrawerAccentColor
• mobileDrawerTitleMode
• mobileDrawerTitle
• mobileDrawerLinkSize
• contentMaxWidth
• logoFocal
• overlayLogoFocal
• altLogoFocal