Header section

The Header is a critical section that gives a snapshot of the entire store.

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.  

How to set up the Call to Action 

The Call to Action functionality is new in version 1.3.0. It is a small button that can have a link applied to it and is particularly useful in quickly catching customers' attention. It is anchored to the right hand side of the header.

How to set up the call to action

Steps

  1. Open the theme editor and in the Header Group, go to Header > Quicklinks - Call to action
  2. Use the Icon, label, Link and color settings to customise the appearance. 
  3. 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

Can I remove the empty space when the search is minimised?

This is currently not possible, but will be considered for an update in the future.

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 a CTA, and tick Center menu links on large screens. In the announcement bar, ensure that there is only one announcement, and this will also centre.

Sign up for Shopify today for $1

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