The header navigation can be divider roughly into three parts – the announcement bar, toolbar, and the links, eg:
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. It 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.
Note, 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).
It can be either an icon which shows a search box when clicked, or it can display as a search box directly in the toolbar, eg:
It can also show a product type dropdown, pictured above. This will be all of the the Product type fields as set in the Shopify Admin area for each product, eg
Please note, it’s not possible for us to customise the list of Product Types in the dropdown.
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 Theme Settings > Header > click ‘Add menu promotion’. Within here, you can define up to two call to actions 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 call to actions appear under Groceries, so the ‘Dropdown link title’ field is set to Groceries, e.g.