The Header is the main navigation area of your store. It helps customers browse collections, search products, open their account, and reach the cart.
Themes → Customize → Header
In the left sidebar, open the Header group and select Header.
This section appears at the top of your store (announcement bar sits above the main header when both are enabled).
Your logo and logo size come from Theme settings → Store logo. Search and Customer accounts behavior are set under their theme settings groups.
Suggested order: Theme editor overview → Header appearance & Sticky header → Featured navigation → Mega Menu → Mobile Menu → Mobile menu localization → Section spacing.
Preview the storefront on desktop and mobile after changing menu structure or colors.
Select Header in the left panel under the Header group, or click it in the preview.
Logo, main navigation, search, account, and cart—plus an optional announcement bar above. Desktop menus, mega menus, and the mobile menu are configured in the sections below.
Storefront → Header
Sets the background behind the logo, navigation, and utility icons so the header reads clearly against the page. Default color: #FFFFFF.
Usage
Where it shows on the storefront
Colors the search, account, and cart icons. Pick a shade that stands out on your header background. Default color: #000000.
Usage
Where it shows on the storefront
Keeps the header on screen while customers scroll so search, menu, and cart stay within reach. Default: Off
When turned on
When turned off
Featured navigation is the horizontal menu on wide screens. Choose your menu, decide between mega menu or list dropdowns, and set colors so links and open panels stay easy to read.
Storefront → Featured navigation
Chooses which menu appears in the header bar on wide screens. Mobile menu groups are set separately under Mobile menu.
Usage
Where it shows on the storefront
Sets how submenu panels open when a top-level link has children. Applies to the desktop header bar only—not the mobile menu. Default: Mega menu
Usage
Where it shows on the storefront
Color of desktop navigation links in the header bar. Default color: #000000.
Usage
Where it shows on the storefront
Desktop navigation link color on hover. Default color: #414141.
Usage
Where it shows on the storefront
Background of open desktop submenu panels (mega menu or list dropdown). Default color: #FFFFFF.
Usage
Where it shows on the storefront
Border around open desktop submenu panels. Default color: #EDEDED.
Usage
Where it shows on the storefront
Mega menus add wide panels with link columns and promo images under top-level links. Use them when Navigation style is Mega menu. Add one Mega menu banner block per link you want to customize.
Storefront → Mega Menu
Connects this Mega menu banner block to one top-level link from the Menu under Featured navigation.
Usage
Where it shows on the storefront
How many link columns vs. promo images appear in this mega menu panel. Default: 3 links + 3 featured
Usage
Where it shows on the storefront
The editor shows Banner 1 through Banner 5. Every slot uses the same four fields below—documented once here. Fill only the slots your Layout setting needs (for example, three banners for “3 links + 3 featured”).
Promo or category image for a banner slot in the mega menu.
Usage
Where it shows on the storefront
Where shoppers go when they click the image or text.
Usage
Where it shows on the storefront
When the banner has a link. Default: Off
When turned on
When turned off
Short label shown with the image (also used for accessibility).
Usage
Where it shows on the storefront
The mobile menu opens from the hamburger icon on desktop and mobile. Use up to three labeled menu groups so shoppers can browse collections, quick links, and other lists without crowding the header bar.
Storefront → Mobile menu
The theme editor lists three menu groups. Each group uses the same Title and Menu fields—documented once here.
Title
Heading above that group when shoppers open the mobile menu—for example, Collection, Quick links, or Vendors. Leave blank to hide the heading.
Menu
Which Shopify navigation menu fills that group. Create or edit menus under Shopify Admin → Content → Menus, then choose one from Select menu. A group only appears when a menu is selected.
Usage
Where it shows on the storefront
Background color inside the mobile menu panel. Default color: #000000.
Usage
Where it shows on the storefront
Color for group titles such as Collection or Quick links. Default color: #FFFFFF.
Usage
Where it shows on the storefront
Color for links inside the mobile menu. Default color: #FFFFFF.
Usage
Where it shows on the storefront
Optional country/region and language selectors at the bottom of the mobile menu. Enable them when you sell in multiple markets or languages.
Storefront → Mobile menu localization
Lets shoppers change market or currency from the mobile menu. Default: On
When turned on
When turned off
Lets shoppers change store language from the mobile menu. Default: On
When turned on
When turned off
Background behind country and language chips in the mobile menu. Default color: #FFFFFF.
Usage
Where it shows on the storefront
Text color for localization labels and options. Default color: #111111.
Usage
Where it shows on the storefront
Border around localization controls. Default color: #EDEDED.
Usage
Where it shows on the storefront
Adds empty space above and below this section on desktop and mobile.
Usage