Canopy theme support

Navigation/Announcement bar

Please note, this article relates to Canopy version 3.0.0 onwards. If you are missing any settings described below, please update your theme.

The header navigation can be divider roughly into three parts – the announcement bar, toolbar, and the links, eg:

Announcement bar

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).

Toolbar

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).

Search

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.

The setting to turn off predictive search is in Theme Settings > Search, read more here.

Mega menus

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.

Menu Promotions

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.

Note: Menu promotions will only show within mega menus. They won’t show in the mobile navigation, so don’t use promotions as the only way to get to a page.

  Worthwhile reading:

Image sizes Theme updates Page Speed SEO

  Looking to customise beyond our settings?

Our support covers assistance for your theme and settings as originally supplied.
If our settings don’t include a specific control you’re looking for, you can hire a developer to customise the theme code.

We recommend Taskhusky for altering your theme code:
Click here to request a custom coding quote from Taskhusky.

Be sure to read this article before changing code!