What is the header section?
The Header section is more than just the first section visible on your website. It's one of the more powerful sections available in your theme and can dramatically change the look and feel of your site.
Customize header settings
-
Impulse
In the theme editor sidebar, click Header to customize general settings for this section.
By default, Shopify's default main menu is selected for the Navigation. Click it to choose a different menu if needed.
Turn on Enable dropdown on hover to have dropdown and mega menus open when you hover over navigation links.
The Show mega menu images setting adds the collection image to the mega menu. Learn how to set up the mega menu in this guide.
Header layout
Impulse comes with seven header layouts you can choose from:
Logo left, menu left
This layout displays the logo on the left with the menu links beside it, while the header icons (search, account, and cart) are aligned on the right.
Logo left, menu center
This layout places the logo on the left, with the menu links positioned on the center of the header, and the header icons aligned on the right.
Logo left, menu drawer
This layout displays the logo on the left and a hamburger menu on the right, along with the other header icons. When the hamburger menu is clicked, a navigation drawer slides in from the right side of the screen and shows the menu links.
Logo center, menu left
This layout centers the logo, displays the navigation links on the left, and shows the header icons on the right side of the header.
Logo center, menu split
This layout places the logo in the center, distributes the menu links on either side, search icon on the left and the other icons on the right.
Logo center, menu below
This layout centers the logo, places the navigation links below it, search icon on the left and the other icons on the right.
Logo center, menu drawer
This layout places the hamburger menu on the left, centers the logo, and aligns the header icons on the right.
Mobile
On mobile, all logo left layouts display the logo on the left, with the search, hamburger menu, and cart icons on the right.
All logo center layouts display the hamburger menu on the left, the logo in the center, and the search and cart icons on the right side of the mobile header.
To keep the header visible as customers scroll down the page, enable the Sticky header option.
The Overlay header over home page option positions the header above the homepage’s first image section. To use this feature on collection pages, activate Overlay header over collection. Make sure the Collection header has the collection image enabled for the overlay to function as expected.
Toolbar
A toolbar can be shown at the top of the header on desktop view. It can display secondary menu links, social icons, and the currency and language selectors.
Use the Navigation selector to choose which menu appears on the left side of the toolbar. Note that dropdown items are not displayed in this menu.Enable Show language selector to include a language selector dropdown for customers to select their preferred language.
Activate Show country selector to display a country selector dropdown, allowing customers to choose their region and currency. Enable Show currency flags to show country flags in the dropdown. Shopify Payments must be enabled for this feature to work.
Header logo
The header section includes a single block for the logo image. Click the Logo block to customize its settings.
Click Select Image to add a Logo image for your header. The White logo is displayed when the header sits over an image section or when Overlay header is enabled. For best results, choose a white logo that stands out clearly against the background image.
Adjust the logo size with the provided slider for the Desktop logo width (between 100 - 400px) and the Mobile logo width (between 60 - 200px).
-
Expanse, Fetch and Gem
In the theme editor sidebar, click Header to customize general settings for this section.
By default, Shopify's default main menu is selected for the Navigation. Click it to choose a different menu if needed.
Colors
Color scheme controls the section’s background and text colors. You can customize the available color schemes under Theme settings > Colors. Use the Cart dot setting to choose which color scheme is applied to the cart indicator dot when an item is added to the cart.
Turn on Enable dropdown on hover to have dropdown and mega menus open when you hover over navigation links.
Typography
Use Navigation font to choose whether the main navigation links use the body or heading font. Use Navigation size to adjust the font size, and enable Capitalize navigation to display the links in uppercase.
Header layout
Turn on Enable dropdown on hover to have dropdown and mega menus open when you hover over navigation links.
Expanse, Fetch and Gem come with four header layouts that you can choose from:
Logo left, menu below
This layout centers the logo and places the navigation links below it. The search bar appears beside the logo on the left side of the header, while the other icons are displayed on the right.
Logo left, menu left
This layout displays the logo on the left with the menu links beside it, while the header icons (search, account, and cart) are aligned on the right.
Logo left, menu center
This layout places the logo on the left, with the menu links positioned on the center of the header, and the header icons aligned on the right.
Logo center, menu below
This layout centers the logo, places the navigation links below it, the search bar on the left of the header and the other icons on the right.
Mobile
On mobile devices, the Logo left, menu below and Logo center, menu below layouts show the logo on the left, the cart and hamburger menu icons on the right, and the search bar positioned underneath.
For the Logo left, menu left and Logo left, menu center layouts, the logo appears on the left side of the mobile header, while the search, hamburger menu, and cart icons are positioned on the right.
The Show first product in mega menus setting displays the first product in the mega menu from the collection assigned to the top-level menu link. Learn how to set up the mega menu in this guide.
To keep the header visible as customers scroll down the page, enable the Sticky header option. Enable Show footer content on mobile menu to display the footer blocks inside the mobile menu drawer.
The Overlay header over home page option positions the header above the homepage’s first image section. To use this feature on collection pages, activate Overlay header over collection. Make sure the Collection header has the collection image enabled for the overlay to function as expected.
Header logo
The header section includes a single block for the logo image. Click the Logo block to customize its settings.
Click Select Image to add a Logo image for your header. The White logo is displayed when the header sits over an image section or when Overlay header is enabled. For best results, choose a white logo that stands out clearly against the background image.
Adjust the logo size with the provided slider for the Desktop logo width (between 100 - 400px) and the Mobile logo width (between 60 - 200px).
-
Motion
In the theme editor sidebar, click Header and menus to customize general settings for this section.
Logo
Click Select Image to add a Logo image for your header. The White logo is displayed when the header sits over an image section or when Overlay header is enabled. For best results, choose a white logo that stands out clearly against the background image.
Adjust the logo size with the provided slider for the Desktop logo width (between 100 - 400px) and the Mobile logo width (between 60 - 200px).
By default, Shopify's default main menu is selected for Menu. Click it to choose a different navigation menu if needed.
Turn on Enable dropdown on hover to have dropdown and mega menus open when you hover over navigation links.
Layout
Motion comes with seven header layouts you can choose from:
Logo left, menu left
This layout displays the logo on the left with the menu links beside it, while the header icons (search, account, and cart) are aligned on the right.
Logo left, menu center
This layout places the logo on the left, with the menu links positioned on the center of the header, and the header icons aligned on the right.
Logo left, menu drawer
This layout displays the logo on the left and a hamburger menu on the right, along with the other header icons. When the hamburger menu is clicked, a navigation drawer slides in from the right side of the screen and shows the menu links.
Logo center, menu left
This layout centers the logo, displays the navigation links on the left, and shows the header icons on the right side of the header.
Logo center, menu split
This layout places the logo in the center, distributes the menu links on either side, search icon on the left and the other icons on the right.
Logo center, menu below
This layout centers the logo, places the navigation links below it, search icon on the left and the other icons on the right.
Logo center, menu drawer
This layout places the hamburger menu on the left, centers the logo, and aligns the header icons on the right.
Mobile
On mobile, all logo left layouts display the logo on the left, with the search, hamburger menu, and cart icons on the right.
All logo center layouts display the hamburger menu on the left, the logo in the center, and the search and cart icons on the right side of the mobile header.
To keep the header visible as customers scroll down the page, enable the Sticky header option.
The Overlay header over home page option positions the header above the homepage’s first image section. To use this feature on collection pages, activate Overlay header over collection. Make sure the Collection header has the collection image enabled for the overlay to function as expected.
Mega menu blocks
The header section allows you to add blocks for the mega menu feature. Learn how to set up the mega menu in this guide.
-
Streamline
In the theme editor sidebar, click Header to customize general settings for this section.
Layout
There are three Desktop styles you can choose from:
• Sticky button: Displays a sticky menu button at the lower-left corner of the page as you scroll.
• Sticky bar: Keeps the header visible while you scroll down the page.
• Top only: Shows the header only at the top of the page.
Streamline comes with five header layout options:
Logo left, menu right
This layout displays the logo on the left, with the menu links on the right beside the header icons (account, search, and cart).
Logo left, menu center
This layout places the logo on the left, with the menu links positioned on the center of the header, and the header icons aligned on the right.
Logo center, menu left
This layout centers the logo, displays the navigation links on the left, and shows the header icons on the right side of the header.
Logo center, menu split
This layout places the logo in the center, distributes the menu links on either side, search icon on the left and the other icons on the right.
Logo center, menu below
This layout centers the logo, places the navigation links below it, search icon on the left and the other icons on the right.
Mobile
On mobile, the header shows only the logo at the top of the page. For more details, see Streamline’s navigation approach here.
The Overlay header over home page option positions the header above the homepage’s first image section. To use this feature on collection pages, activate Overlay header over collection. Make sure the Collection header has the collection image enabled for the overlay to function as expected.
Turn on Enable search to display the search icon in the header.
Logo
Click Select Image to add a Logo image for your header. The White logo is displayed when the header sits over an image section or when Overlay header is enabled. For best results, choose a white logo that stands out clearly against the background image.
Adjust the logo size with the provided slider for the Desktop logo width (between 100 - 400px) and the Mobile logo width (between 60 - 200px).
Turn on Hide logo on mobile pages to maximize screen space for your content on mobile devices. You can add your logo under Theme settings → Animations to display it during page load instead. The logo will always appear on the home page.
Navigation
By default, Shopify's default main menu is selected for Menu. Click it to choose a different navigation menu if needed.
Turn on Enable dropdown on hover to have dropdown and mega menus open when you hover over navigation links.
Best practices for optimizing the header section
- Keep it clean: Clutter is distracting. Be really intentional with any elements that you allow to 'live' in your header. Less is more.
- Prioritize your navigation: The header is your visitor's gateway to your site and most navigational journeys will start here. Make sure that your most important links are prominent and easy to find.
- Brand consistency: The colors, fonts and logos you use in your header should be consistent with your brand identity and the overall design of your site.
-
Use high-quality assets: Your theme settings allow you to fine-tune the max-width of any logo you use on both desktop and mobile devices. Go with the highest resolution PNG files you can and let the theme settings handle responsively rendering the best quality image.