In the theme editor, click Header and pick it under Menu.
For big dropdowns with products and images, add mega menu blocks.
Floating header
Turn on Enable floating header to float a rounded header bar over your first section, so a hero image runs underneath it. It turns solid when shoppers scroll or open a menu. Upload an inverse logo and choose a Floating state color scheme that stays readable over your image.
Sticky header
Option
Behavior
Not sticky
The header scrolls away with the page.
Sticky
The header always stays at the top.
Sticky, shown when scrolling up
Hides while reading, comes back when shoppers scroll up. Saves space on phones.
Important
If your first home page section uses an H1 heading, turn off Use the logo as the home page H1. Each page should have only one H1.
Screenshots
The floating header over a hero.The sticky header after scrolling.Logo in the center.The header on a phone.The mobile menu drawer.The search panel.Header settings.
Settings
Setting
Options
What it does
Section appearance
Color scheme
Color scheme
Navigation
Menu
Menu
Open dropdowns on
Hover · Click
Dropdowns always open on click, tap and Enter. Hover adds pointer opening on desktop.
Layout
Desktop logo position
Left · Center
Header bar corner radius
0–50 px
0 gives square corners. The highest values render as a fully rounded pill.
Mobile layout
Logo left · Logo center
Style
Enable floating header
On / Off
On: the header floats as a rounded bar over the first section, so a hero image runs underneath it, and uses the inverse logo where one is set. It spans the full width and turns solid on scroll, turns solid whenever a menu, drawer or search panel opens, and stays solid on pages with no hero such as cart and search. Off: a solid, full-width header on every page.
Floating header on
Home page only · All pages
Pages without the floating header show a solid, full-width header.
Floating state color scheme
Color scheme
Colors the floating header before it turns solid. Pick a scheme whose text stays legible over your first section's image.
Search panel style
Solid · Transparent
Mega menu
Mega menu style
Floating card · Solid · Transparent
Applies to every mega menu panel. Only visible on the storefront once a mega menu block has been added. Floating card insets the panel from the window edges, edged with the scheme's border color.
Match header color scheme
On / Off
Mega menus and dropdowns use the header's color scheme. Turn off to pick a different scheme for them.
Mega menu color scheme
Color scheme
Colors every mega menu and dropdown panel instead of the header's scheme — a cream or tinted scheme separates a floating panel from the page behind it.
Column heading style
Serif · Small capitals
Promo images per panel
2–4
How many promo blocks show beside links or products. A menu item with only promo blocks shows all of them.
Promo image shape
Portrait · Square · Landscape
Promo text
Below the image · On the image
Features
Sticky header
Not sticky · Sticky · Sticky, shown when scrolling up
Use the logo as the home page H1
On / Off
Turn off when the first home page section sets its heading to H1, so the page has one H1.
Show search
On / Off
Show social media icons
On / Off
Shown in the mobile menu drawer. Desktop social links live in the announcement bar.
Search panel
Search panel color scheme
Color scheme
Search field placeholder
Text
Show search suggestions
On / Off
Shows the most common search phrases from your shop as the shopper types, with the matched words in bold. Needs JavaScript.
Show products
On / Off
Show collections
On / Off
Show pages
On / Off
Show blog posts
On / Off
Number of results to show
2–10
Applies to each result type separately. Shopify's predictive search allows up to 10.
View all results label
Text
Blocks
Click Add block under the section in the sidebar. Drag blocks to change their order.
Mega menu — products
Setting
Options
What it does
Menu item
Text
Type the exact title of the top-level menu item this panel should drop from, for example Coffee. If you translate your menu, translate this field to the same title in each language, or the panel won't show in that language.
Category 1
Collection
Category 2
Collection
Category 3
Collection
Category 4
Collection
Products to show
2–5
Products in each collection tab. Promo blocks set to the same menu item sit beside the products, so 3 reads best alongside promos.
Show collection description
On / Off
View all label
Text
View all link
Link
Product card
Card style
Simple · Brew specs · Pairs with
"Simple" shows one detail line, the price and the level meter. "Brew specs" adds the spec cells set in Theme settings. "Pairs with" shows the companion product.
Media aspect ratio
Same as product cards · Portrait · Square · Landscape
Show second image on hover
On / Off
Show product vendor
On / Off
Show product rating
On / Off
Show variant options on cards
On / Off
Mega menu — link columns
Setting
Options
What it does
Menu item
Text
Type the exact title of the top-level menu item this panel should drop from, for example Coffee. If you translate your menu, translate this field to the same title in each language, or the panel won't show in that language.
Link style
Text · Images
Images shows each link's collection or product photo above its title, on desktop and as thumbnails in the mobile menu.
Mega menu — promo card
Setting
Options
What it does
Menu item
Text
Type the exact title of the top-level menu item this panel should drop from, for example Coffee. If you translate your menu, translate this field to the same title in each language, or the panel won't show in that language.
Image
Image
Text position
Header default · Below the image · On the image
"On the image" sets the kicker, heading, text and button over the photo on a dark scrim, so they stay readable on any image. "Header default" follows Header > Mega menu > Promo text.
Kicker
Text
Heading
Text
Text
Text
Button label
Text
Link
Link
Menu badge
Setting
Options
What it does
Menu link
Text
The link's title exactly as it appears in the menu, at any level. If you translate your menu, translate this field to the same title in each language, or the badge won't show in that language.
Label
Text
Style
Accent · Solid · Outline
Mobile menu up to 1
Setting
Options
What it does
Mobile menu
Menu
Optional. Leave empty to use the same menu as the desktop navigation.
Customer account menu up to 1
Setting
Options
What it does
Customer account menu
Menu
Links shown in the account menu that opens from the header. Use the customer account menu so they match your customer account pages.
