Header

The header is the most architecturally complex part of Hyprism. It supports 12 layout combinations (4 base positions × 3 logo placements), three nav modes, composable glass / 3D / glow button effects, pill grouping, a mobile burger drawer with effect-propagation, and a sticky-smart scroll behavior. This chapter walks through the actual schema surface.

The header is defined in sections/header.liquid and lives in the Header section group (top of the page editor). It cannot be removed; only customized. Two of its three sub-blocks (menu, megamenu_link, icon_item) carry additional settings; the Menu block is also the “token publisher” for action-button chrome (see §4.11).

Theme settings vs. Style overrides. The header renders the same Header group on every template — there is only one header, so the per-section “Style overrides” cannot produce a different header on different pages. They are just an alternate place to edit the same look. By default the section’s Use global header settings toggle (top of the “Style overrides” group in the section editor) is on, which hides the entire override block — edit the header from Theme settings → Header instead. Turn the toggle off only if you prefer editing those values inside the section editor.

4.1 Layout modes (12 combinations)

Two settings together pick the layout:

Setting	Options	Default
🔧 Position (header_position)	top / floating / left (sidebar) / right (sidebar)	top
🔧 Logo position (top + floating modes — logo_position)	left / center / right	center
🔧 Logo position (sidebar modes — logo_position_sidebar)	top / center / bottom	top

The customizer auto-shows the relevant logo-position setting depending on header_position — you never see both pickers at once.

All 12 combinations

Position	Logo	What it looks like
Top — Logo left	left	Classic e-commerce: brand on the left, nav center or right, actions right.
Top — Logo center	center	Boutique / fashion: centered brand, nav balanced on either side.
Top — Logo right	right	Editorial / RTL-friendly.
Floating — Logo left	left	Transparent header overlays the first section. Brand on the left.
Floating — Logo center	center	Centered floating brand — works well over hero images.
Floating — Logo right	right	Right-anchored floating brand.
Sidebar left — Logo top	top	Vertical sidebar on the left, logo at the top, nav below.
Sidebar left — Logo center	center	Sidebar with the logo in the vertical middle.
Sidebar left — Logo bottom	bottom	Logo at the bottom of the sidebar (rare).
Sidebar right — Logo top	top	Mirror of sidebar-left with logo at top.
Sidebar right — Logo center	center	Mirror sidebar with centered logo.
Sidebar right — Logo bottom	bottom	Mirror sidebar, bottom-anchored logo.

Position-specific extras

Setting	Visible when	What it does
🔧 Floating overlay (floating_overlay)	position = floating	When on, the floating header sits over the first section’s content; first section gets negative top-padding so its content starts at the page top. Off → first section gets normal top-padding to clear the floating header.
🔧 Sticky mode (sticky_mode)	position = top	off / always / on-scroll-up (the “show-on-scroll-up, hide-on-scroll-down” sticky-smart pattern).
🔧 Header at top of page (header_top_state)	position = top	visible / transparent-on-top (background fades in once the visitor scrolls past the first section, ≈60% of the viewport) / hidden-until-scroll (header is hidden at page-top, appears on scroll).
🔧 Nav alignment (nav_alignment)	top/floating positions, logo not centered	auto (nav centered in the space between logo and actions) / left (nav pushed towards the logo) / right (nav pushed towards the actions) / viewport (nav centered to the viewport regardless of logo/actions width).
🔧 Nav edge padding (nav_edge_padding)	top/floating positions	Range 0–80px, step 2. Extra horizontal space pushing the nav inward from the logo/actions. ✅ Default 0.
🔧 Sidebar nav position (sidebar_nav_position)	sidebar positions	top / center / bottom — where the nav sits within the sidebar’s vertical space.

When to use which

• Top + Logo left — universally readable, works for almost any brand. Default choice.
• Top + Logo center — fashion, beauty, boutique. The centered logo creates symmetry; can use a slightly larger logo without crowding.
• Floating — image-led stores. The hero image extends behind a transparent header.
• Sidebar — distinctive, editorial. Best for stores with short menus (≤5 items) and big imagery. Sidebar steals horizontal content space, so make sure your hero/grid is designed for it.

Header size & appearance

In Theme settings → Header → Layout / Appearance (and per-section under Style overrides when “Use theme header settings” is off):

Setting	What it does
🔧 Min height (header_height)	Range 50–120px, step 5. ✅ Default 70.
🔧 Horizontal padding (header_padding_x)	Range 0–60px, step 4. ✅ Default 20.
🔧 Vertical padding (header_padding_y)	Range 0–20px, step 2. ✅ Default 0.
🔧 Corner radius (border_radius)	Range 0–24px, step 2. ✅ Default 0.
🔧 Background opacity (bg_opacity)	Range 0–100, step 5. ✅ Default 100. Lower values let content show through (pairs with glass / floating header).
🔧 Hide header body (hide_header_body)	Hides the main header bar (leaving only the announcement / utility row). ✅ Default off.

Country / language selector

Setting	What it does
🔧 Show country / language selector (show_locale_selector)	Adds the country / language picker to the header actions. ✅ Default off.
🔧 Show flag (locale_show_flag)	Shows the country flag in the selector. Visible when the selector is on. ✅ Default on.

4.2 Logo

Setting	What it does
🔧 Logo width (logo_width)	Pixels (range 40–200, default 120). Sets the maximum width of the logo image. The image scales down on mobile automatically (no separate mobile setting).

The logo image itself is not picked in the Header section — it comes from Theme settings → Branding (settings.logo). Dark-mode logo swap is handled via Theme settings → Branding’s logo_inverse (the alternate logo) plus the global enable_dark_light_toggle. The Header section just respects whatever the Branding settings provide.

💡 If you want a header-specific logo (different from the brand logo), upload your variant as settings.logo and any place that displays the brand identity will use it. The theme does not support a per-Header logo override — by design, brand identity is one global choice.

4.3 Nav mode

The nav mode lives on the Menu block inside the Header (not on the section itself). Three options:

nav_mode	What it is
text (default)	Nav items rendered as text links (with optional button chrome on hover or via nav_button_style).
icon	Nav items rendered as icon-only buttons. Only useful when each menu link has an associated icon (set up via icon_item blocks inside megamenu panels).
burger	Nav is hidden behind a burger icon at all viewport widths. Clicking opens the mobile-style drawer with the full nav. Use this for ultra-minimal layouts.

Source menu:

Setting	What it does
🔧 Menu (menu)	Shopify menu picker. ✅ Default main-menu. Sets which Shopify navigation menu drives the header nav.

There is no separate “megamenu” mode — megamenu behavior is enabled per-link via the megamenu_link block (see §4.11.2). A nav link with children in Shopify Admin gets a dropdown by default; a megamenu_link block adds richer panel layouts (columns, featured products, promo card). There is no “mixed” mode either — the rendering is automatic per link.

4.4 Action buttons (search, account, wishlist, cart, theme toggle)

The header right-side (or sidebar bottom) holds action buttons. Each button has different visibility rules:

Icon	Always shown?	Toggle source
Search	When show_search = true (gated by use_theme_header_settings = false or theme-settings level)	Header section settings or Theme settings → Header → Search
Account	When shop.customer_accounts_enabled (Shopify Admin setting)	Auto — no per-header toggle
Wishlist	When show_wishlist_link = true AND settings.enable_wishlist = true (theme-side wishlist master toggle)	Header section settings → “Show wishlist link”
Cart	Always on. Always shows the bag icon with the item-count badge.	n/a
Theme toggle	When settings.enable_dark_light_toggle = true AND settings.dark_light_toggle_position = 'header'	Theme settings → Dark/Light toggle

Search-related settings (Header section + Theme settings → Header):

Setting	What it does
🔧 Show search (show_search)	Adds the search icon. ✅ Default on.
🔧 Search style (search_style)	popover (search expands into a centered overlay with predictive results) / page (icon links to /search; no overlay). ✅ Default popover.
🔧 Search position (search_position)	actions (search icon among the other action buttons) / logo (search icon next to the logo) — only available with logo_position = left or right. ✅ Default actions.

Wishlist-related:

Setting	What it does
🔧 Show wishlist link (show_wishlist_link)	Adds the heart icon. ✅ Default off. Also requires the theme-wide wishlist toggle.
🔧 Wishlist URL (wishlist_url)	URL the heart icon links to. ✅ Default /pages/wishlist. Override for custom wishlist routes.

Action-button color + shape (Theme settings → Header + Menu block)

The action-icon container (the round / pill / square chip behind each icon) is driven by a mix of theme-level and Menu-block-level tokens. All action icons share the same chrome — there is no per-button shape configuration.

Shape — from Menu block:

Setting (Menu block)	What it does
🔧 Button style (nav_button_style)	none (no chrome — icons sit as inline glyphs) / rounded (8 px corner radius) / pill (fully round) / square (0 px). ✅ Default none.
🔧 Button height (nav_btn_height)	24–60 px. ✅ Default 36.
🔧 Button horizontal padding (nav_btn_padding_x)	6–40 px. ✅ Default 14. Hidden when Button style = None.
🔧 Hover style (hover_button_style)	Only shown when Button style = None. A button shape that appears on hover only (the resting state stays plain text/icon): none / rounded / pill / square. Applies to nav links, the action icons, and panel dropdown links. ✅ Default none.
🔧 Underline on hover (hover_underline)	Only shown when Button style = None. Underlines nav links + panel dropdown links on hover; action icons get an equivalent short bar beneath the glyph. ✅ Default off.
🔧 Bold on hover (hover_bold)	Only shown when Button style = None. Bolds nav links + panel dropdown links on hover (faux-weight via -webkit-text-stroke, no row reflow); action icons get a thicker SVG stroke. ✅ Default off.

Source 2026-05-23: Button background color and opacity settings (nav_btn_bg_color + nav_btn_bg_opacity) were removed. Header buttons now read from scheme.button + scheme.button_bg_hover directly. Use the active Color Scheme (or the new Theme settings → Header → “Use custom color schemes for header buttons” toggle) to control button colors independently.

Shape control — from Theme settings → Header:

Setting	What it does
🔧 Apply shape to actions (apply_shape_to_actions)	When off, only the nav links get the shape from nav_button_style; action icons stay plain. When on (default), action icons also get the shape.

Nav link & action icon colors (Theme settings → Header → Buttons):

Nav links and action icons (search / account / cart) are unified by default — both follow the single Color source role below. Turn on Split action icon colors to give the icons their own role.

Setting	What it does
🔧 Color source (header_btn_color_role)	The text style both nav links and action icons follow in the resting state: Text / Muted text / Link / Accent / Heading / Button label. ✅ Default Link.
🔧 Hover color source (header_btn_hover_color_role)	The text style nav links + action icons switch to on hover: Same as normal / Text / Muted text / Link / Accent / Heading / Button label. ✅ Default “Same as normal” (keeps the resting color; let underline / bold / hover shape carry the hover cue).
🔧 Hover background source (header_btn_hover_bg_role)	Which scheme color the hover box uses — Button background (hover) / Button background / Accent / Glass tint. Only has a visible effect when a shape is active (Button style, Hover style, or pill grouping); in plain “None / None” mode there is no hover box. ✅ Default Button background (hover).
🔧 Split action icon colors (header_btn_split_action_colour)	By default the action icons share the nav-link Color source above. Turn this on to give the action icons (search / account / cart / theme toggle) their own color role, independent of the nav links. ✅ Default off.
🔧 Action icon color (header_btn_action_color_role)	Visible when Split is on. Resting color role for the action icons only: Text / Muted text / Link / Accent / Heading / Button label. ✅ Default Accent.
🔧 Action icon hover color (header_btn_action_hover_color_role)	Visible when Split is on. Hover color role for the action icons only: Same as normal / Text / Muted text / Link / Accent / Heading / Button label. ✅ Default Same as normal.

Both nav text-links and action icons read the --ne-hbtn-plain-text / --ne-hbtn-hover-text vars, so they match by default; turning on Split action icon colors routes the icons to their own role instead. Glow/3D button modes only set box-shadow, so they don’t interfere. Composes with the custom-scheme toggle below: when a custom scheme is active, the chosen color role is resolved against that scheme.

Custom color schemes for header buttons (Theme settings → Header → Buttons):

Setting	What it does
🔧 Use custom color schemes for header buttons (header_btn_custom_schemes)	When on, the header buttons + action icons read their colors from one (or two) user-picked schemes instead of inheriting from the active page scheme. Useful when nav buttons need to stand out against the rest of the theme. ✅ Default off.
🔧 Dark mode scheme (header_btn_scheme_plain)	Visible when toggle on. Drives BOTH plain text + plain bg AND hover text + hover bg in dark mode. ✅ Default scheme-1.
🔧 Light mode scheme (header_btn_scheme_hover)	Visible when toggle on AND settings.enable_dark_light_toggle = true. Mirror of the dark-mode picker for the alternate mode. ✅ Default scheme-2.

Each picked scheme provides four colors — scheme.button (plain bg), scheme.button_label (plain text), scheme.button_bg_hover (hover bg), scheme.button_text_hover (hover text) — and the header buttons + action icons (search/account/cart/theme-toggle) all read from them. Mode-swap is handled via the global html[data-ne-mode] attribute so the colors follow the dark/light toggle even when the picked schemes differ from the page’s active scheme.

Action-button effects (Theme settings → Header → Appearance / Buttons)

Effects compose — glass, 3D, and glow can all be on at once.

Setting (Theme settings → Header)	What it does
🔧 Glassmorphism (enable_glass)	Header-level glass surface — applies the global glass-blur/opacity tokens to the header background. ✅ Default on.
🔧 Tint glass with accent (glass_tint)	When glass is on, tints the blur with the scheme’s accent color for a branded feel. ✅ Default off.
🔧 Header effect (header_effect)	none / shadow (hard drop-shadow under the header) / glow (accent-colored glow around the header). ✅ Default none.
🔧 Glow intensity (glow_intensity)	10–100, mapped to opacity + spread of the glow. Only visible when header_effect = glow. ✅ Default 50.
🔧 Effect scope (effect_scope)	header_only (effect only on the header band) / buttons_only (only on action buttons) / both. ✅ Default both.
🔧 Apply glow to logo (apply_glow_to_logo)	Adds the accent glow to the logo itself. Only visible when header_effect is glow or shadow. ✅ Default off.
🔧 Logo glow uses accent (logo_glow_accent)	Tints the logo glow with the scheme accent. Visible when header_effect = glow and Apply glow to logo is on. ✅ Default off.
🔧 3D nav buttons (nav_btn_3d)	Independent toggle. When on, nav + action buttons get a pre-lifted baseline (translateY(-4px) + soft accent-glow halo 0 0 14px @ 0.5 alpha) and a deeper hover (translateY(-7px) + 0 0 22px @ 0.7 alpha). Same exact values as the button-block --fx-lift + --fx-glow combo so 3D headers match the rest of the theme’s primary buttons. ✅ Default off.
🔧 Glass nav buttons (nav_btn_glass)	Independent toggle. When on, nav + action buttons get a frosted-glass surface (inner gradient highlight + glass-border + inset white/black rim shadows + backdrop-filter blur). Works independently of enable_glass — the gradient + highlights provide the “glass” look even when the header bar itself is opaque. Hover keeps the same character (subtle gradient + brightened scheme.button_bg_hover underneath). ✅ Default off.

💡 The header’s glass + the buttons’ glass are independent — you can have transparent buttons over a solid header, or glass buttons over a transparent header, etc. Effects compose well; experiment with all 8 combinations of enable_glass / nav_btn_glass / nav_btn_3d / header_effect: glow to find the look that fits your brand.

4.5 Pill grouping

Pill grouping wraps the nav menu and/or action buttons in a single rounded container (“pill”) for a compact, polished look.

Setting (Theme settings → Header → Buttons)	What it does
🔧 Pill grouping (pill_grouping)	off / nav (only nav menu in a pill) / actions (only action buttons in a pill) / both (separate pills around nav and actions). ✅ Default off.

The pill surface inherits the header’s glass + scheme settings — there are no separate pill-only color, padding, or shadow controls. When buttons are inside a pill, their individual button-effect shadow is auto-stripped (otherwise you’d see border-on-border or doubled shadows); the pill container takes over the visual chrome role.

✅ Pill grouping is a quick visual upgrade — it makes the header look polished without changing the layout. Recommended pairing: pill_grouping = both + nav_button_style = none (clean text links inside a single pill) + enable_glass = on (translucent pill over content).

4.6 Mobile drawer (burger mode + small viewports)

The drawer appears when:

• nav_mode = burger (always shown via burger icon at all viewports), OR
• Viewport ≤ 749 px (mobile breakpoint — drawer auto-engages regardless of nav_mode)

Drawer position + content settings (Header section):

Setting	What it does
🔧 Burger button position (mobile_burger_position)	left / right — which side of the header the burger icon sits. ✅ Default right.
🔧 Burger header content (burger_header_content)	shop_name (shows the shop’s name at the top of the drawer) / language (shows the locale selector at the top — if show_locale_selector is on) / none (no header content). ✅ Default shop_name.
🔧 Show cart in burger (show_cart_in_burger_mode)	Whether the cart icon appears next to the burger icon when in burger mode (otherwise only the burger is visible). ✅ Default on.
🔧 Locale selector in drawer (burger_locale_position)	off (no locale in drawer) / top (above nav links) / bottom (below nav links). ✅ Default off.
🔧 Drawer color scheme mode (burger_color_scheme_mode)	inherit (drawer uses the header’s scheme) / custom (pick a separate scheme below). ✅ Default inherit.
🔧 Drawer color scheme (burger_color_scheme)	Pick a scheme. Only visible when mode = custom. ✅ Default scheme-1.
🔧 Drawer footer padding bottom (burger_footer_padding_bottom)	0–120 px. ✅ Default 16. Space below the last drawer item to clear the iOS Safari home-indicator.

The drawer auto-includes: search (if enabled), account (if enabled), wishlist (if enabled), and the theme toggle (if it’s set to drawer position). Social-media icons appear if settings.show_social_in_header_burger is on (theme settings → Branding → Social profiles).

Effect propagation (drawer mirrors header effects)

This is a Hyprism-distinctive behavior. When the header has a button effect (3D, glass, glow), the drawer’s action icons (account, wishlist, theme toggle, close button, drawer-footer links) mirror that effect via a CSS html:has() rule. You don’t configure it separately; the drawer reads the header’s effect state through the document-level selector and applies the matching visual chrome.

4.7 Sticky behavior

Setting	What it does
🔧 Sticky mode (sticky_mode)	off / always (always stuck at the top) / on-scroll-up (header is visible at page-top, hides on scroll-down, slides back on scroll-up — the “sticky-smart” pattern). ✅ Default always. Only available with header_position = top.
🔧 Header at top of page (header_top_state)	visible (always opaque) / transparent-on-top (header background is fully transparent at page-top, fades to opaque after the visitor scrolls past the first section (≈60% of the viewport) — useful for image-led heroes that should bleed into the header) / hidden-until-scroll (header is hidden when the page is at the top, slides in once the visitor scrolls down). ✅ Default visible. Only available with header_position = top.

Sticky-smart “hide on scroll down, show on scroll up”

When sticky_mode = on-scroll-up, Hyprism’s implementation is translateY(-200%) for the hide animation — fully off-screen so the header doesn’t show even partially. Scroll back up → header slides back in over 250 ms.

There is no separate “backdrop on scroll” or scroll-threshold setting for the header itself — the header_top_state = transparent-on-top transition handles the equivalent “frosted overlay” behavior. There is also no built-in scroll-progress bar — if you want a reading-progress indicator, use a Custom Liquid section with a tiny JS snippet.

4.8 Announcement bar (top strip above the header)

The Announcement Bar is its own section (sections/announcement-bar.liquid) but lives in the Header section group, so it visually sits directly above the main header. To add it: customizer → Header group → Add section → Announcement Bar. See chapter 10 — Marketing §10.1 for the full settings reference.

4.9 Predictive search

When show_search = true and search_style = popover, clicking the search icon opens a full-width centered overlay with a search field and live results.

Setting	What it does
🔧 Search style (search_style)	popover (full overlay with predictive results) / page (icon links to /search, no overlay). ✅ Default popover.

The popover queries Shopify’s /search/suggest.json endpoint with resources[type]=product,collection,page,article&resources[limit]=6. There are no theme-level toggles to disable specific result types or change the limit — all 4 types render with up to 6 results each. The behavior is hardcoded to give merchants a sensible default; apps like Boost AI / Searchanise / Smart Search can replace it via App Embeds.

4.10 Common header configurations

Boutique / fashion

• Position: top + Logo center
• Nav mode: text (small menu, 3–5 items)
• Actions: Search + Account + Cart (no wishlist toggle)
• Pill grouping: off
• Effects: none
• Sticky mode: on-scroll-up

Clean and quiet — lets the photography lead.

Tech / electronics

• Position: top + Logo left
• Nav mode: text (with megamenu_link blocks on category links for multi-column dropdowns)
• Actions: Search + Account + Wishlist + Cart + Theme toggle
• Pill grouping: actions
• Effects: glass on header + glass nav buttons
• Sticky mode: always
• Header at top of page: transparent-on-top (clears for the hero)

Functional, dense, modern. Search is prominent (tech buyers search a lot).

Editorial / magazine

• Position: left (sidebar) + Logo top
• Nav mode: text (vertical menu in sidebar)
• Actions: Search + Account + Cart
• Pill grouping: off
• Effects: none
• Sticky: n/a (sidebar is intrinsically sticky)

Distinctive. Great for blog-heavy stores with strong long-form content.

Linux-rice (the Hyprism default vibe)

• Position: floating + Logo center
• Nav mode: text (with megamenu_link blocks for richer dropdowns)
• Actions: full set (Search, Account, Wishlist, Cart, Theme toggle)
• Pill grouping: both
• Effects: glass + glow (header_effect = glow, nav_btn_glass = on, nav_btn_3d optional)
• Sticky mode: on-scroll-up
• Header at top of page: transparent-on-top
• Floating overlay: on

All the effects compose — pills are glass, buttons are glass with glow, header is sticky-smart, content slides behind on scroll.

4.11 Block reference — header sub-blocks

The header has three internal block types: menu, megamenu_link, and icon_item. The Menu block holds the nav source + chrome tokens; megamenu_link enriches per-link dropdowns; icon_item adds icon-grid layouts inside megamenu panels.

4.11.1 Menu block (menu)

The block that holds the nav menu selection AND publishes the chrome tokens (action-button style, dropdown style, etc.) used everywhere else in the header. Every Header has exactly one Menu block.

Nav source:

Setting	What it does
🔧 Menu (menu)	Pick a Shopify navigation menu (set up in Shopify Admin → Online Store → Navigation). ✅ Default main-menu.

Nav style:

Setting	What it does
🔧 Nav mode (nav_mode)	text (default plain text links) / icon (icon-only buttons — requires icon_item blocks per menu entry) / burger (nav fully hidden, drawer-only at all viewport widths).
🔧 Nav gap (nav_gap)	0–24 px between nav items. ✅ Default 4.
🔧 Action icon padding (action_padding_x)	0–20 px horizontal padding inside each action icon button. ✅ Default 0.
🔧 Nav font role (nav_font_role)	body (default) / subheading / heading / accent — pulls the nav font from one of the 4 theme typography roles.
🔧 Nav font size (nav_font_size)	Range 10–24, step 1. ✅ Default 14.

Button style (drives both nav items + action icons):

Setting	What it does
🔧 Button style (nav_button_style)	none (no chrome — text-only or plain icons) / rounded (8 px corner radius) / pill (fully round) / square (0 px). ✅ Default none.
🔧 Button height (nav_btn_height)	24–60 px. ✅ Default 36.
🔧 Button horizontal padding (nav_btn_padding_x)	6–40 px. ✅ Default 14.

Source 2026-05-23: nav_btn_bg_color + nav_btn_bg_opacity removed. Header buttons read directly from the active scheme (scheme.button plain / scheme.button_bg_hover hover). For an override independent of the rest of the page, use Theme settings → Header → Use custom color schemes for header buttons (Dark + Light mode pickers when DL toggle is on).

Dropdown:

Setting	What it does
🔧 Dropdown style (dropdown_style)	panel (large centered megamenu panel — when the menu link has children in Shopify Admin) / buttons (smaller pill-styled dropdown anchored to each link). ✅ Default panel.
🔧 Show button backgrounds (buttons_show_bg)	When dropdown is open, do the source nav-buttons keep their bg highlight? ✅ Default on.
🔧 Dropdown animation (dropdown_animation)	none / fade / slide / scale. ✅ Default fade.
🔧 Dropdown animation speed (dropdown_animation_speed)	Range 20–200, step 10. ✅ Default 50.
🔧 Dropdown color scheme mode (dropdown_color_scheme_mode)	inherit (use header’s scheme) / custom (pick scheme below). ✅ Default inherit.
🔧 Dropdown color scheme (dropdown_color_scheme)	Pick scheme when mode = custom. ✅ Default scheme-1.

💡 Dropdown background follows the header’s state (panel dropdowns): if Glassmorphism is on → the dropdown is a frosted glass panel; if the header is transparent-on-top (and glass off) → at the top of the page the dropdown is fully transparent (links float over the hero), and once you scroll into the header’s solid state it becomes a solid scheme panel; otherwise → a solid scheme panel. So a “tinted/see-through” dropdown over your hero almost always means glass is on OR the header is transparent-on-top — not a dropdown setting.

💡 Dropdown links inherit the nav Button style / Hover style. Whatever you set under Action-button color + shape (§4.4) now also applies to the links inside a panel dropdown: a resting Button style turns each item into a button chip; Underline / Bold on hover apply to the dropdown items too. With underline/bold only (no hover shape), the dropdown’s default hover-highlight block is dropped so the hover is just the text cue — matching the top-level nav links.

💡 The Menu block is the token publisher for the entire header’s button chrome (Search, Account, Wishlist, Cart, Theme toggle). Settings on this block propagate to every action button through CSS custom properties. Don’t expect per-button styling — it lives on the Menu block, applying universally.

4.11.2 Megamenu Link block (megamenu_link)

When a nav link in the main menu has children in Shopify’s navigation, those children appear in a dropdown. A megamenu_link block enriches that dropdown with extra columns, featured products, or a promo card. Add one per nav link that needs the rich panel layout.

Panel header:

Setting	What it does
🔧 Panel heading (panel_heading)	Optional title at the top of the megamenu panel.
🔧 Panel subheading (panel_subheading)	Optional subtitle below the heading.

Menu columns:

Setting	What it does
🔧 Columns (columns)	1–6 columns. ✅ Default 3. How many columns the megamenu uses for nav links.

Featured-products column:

Setting	What it does
🔧 Items beside menu (items_beside_menu)	0–4 products shown in a side column. 0 = no side column. ✅ Default 0.
🔧 Featured collection (featured_collection)	Source collection — products from this collection appear in the side column.
🔧 Show product price (show_product_price)	Include price under each featured product. ✅ Default on.
🔧 Image corner radius (product_image_radius)	0–32 px. ✅ Default 8. Corner radius on the featured product images. Only shown when Items beside menu > 0.
🔧 Image aspect ratio (product_aspect_ratio)	adapt / square (✅ default) / portrait / tall / landscape / wide — mirrors the promo card’s options. Only shown when Items beside menu > 0.
🔧 Show in drawer (show_in_drawer)	When the mobile drawer is active, also show this featured-products column (otherwise drawer is text-only). ✅ Default on.

Promo card:

Setting	What it does
🔧 Promo image (promo_image)	Image for a CTA card in the megamenu’s right side.
🔧 Promo aspect ratio (promo_aspect_ratio)	adapt / square / portrait / tall / landscape / wide. ✅ Default portrait.
🔧 Promo subheading label (promo_eyebrow)	Small label above the heading (e.g., “NEW”). Labelled “Subheading” in the editor; the schema ID stays promo_eyebrow for backwards-compat.
🔧 Promo heading (promo_heading)	Card heading.
🔧 Promo subheading (promo_subheading)	Card subtitle.
🔧 Promo button text (promo_button_text)	CTA button label. ✅ Default “Shop now”.
🔧 Promo URL (promo_url)	CTA destination.

💡 The megamenu panel’s background follows the same rule as the dropdown (see §4.11.1): glass header → frosted glass; transparent-on-top header → fully transparent at the top, solid once scrolled; otherwise → solid scheme panel. (It used to always render as a dark frosted “heavy glass” regardless of the header state.)

💡 On a top header (not constrained to page width), the megamenu panel extends to the full header content width — the same edges as the nav above it — instead of being capped at the page-width column. Floating and page-width-constrained headers keep the page-width alignment.

💡 The megamenu only renders if the parent nav link has children in Shopify Admin. If you add a Megamenu Link block but the nav link is flat (no children), the block does nothing — set up your menu hierarchy in Shopify Admin first.

4.11.3 Icon Item block (icon_item)

A single icon-styled menu item inside a megamenu. Used when you want a megamenu link to have a custom icon (instead of just text). Each icon_item block represents one such link.

Setting	What it does
🔧 Use as pin (use_pin_override)	When on, the icon also acts as a “pin” marker (e.g., for location-based menus). ✅ Default off.
🔧 Menu link (menu_link)	URL the icon item links to. Visible when Use as pin is on.
🔧 Icon (icon)	Image upload — SVG recommended for crispness at any size.
🔧 Label (label)	Text shown next to / under the icon.

⚠️ Required to be inside a megamenu_link block — adding icon_item at the top level of the header has no effect. Use them inside a megamenu panel to give it a visual icon-grid feel (e.g., for “Shop by category” navigation with an icon per category).

Next

Chapter 5 — Footer — the bottom-of-page complement to the header.