Header section

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.

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

1. Open the Theme Editor and in the HEADER GROUP, select the Header section.
2. 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.
3. 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. In addition, in version 1.3.0, there is a Centre logo on large screens setting, which allows further customization of the header.
4. In the SEARCH settings, there is the option to minimise search on mobile and desktop. Refer to the Search bar article, to see additional search capability available in version 1.3.0.
5. 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.
6. A basic Quicklinks menu can also be included. This is a short additional one level menu which features on the right hand side of your main navigation.

Tip

To change the cart icon in the header, go to Theme settings > CART where there are three options to choose from.