Header
The Header appears at the top of each page so customers can navigate your store with ease. Choose from multiple styles and layouts, add Mega navigation menus for large catalogs, enable a transparent header, and more.
⬇️ On this page:
Shopify's resources:
Set up main menu
By default, the header menu is set to the Main menu found in your Shopify Admin. If you created a separate menu, go to the theme editor (Customize) to change the selected menu for your Header.
Steps
In your theme editor > Customize:
- Under Home page > click Header and you will see a customization options for your Header.
Under the Main menu section, click Change and Change menu.
- Select a menu from your Shopify admin that you want to use.
- Click Save.
- (Optional) You can also change Mobile menu (optional) layout.
Logo
Replace the store title with a custom logo image. It is recommended to use a logo image with a transparent background and a minimum width of 50px in PNG format.
If you still need to create a logo, check out Shopify's free Logo Maker ↗.
Steps
- In your theme editor (Customize), click the Header section to open the section settings.
Under Logo, click Select image (or Change) and use the file selector to select or upload your logo file.
We recommend using a logo with a transparent background (PNG format).
To add a logo to the mobile menu, click the Mobile menu ↗ section in the side panel to find the logo settings.
Use the Custom logo width slider to make your logo larger or smaller on either desktop or mobile. You can also set Mobile logo max width.
We recommend using the original pixel width of your uploaded image.
- Click Save.
Change header layout
Match the look of your brand by changing the style and layout of your Header menu and store title. Change the position of your menu links or display them in a drawer menu that can be opened by clicking a Menu icon (☰).
In your theme editor > Customize:
- Click the Header section to open the settings.
- You can set Header behavior to be either:
- Default - By default, the header is stacked at the top of the page and will not be sticky or reveal on scroll.
- Sticky - Sticky header sticks to the top of the page as you scroll down.
- Reveal on scroll - This option will reveal your header on scroll.
- Do you want your logo to be in the center or go to the left? Set your Header layout to one of the following:
- Logo above menu;
- Logo left;
- Logo center;
- Mobile menu.
- If you want to have a transparent header, navigate to Header style and choose Transparent (Homepage only) option. Other header style options include:
- Default - The logo will appear on a white background.
- Gradient - Black and transparent gradient.
- Transparent - We covered that above.
- Inverse - Black header background.
- (Optional) Checkmark Enable border to show the boarder of your header.
- (Optional) You can also make all links to appear uppercase by checking Make links uppercase.
- If you wish to add Custom CSS, make sure to read the Custom CSS ↗ article.
- Click Save.
Mega navigation
A Mega navigation menu displays menu links in multiple columns so customers can browse large catalogs quickly and easily. Add multiple sub-menus along with a featured image, text, and links to customize your mega nav.
First, you need to create nested menu list. Then, you are able to add mega nav menus to your header.
Let's break it down.
Shopify's resources:
Creating nested menu list
The mega navigation menu uses the Main menu selected in the Header section settings. For the mega navigation, you first need to create a nested menu with 3 levels of links.
Here is an example:
In the example above, the top-level link is Shop By with three nested sub-menus.
The 2nd-level links (Collections, Shop by price, etc.) display as titles for each column and contains the 3rd-level links.
Here's what the Main menu looks like in the Shopify admin with the three nested link levels for this particular example:
Steps
In your Shopify admin:
- Click Navigation under Online Store in the admin panel.
- Select the Main menu or the menu you want to edit.
- Add a top-level link (for example: "Shop") in your Main menu that will open the mega nav and contain the nested sub-menus.
- Add your 2nd-level menu links and use the drag handles
⋮⋮to move them under the top-level link. - Add your 3rd-level menu links and use the drag handles
⋮⋮to move them under the 2nd-level links. - Click Save.
Adding mega nav menus
Once you have created your nested menus, you can now add mega nav blocks to your Header in the theme editor.
Steps
In your theme editor (Customize):
- Click the arrow beside the Header section.
- Click + Add Mega menu. You will now see the customization options for the Mega menu.
- In the Menu item field, enter the exact name of the top-level link (e.g. "Shop by").
- Under Promotion 1, upload the image you want to use for your promotion by clicking Select image or Explore free images.
- Use Subheading and Heading fields to tell more about promotion.
- In the Button field, you can enter the text that will appear in the button.
- Insert an IRL to the Link field so whenever customers click on the button the page with your promotion will open up.
- Fill out Promotion 2 and Promotion 3 if needed following steps 4-7.
- Click Save.
Set up search
The Search bar displays in the header and lets visitors search your collections, products, and pages. You can enable search suggestions, choose to show the product vendor or the product price, and promote your collections with suggested links that appear beneath the search field. The search customization can be found in Theme settings > Search. Read our Search article ↗ to learn more.
You can customize search results with Shopify's Search & Discovery app ↗. Create custom filters, select result types, and add "synonym groups" to show relevant results. See Shopify's App guide ↗ to learn more.