What is the header section?
The Header is a critical section that gives a snapshot of the entire store. Enterprise has an innovative mega menu structure, multiple logo options, an eye catching search function and sleek icons; all of which help set the tone for a solid first impression to your store. Guide customers straight to the right place with quick links and a prominent call‑to‑action button.
Separate guides are available for How to set up the mega menu, How to set up the search bar and How to set up the announcement bar.
How to set up the header section
Steps
- Open the Theme Editor and in the Header group, select the Header section.
-
In the Layout settings, there is the option to Enable sticky header. This setting determines how much of the header customers can see as they scroll through the store.
Turning the Enable sticky header on: When customers scroll down the page, the navigation stays until the first section is scrolled past. If the customer continues to scroll, the search, logo and icons are permanently anchored to the top of the page.
Turning the Enable sticky header setting off: The header section will disappear as the customer scrolls past it.
- Set the Mobile menu icon position to be Left or Right.
- In the Logo settings, either some Logo text or a Logo image can be selected. The Logo text takes the heading font and there are four options for the Logo text scale which is calculated from the body font size. Both of these can be configured in Theme Settings > Typography.
If a Logo image is selected, the width can be adjusted between 50px-300px. Use the Center logo on large screens setting to position the logo to the center instead of the left. - In the Search settings, there is the option to minimise search on mobile and desktop. Refer to the Search bar article for more information.
- In the Navigation settings, choose whether to Center menu links on large screens and set the behavior for dropdown menus using the settings Links toggle dropdown menus and Add "Go to" links to submenus.
- Also in the Navigation settings, a Featured link can be created. This will show any of your top level menu items in the Accent color, which can be set in the Style settings. To have multiple navigation links appear in this color, separate each link text with a comma.
- In the Customer account settings, the Shopify customer account component can be enabled to display the Customer account menu and facilitate customer login.
- A Quicklinks - menu and Quicklinks - Call to action can also be added.
- Use the Style settings to set the Header background color, Header text color and Header accent color.
Tip
How to set up Quicklinks
Quicklinks - Menu
Add up to four extra links to guide customers to important destinations in your store. On large screens, they appear to the right of the main navigation beside the Quicklinks - Call to action button, while on mobile, they are shown below the main navigation links.
Steps
- Open the theme editor and in the Header Group, go to Header > Quicklinks - Menu
- Select a single layer Menu with up to four links (no dropdowns)
- Click save
Quicklinks - Call to action
The Quicklinks - Call to Action is a small button that can have a link applied to it and is particularly useful in catching customers' attention. It is anchored to the right hand side of the header.
Steps
- Open the theme editor and in the Header Group, go to Header > Quicklinks - Call to action
- Use the Icon, label, Link and color settings to customise the appearance
- Click save
Speed considerations
Using Logo text instead of a Logo image may help to increase speed scores. Refer to our Performance guide for more.
FAQs
How do I set up a mega menu?
Refer to our How to set up the mega menu guide which covers this in more detail.
How do I create a centralized header?
In the Header settings, ensure that the Center logo on large screens setting is turned on. In addition, ensure that there are no quicklinks or 'call to action' , and select Center menu links on large screens. In the announcement bar, ensure that there is only one announcement, and this will also be centered.
How do I change the header colors?
Customize the Header colors to suit your store.
Steps
- Open the theme editor and in the Header Group, go to Header > Style.
- Set the colors for Header background, text and accent.
- Click save.
How do choose if top level menu links open a dropdown or navigate?
Enterprise has two settings that give merchants extra control over how parent menu items behave - Links toggle dropdown menus and Add "Go to" links to submenus.
By default, a parent menu item can act as both a link and a dropdown trigger, which can be confusing for customers - especially on mobile. For example, you might have a parent menu item called Activities that links to /collections/activities while also containing a submenu of specific activity types. Tapping the arrow always opens the submenu, but tapping the parent item itself may either open the submenu or navigate to the linked page.
The Enterprise theme has settings allow you to control this behaviour and help avoid customer frustration:
Links toggle dropdown menus determines whether tapping the parent item opens the submenu instead of navigating away. It can be Disabled or set to show on Mobile only or Mobile and desktop. (New to version 2.3.0)
Add “Go to” links to submenus adds a dedicated link inside the submenu that takes customers to the parent link.
Refer to the mega menus guide for more information about creating menus.
Note - Use "#" as the link target if the parent menu item doesn’t need to navigate to a page.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us