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. Set the Mobile menu icon position.

  3. In the Sticky header 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.

    Use the Hide menu on scroll setting to control whether the menu is included in the sticky header.

  4. 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.
  5. In the Search settings, there is the option to minimise search on mobile and desktop. Refer to Theme Settings > Search for additional settings.
  6. 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.
  7. Also in the Navigation settings, a Featured link can be created. This will show any of your top level menu items in the Header accent color. To have multiple navigation links appear in this color, separate each link text with a comma.
  8. In the Customer account settings, the Shopify customer account component can be enabled to display the Customer account menu and facilitate customer login. 
  9. Add a Call to action button to the Header for an additional link.
  10. Use the Style settings to set the background and text colors for the header and menus for desktop and mobile.

Tip

To change the cart icon in the header, go to Theme settings > Cart where there are three options to choose from - bag, basket and drawer.

How to set up the Call to Action 

The Call to Action 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.

Steps

  1. Open the theme editor and go to Header > Call to action. Select Show call to action.
  2. Use the Icon, Label, and color settings to customise the appearance of the button. 
  3. Add a Link.

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

How do choose if top level menu links open a dropdown or navigate?

Canopy 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 Crafts that links to /collections/crafts while also containing a submenu of specific craft 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 Canopy 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 7.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.

Bring your business ideas to life with Shopify

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