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. Canopy 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 content customers can see as they scroll down. 

    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.

    In version 6.1.0 and above, there is an additional Hide menu on scroll setting. This controls whether the menu is included in the sticky header.

  3. In the Logo settings, either some Logo text or a Logo image can be selected. Choose the required Logo text font and select one of the four options available for the Logo text scale which is calculated from the body font size. 

    If a Logo image is selected, the width can be adjusted between 50px-300px using the slider. Furthermore, there are three different options with regards to the Logo position on large screens 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 Theme Settings > Search for additional settings.
  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. Choose the background and text colors for the Header section and menus using the settings in Header > Style.

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 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 > 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 Top center is selected in the Logo position on large screens setting.

How do I change the header and navigation colors?

On install the theme uses a generic set of colors. These can be customized to suit your store in the Header section. 

Steps

  1. Open the theme editor and in the Header Group, go to Header > Style.
  2. Set the Header background color and colors for the menus on desktop and mobile.
  3. Click save.
    Header-colors2.png
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