The header can be divided roughly into three horizontal parts, shown in the below screenshot:
- Announcement bar
- Navigational links
The Announcement bar is a separate section to the Header section. As well as the announcement itself, it can contain the language/currency dropdowns and social media links. Please note, a setting to show the social media links on mobile is contained with the Header section (see below):
The toolbar is the dark green portion pictured above, (marked as ‘number 2’) and can contain the store’s logo, search bar or icon, user account icon and the cart icon. The logo could alternatively be placed in the menu links, and aligned left or right. As you move the logo around or realign it, the search bar will automatically move to a new position. Please note, we’re unable to provide custom coding to amend this. If the theme settings don’t provide you with the exact configuration of header needed, you may want to consider hiring TaskHusky or finding a Shopify expert.
The cart icon can be changed between a basket or a shopping cart. For any other icons, you could reach out to TaskHusky or a Shopify expert (see links above).
Canopy provides a number of settings for the layout of the search box, which will always show in the toolbar (unless it’s turned off).
Choose either an icon which shows a search box when clicked, a search box directly in the toolbar, no search option at all, or an icon on mobile with search box on desktop:
You can also show a ‘product type‘ dropdown, by clicking ‘All’ within the search bar itself:
This will list all of the the ‘Product type‘ fields you have set in the Shopify admin area for each product. Here’s where you do this:
Please note, it’s not possible for us to customise the list of ‘product types‘ in the dropdown (example: the order they are displayed, or hiding some and not others) as it’s simply determined entirely by those you set in the backend.
Canopy supports both a standard 3 tier drop-down navigation and a full-width mega menu.
The theme switches the menu into a full-width mega menu when every link inside a dropdown also has a dropdown.
To make mega dropdowns, like the one in this demo store, you need to create Nested Navigation as follows. Under the menu item, you’d like the mega menu to drop down from, add as many title links as you like. Each of these title links must then have its own items nested inside for the dropdown menu to turn into a mega dropdown menu:
This article explains more about creating a mega menu.
Add other menus in your store following the usual Shopify method explained here.
Mega menus can have ‘menu promotions’. These are images with text on them that help highlight an aspect of your store within the menus.
To add these, go to Admin > Online store > Customise theme > Header > click ‘Add menu promotion’.
Within here, you can define up to two ‘calls to action’ per menu item. The label of the menu item needs to be defined in the field ‘Dropdown link title’.
For example, on the Natural demo store shown above the ‘calls to action’ appear under ‘Groceries’, so the ‘Dropdown link title’ field is set to Groceries: