The Canopy theme includes the option of a sticky header, meaning the main navigation menu sticks to the top of the browser window as a user scrolls down the page.
There is also the option to toggle whether your social media links show on mobile.
Your logo can be an image (or simply your store name in text format if no image is uploaded). Both mobile and desktop can have their own dedicated logo, with independent slide bars in the settings to choose the width of each, in pixels.
The location of your logo can be either nestled within the ‘menu links’ or above them (‘toolbar’ option). Choose from a ‘left’ or ‘center’ alignment.
The Canopy theme includes the option for standard drop-down menus or full-width mega menus. Create drop-down menus in your store following the usual Shopify method explained here.
The standard dropdown menus support three menu tiers and can be split across multiple columns if you have lots of links. The theme switches the menu into a full-width mode when every link inside a dropdown also has a dropdown:
On mobile, tapping the link text of menu items with sub menus can either ‘Open the submenu‘ or ‘Go to the page‘.
Menu links can be aligned to the ‘Left’ or ‘Right’. Use the slider to determine the ‘Maximum number of links per column’ value. A ‘Shopping cart‘ or ‘Basket‘ icon can be selected to display.
To have one of your main navigation links display in a different colour to the rest, add the name of this link (exactly as displayed on your storefront) in the ‘Featured link‘ entry field:
Select your desired colour from:
Admin > Online store > Customise theme > Theme settings > Colors > Navigation > Featured link color
Change your store’s ‘Search appearance‘ by choosing ‘Icon‘, ‘Search box‘, ‘Icon on mobile, search box on desktop‘, or ‘None‘.
Add images into your dropdown menus – great for adverts and promotions! Enter the title of one of your top tier dropdown menu links and then choose your image, text and link.
Useful points to keep in mind:
- You can add more than one image to a dropdown menu and the images are not visible in the mobile menu.
- This feature was added in version 2.8.3 to replace the menu on hover images.
Steps shown in the video above:
- Head over to the theme editor and select your ‘Header‘ section, then scroll down to the bottom of the list until you reach ‘Content‘.
- Click ‘Add Menu Promotion’ if one is not already added and open it.
- Inside “Dropdown link name” put the menu title you want it to appear under.
- From here, select the image, place the text you would like to appear, under it.
- If you want to add a link you can give it a title and select the link you wish for it to point to.
The Canopy theme offers a choice of two layouts – ‘Simple’ (navigation links arranged horizontally) or columns (stacked links). The columns option is shown below. You can also display an image for both of these options if you wish.
Payment icons are pulled directly from Shopify based on your payment settings.
How do I edit the text at the bottom of my pages?
Footer text such as “Powered by Shopify” can be edited or removed in the Language Editor