Header
Header is the top navigation bar. It holds the logo, the main menu with optional mega menus, the search, account, cart, and offer icons, and the country and language selectors.
How to find it
In the Theme Editor, select the Header group, then select the Header section.
Settings
View the section guide .
General
| Setting | Options | Description |
|---|---|---|
| Logo position on desktop | • Logo left, menu center | Logo position is automatically optimized for mobile. |
| Sticky header behavior | • None | Controls whether the header stays in view while shoppers scroll. None leaves it at the top of the page, On scroll up brings it back only when the shopper scrolls up, and Always keeps it pinned. |
Menu
| Setting | Options | Description |
|---|---|---|
| Menu | Chooses the Shopify navigation menu whose links appear in the header and in the mobile menu drawer. | |
| Desktop dropdown trigger | • Click | Sets how dropdown and mega menus open on desktop. Click opens a menu when the shopper clicks the item. Hover opens it on pointer hover, and clicking the item then goes to its link. Mobile always uses tap. |
| Dropdown animation | • Fade in | Chooses the opening animation of desktop dropdown and mega menu panels: Fade in or Bottom to top. |
Mobile menu settings
| Setting | Options | Description |
|---|---|---|
| Mobile menu icon position | • Left | Choose where the hamburger menu appears on mobile. |
Add-ons
| Setting | Options | Description |
|---|---|---|
| Show search icon | Shows the search icon in the header. It links to the search page. | |
| Show account | Shows the account icon in the header. With customer accounts on and the theme's account setting on sign-in popup, it opens a login popup. Otherwise it links to the login or account page. | |
| Show cart | Shows the cart icon in the header, with an item count badge. It links to the cart page. | |
| Show offer | Customize the offers popup block content in the overlay group. |
Country/language selector
| Setting | Options | Description |
|---|---|---|
| Show country/region selector | Shows the country/region picker in the header (and in the mobile menu drawer). It appears only when the store sells in more than one country or has more than one language. | |
| Show language selector | Shows the language picker in the header (and in the mobile menu drawer). It appears only when the store sells in more than one country or has more than one language. |
Transparent header
| Setting | Options | Description |
|---|---|---|
| Enable transparent header | Lets the header sit over the top of the homepage without a background. It turns solid again once the shopper scrolls or hovers the header, and other pages keep the normal header. | |
| Header text and icon color | Color of the header text and icons while the transparent header is showing over the homepage, before the shopper scrolls or hovers. |
Appearance
| Setting | Options | Description |
|---|---|---|
| Color scheme | Color scheme of the header bar, which sets its background and text colors. Edit color schemes in Theme settings. |
Section layout
| Setting | Options | Description |
|---|---|---|
| Section width | • Page width | Sets how wide the header content is. Page width keeps it inside the standard content width, Wide stretches it closer to the screen edges, and Full width spans the whole screen. |
| Top padding | Space above the header content, in pixels. | |
| Bottom padding | Space below the header content, in pixels. |
Blocks
Mega menu banner (menu_mega)
View the block guide .
| Setting | Options | Description |
|---|---|---|
| Menu item | Enter the menu item name to apply a mega menu dropdown. The name is case-sensitive. | |
| Menu columns | Number of columns the dropdown's links are laid out in. Buttons set for columns beyond this number are not shown. |
First button
| Setting | Options | Description |
|---|---|---|
| First button label | Text of a small link shown under the first column of links in the dropdown (and after that column's links in the mobile drawer). Leave empty to show none. | |
| First button link | Where the first button goes when clicked. Without a link the button text shows but does nothing. |
Second button
| Setting | Options | Description |
|---|---|---|
| Second button label | Text of a small link shown under the second column of links in the dropdown. Leave empty to show none. | |
| Second button link | Where the second button goes when clicked. Without a link the button text shows but does nothing. |
Third button
| Setting | Options | Description |
|---|---|---|
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Button link | Where this button goes when clicked. Without a link the button text shows but does nothing. |
Fourth button
| Setting | Options | Description |
|---|---|---|
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Button link | Where this button goes when clicked. Without a link the button text shows but does nothing. |
Fifth button
| Setting | Options | Description |
|---|---|---|
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Button link | Where this button goes when clicked. Without a link the button text shows but does nothing. |
Collections
| Setting | Options | Description |
|---|---|---|
| Collection columns | Number of collection cards shown side by side. In a Collection menu block it sets the cards per row in the panel next to the links. | |
| Collection | Picks the collections shown in the menu. In a Mega menu block they appear as small image cards under the links, and in a Collection menu block they fill the panel beside the links. |
Banners settings
| Setting | Options | Description |
|---|---|---|
| Width | Share of the dropdown's width taken by the banner, product or collection panel on desktop, as a percentage. The menu links use the remaining space. | |
| Banner columns | Number of banners shown side by side in the mega menu panel. | |
| Content position on desktop | • Below image | Places the banner text below the image, or over the image at the top, middle or bottom. Text above button puts the text at the top of the image and the button at the bottom. |
| Content alignment | • Left | Aligns the banner text and button to the left, center or right. |
Banner #1
| Setting | Options | Description |
|---|---|---|
| Image | 448px x 260px recommended | |
| Color scheme | To edit all your theme's colors, go to your color theme settings (/editor?context=theme&category=colors). Ensure clear text contrast for better user experience. Shown only when the banner has an image. | |
| Subheading | Small line of text above the banner heading. Shown only when the banner has an image. | |
| Heading | Main text of the banner, linked to the banner's link. Shown only when the banner has an image. | |
| Description | Short text below the banner heading. Shown only when the banner has an image. | |
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Link | Where the banner image, heading and button go when clicked. Without a link the banner shows but is not clickable. |
Banner #2
| Setting | Options | Description |
|---|---|---|
| Image | 448px x 260px recommended | |
| Color scheme | To edit all your theme's colors, go to your color theme settings (/editor?context=theme&category=colors). Ensure clear text contrast for better user experience. Shown only when the banner has an image. | |
| Subheading | Small line of text above the banner heading. Shown only when the banner has an image. | |
| Heading | Main text of the banner, linked to the banner's link. Shown only when the banner has an image. | |
| Description | Short text below the banner heading. Shown only when the banner has an image. | |
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Link | Where the banner image, heading and button go when clicked. Without a link the banner shows but is not clickable. |
Banner #3
| Setting | Options | Description |
|---|---|---|
| Image | 448px x 260px recommended | |
| Color scheme | To edit all your theme's colors, go to your color theme settings (/editor?context=theme&category=colors). Ensure clear text contrast for better user experience. Shown only when the banner has an image. | |
| Subheading | Small line of text above the banner heading. Shown only when the banner has an image. | |
| Heading | Main text of the banner, linked to the banner's link. Shown only when the banner has an image. | |
| Description | Short text below the banner heading. Shown only when the banner has an image. | |
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Link | Where the banner image, heading and button go when clicked. Without a link the banner shows but is not clickable. |
Banner #4
| Setting | Options | Description |
|---|---|---|
| Image | 448px x 260px recommended | |
| Color scheme | To edit all your theme's colors, go to your color theme settings (/editor?context=theme&category=colors). Ensure clear text contrast for better user experience. Shown only when the banner has an image. | |
| Subheading | Small line of text above the banner heading. Shown only when the banner has an image. | |
| Heading | Main text of the banner, linked to the banner's link. Shown only when the banner has an image. | |
| Description | Short text below the banner heading. Shown only when the banner has an image. | |
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Link | Where the banner image, heading and button go when clicked. Without a link the banner shows but is not clickable. |
Banner #5
| Setting | Options | Description |
|---|---|---|
| Image | 448px x 260px recommended | |
| Color scheme | To edit all your theme's colors, go to your color theme settings (/editor?context=theme&category=colors). Ensure clear text contrast for better user experience. Shown only when the banner has an image. | |
| Subheading | Small line of text above the banner heading. Shown only when the banner has an image. | |
| Heading | Main text of the banner, linked to the banner's link. Shown only when the banner has an image. | |
| Description | Short text below the banner heading. Shown only when the banner has an image. | |
| Button label | Text of a small link shown under its column of links in the dropdown. It appears only when Menu columns is high enough to include that column. | |
| Link | Where the banner image, heading and button go when clicked. Without a link the banner shows but is not clickable. |
Mega menu products (menu_product)
View the block guide .
| Setting | Options | Description |
|---|---|---|
| Menu item | Enter the menu item name to apply a mega menu dropdown. The name is case-sensitive. | |
| Menu columns | Number of columns the dropdown's links are laid out in. Buttons set for columns beyond this number are not shown. |
Products
| Setting | Options | Description |
|---|---|---|
| Width | Share of the dropdown's width taken by the banner, product or collection panel on desktop, as a percentage. The menu links use the remaining space. | |
| Product columns | Number of product cards shown side by side in the product panel of the dropdown. | |
| Heading | Title shown above the product list in the dropdown. Default: Products. Leave empty to hide it. | |
| Products | Picks the products displayed in the dropdown, beside the menu links. |
Mega menu collections (menu_collection)
View the block guide .
| Setting | Options | Description |
|---|---|---|
| Menu item | Enter the menu item name to apply a mega menu dropdown. The name is case-sensitive. | |
| Menu columns | Number of columns the dropdown's links are laid out in. Buttons set for columns beyond this number are not shown. |
Collections
| Setting | Options | Description |
|---|---|---|
| Width | Share of the dropdown's width taken by the banner, product or collection panel on desktop, as a percentage. The menu links use the remaining space. | |
| Collection columns | Number of collection cards shown side by side. In a Collection menu block it sets the cards per row in the panel next to the links. | |
| Heading | Title shown above the collection list in the dropdown. Default: Collection. Leave empty to hide it. | |
| Collection | Picks the collections shown in the menu. In a Mega menu block they appear as small image cards under the links, and in a Collection menu block they fill the panel beside the links. |
General: Logo left, menu center places the logo on the left and the menu in the center. Logo center, menu left does the reverse. The logo position adjusts automatically on mobile. Sticky header behavior sets whether the header stays at the top: None turns it off, On scroll up shows it when the visitor scrolls up, and Always keeps it at the top.
Menu chooses the link list for navigation. Desktop dropdown trigger opens dropdowns on Click or Hover. Dropdown animation sets the Fade in or Bottom to top style.
Mobile menu settings: Mobile menu icon position sets the menu button on the left or right on mobile.
Add-ons: each checkbox shows or hides one icon: search, account, cart, or offer.
Country/language selector: each checkbox adds that selector to the header. The language selector is off by default.
Transparent header: Enable transparent header makes the header clear over the top of the page. Header text and icon color sets the color for the text and icons in that state.
The mega menu blocks add dropdown content to a top-level menu item. Mega menu banner holds up to five banners. Mega menu products shows a product list, and Mega menu collections shows a collection list.
Notes
The menu item name in each mega menu block must match the menu item exactly, because the match is case-sensitive.
Show offer opens the Promotional popup from the offer icon in the header. On small screens that icon is hidden, and the offer opens from the Show offer tab in the mobile navigation bar when that bar is on. Mega menus also appear in the mobile menu drawer, under their menu item.
No comments yet