Canopy Theme

Settings

Some features only apply to Canopy theme versions published after 8th February 2016
(versions 1.2.0 and higher).

Presets

Choose from one of three Canopy theme presets - Elda, Thread and Kiln - to overwrite your current theme settings with those from our demo stores.

Colors

A wealth of color settings allow you to choose the right color scheme for your brand. While the settings are fairly self-explanatory, there are some which merit further explanation.

The button backgrounds/link text color is used extensively in the store, for button backgrounds, link text and product thumbnail labels such as "Sale" and "Quick buy". This makes it a great choice for your core brand accent color. For emphasis, the "Update Cart" button on the cart page and the arrows on the mobile navigation, use a reverse color palette where the button text and button background colors are swapped around. 

Tip: On hover this button background/link text color will become lighter to provide user feedback. Be sure to check that your text is still legible against the button background.

The Canopy theme includes the option for a site border. If you don't want to have a visible site border, then set this color to be the same as your store background.

Typography

The Canopy theme currently supports the websafe fonts Arial, Georgia or Times New Roman and 20 other selected Google web fonts.

The navigation font is used for the navigation main links on desktop and tablet screens, unless you have set your header layout to mobile navigation style on desktop. The heading font is used for the mobile navigation.

Please be aware using large font sizes may effect the layout of your store on different size screens, so it is worth checking on a tablet and phone as well as your desktop to make sure your fonts don't disrupt the layout.

Navigation

The Canopy theme includes the option for a standard drop down navigation and one full width mega menu. The standard navigation follows the usual Shopify method explained here. There are also a few additional settings which are explained below. 

The setting maximum number of links per column, in drop down menus allows you to control the look of your standard menu drop down by choosing the number of links displayed per column. There are a few built in safeguards. The theme won't allow the navigation to be split over more than 5 columns to ensure that it does not exceed the width of the browser. It's worth experimenting to find the value that best suits your store, menu options and chosen font sizes.

The setting maximum number of links per column does not affect the mobile navigation and also does not apply to the full-width mega menu.

Select show collection images in dropdown navigation to show images on the right hand side of the dropdown. Links to products will display the product's featured image in the same place. Note that these images are hidden when using the mobile navigation on desktop header layout and on a tablet or phone.

Tip: If some of your menu options are already expanded when you visit your homepage, this is just a simple set up issue - not a bug, and you won't need to alter any code to fix it. The likely problem here is that you have set the top menu items to link to your homepage. So when you visit the homepage, it intentionally expands these items. You need to set each of these top-level menu items to link to # - the hash/pound symbol.

Full Width Dropdown

The Canopy theme has a special feature that allows you to show one full width mega menu with up to 4 titled columns of links. 

Firstly, enter the name of main-menu item to show as a full-width dropdown. This menu item should be one of the links in your Main Menu. (Leave this field blank if you do not want to use the full width dropdown.)

Tip: This field is case sensitive. Please make sure you use the same mix of uppercase and lowercase letters used in your Main Menu navigation. 

Secondly, create a menu for your first column using the standard Shopify settings in Online Store → Navigation. Then enter a title for the first column in your full width drop down menu (this does not need to be the same as the menu you have just created) and select which menu to use for this column. These titles are shown as an extra menu layer in the mobile menu.

Create the menus for columns 2, 3, and 4 and enter your chosen column titles and menus for the other columns in your drop down menu as required.

Example:
In the Kiln demo store we created a full width menu, with four columns, under the "Shop" main menu item. Each column has it's own menu created in Online Store → Navigation. Remember, the separate theme settings for the menu and column title mean that the two don't have to match. In this example Nomad Dinnerware is the column title but it uses the menu link list called Nomad Collection.

Header

The Canopy theme includes four different header layout options:

  • logo in the middle
  • logo to the left
  • logo as the first item in the menu
  • mobile navigation style on desktop

Your logo can be an image or simply your store name. When using the logo width settings, please only enter a number for the pixel width - no other text.

Retina/ Hi-res Tip: Upload a double-sized logo image, and enter half of its width (in pixels) above, to show super-sharp on retina screens.

If show search box is checked the search box will be displayed in the top left hand corner of the header. The setting only show products in search results determines whether the search results list only products, or also return blog articles and other pages which include the search terms.

The footer appears at the bottom of all pages on your store, whether users are browsing on a mobile device or desktop. It is a place visitors frequently go to look for information about your store, such as contact details, so it's worth spending some time to get the content right.

The Canopy theme offers a choice of a simple or fully featured footer design. Both methods support a footer link list that is consistent throughout the storefront to let customers navigate your store. The fully featured footer allows you to add two additional columns of links to your footer. Create the new menus in Online Store → Navigation and then select them in the theme settings.

Home page

The Canopy homepage is created using rows of content. Choose which rows to display on your homepage and set the order. The options are:
  • Slideshow
  • 3 product rows
  • Promotional images grid
  • Wide promotional image
  • Featured blog
  • Featured content
  • Featured full-size content
  • Instagram

Looking for royalty free stock photos? Try here:

Stock Images

Home page - slideshow

The Canopy slideshow supports up to 5 images for display on your homepage.

We recommend using images that are the same height and at least 1200px wide, ideally around 1800px. Left and right arrows will be automatically displayed if you choose to enable more than one slide. 

Remember that if you are adding links to an external site you must prefix the address with http://

The overlay text will appear below the slideshow image on mobile and tablet device sizes. For best results, choose a consistent approach and either add text to all your slideshow images, or add the text as part of the image for all slides. The text font for both lines are taken from the Heading font set in Customize Theme → Typography. If no button text is entered, the button will not be shown.

The three homepage product rows enable you to showcase your products on the homepage. Choose a collection of products to display for each row.

Home page - promotional image grid

Up to 10 images can be added to the promotional image grid. These images react dynamically depending on the device / screen size so they will always display beautifully. 

Set the maximum number of images per row. The actual quantity is calculated automatically based on the users screen width and the number of images you have added. The spacing between images setting allows you to customize the layout further. 

Home page - wide promotional image

The wide promotional image setting is designed to display a full page width image in a single row. 

The featured blog allows you to show the three most recent articles from your chosen blog on the homepage and, if desired, to crop your article image to enhance the layout.

Tip: To limit the amount of the blog posting you wish to display on the homepage or, simply to make the blog postings look evenly sized on the page, use Shopify's blog excerpt feature. Head over to your blog article and click on the "Add excerpt" link just below the blog content.

You can add video, images and text to a page and display it on the home page as featured content. This home page row will display the content using the standard page width. It's important to add content responsively so that it displays perfectly on all device sizes. This Shopify article explains how.

Tip: To show a wide image in your content that goes beyond the central column of the text, click on the image in the text editor, and add the word fullwidth to the end of the ALT text. (e.g. 'Crisp white linen shirt fullwidth')  Don't worry - the word 'fullwidth' is stripped out by the theme, so it won't affect your SEO.

The Canopy theme offers the opportunity to show a full width content page. Again, the page content could be video, images or text. Be sure to embed your page content responsively as explained here.

Home page - Instagram

To show Instagram on your home page, firstly create an access token here. The setting Instagram account to link to displays a link in the top right corner above your instagram images. Type the name of the account here, for example NASA, and a link showing 'Follow @NASA' will automatically appear. Leave blank if you don't want to display a link. 

Product page

The Canopy theme's flexible options enable you to create a product page to suit your products, choosing the information you need to present your products in the best possible light.

Choose to show vendor name, product type or SKU. The label text can be translated, using the Shopify Language Editor, should you wish to use this field to display other product information.

Check the enable image zoom setting to use a product zoom on larger screen sizes. Please note the theme cannot enlarge images, so they will be shown at their original maximum size in the product zoom. The image zoom is not designed to operate on mobile screen sizes.

Use the show quantity box to determine whether a quantity box is displayed.

The Canopy theme includes the option to show boxes, instead of dropdowns, for some options. Commas should be used to separate the option names, without additional spaces. 

Please take care to check the spelling and case used in the option names. Boxes will only show an unavailable state (crossed-out) when there is only one option (e.g. size, or color). When there is more than one (size AND color), it will not do this.

Product description location

Choose from the options:

  • In right hand column
  • Full page width

Tip: If you are using the full page width option for your product description, it's also possible to include an image that is wider than the central column of the text. Click on the image in the product description editor, and add the word fullwidth to the end of the ALT text. (e.g. 'Woman wearing our crisp white linen shirt fullwidth')  Don't worry - the word 'fullwidth' is stripped out by the theme, so it won't affect your SEO.

The setting enable notification bar allows you to show a bar under the main menu. Use this for current announcements or offers, such as 'Free postage on all orders over $50'. 

The notification bar will tone seamlessly with your store color scheme as the colors are taken from Customize Theme → Colors → Background and General text.

Related products

Show other products from the same collection, underneath the product details by selecting show related products.

Theme versions between version 1.2.0 (released February 2016) and version 1.2.4 (7 June 2016) do not include this built in method of showing related products.

The theme includes built in support for Shopify reviews on the product page and for products on the homepage and collection pages.

Collection page

Header

Collection header style 

Banner fit Featured image spans page width. Sits above title and description.
Banner wide Featured image spans browser width. Sits above title and description.
Color background Featured image shown beside title and description, sitting on a single color background (set in Customize Theme → Colors → Collection header background)
No image Featured image not shown. Title and description only.

Filters

Product tags can be added to products to help customers to filter the products on a collection page. Choose between boxes and dropdowns for your tag filter style.

Check the show 'sort by' dropdown setting if you wish to display the 'sort by' dropdown. The 'featured' sort order is the 'manual' option if you have chosen to sort your collections manually in Admin → Products → Collections. There is no need to show the 'featured' sort order if you have not sorted your collection manually.

Sidebar

Choose the show collection sidebar option to show an additional menu on the collection page. Select the menu to use for the sidebar menu. Click here for more information about creating menus in Shopify. 

Due to the space constraints of mobile devices, this sidebar menu is not shown on mobile screen sizes

Tip: To show headings in your sidebar use a #heading link in your menu.

The Canopy theme also includes the option to show page content under this menu which could contain images or text. This provides a great opportunity to cross-sell and add messages. 

Layout

Control your category page layout by choosing the maximum number of products on each row and page. The theme includes the option to enable infinite-scroll. The theme includes built in code to support Shopify product reviews but we advise switching the infinite scroll option off if you are using product reviews.

Product Thumbnails

Choose whether product title and price should be displayed beside each other or above each other.

Product Labels

The theme supports product labels on the home and collection pages.

There is only room for one to show at a time, so there is a priority order in which these are shown.

  1. Sale
  2. X left in stock
  3. Sold out
  4. Custom

The colors used for all the labels are those selected for Customize Theme → Colors → Button backgrounds/link text.

Show sale label

This label will be shown on products where one of the variants has a compare-at price is set to a value that is higher than the current price. 

Show sold out label

Choose whether to show a sold out label on your product thumbnails.

Enable low inventory

This will ONLY work for products with a single variant.

Low inventory limit

Select the stock level at which the 'Only X left!' label should show.

Custom

There is no theme setting for the custom label but you can add one with your own choice of text. To do this add a tag to the product with the format: meta-label-YOUR LABEL TEXT! That's 'meta-label-' and your label text. Note that the text cannot contain a comma. Spaces, capitals, exclamation marks, etc, are all fine!

Quick Buy

The quick buy allows shoppers to add items to the cart directly from a collection page. Choose whether the quick-buy button should appear in the middle or the top right hand corner of the product thumbnail image.

Collections listing page

Collections listing pages allows you to show off your collections. The Canopy theme gives you the ability to choose what collections to show and, if you like, add a sidebar menu too. 

The Canopy collections listing page template showcases a handful of products from each of your chosen collections. 

Collections listing (shows list of collections)

  1. Create a menu in Online Store → Navigation containing the collections you wish to display. The menu must only contain links to collections.
  2. Create a page in Online Store → Pages, with exactly the same handle as the menu you made in step 1. The page handle is shown in the "URL & Handle" field when you edit your page.
  3. Scroll to the bottom of that page edit screen - change the template to 'page.list-collections', and save the page. The templates listed here are only those for your published theme so you may need to publish your theme (at least while you make the selection) in order to see this template in your page template drop down.
  4. Go back to Online Store → Navigation and add the new collections listing page to your Main Menu or wherever you would like it to be in your store navigation.

Collections Listing Page Header Style

The collection listing page takes the header style options from the settings for your standard collection page. These are managed in Customize Theme → Collection page → Header → Collection header style. You can choose from the options Color Fit, Banner Wide, Banner Fit or No Image.

Tip: To add in text or an image to the header of your collections listing page, simply go back to the page you created in step 2 above, add your text and image to the page content. These will be displayed in the header using the style chosen for your standard collection pages.

Collections Listing Page Sidebar

Display sidebar

As with a normal collection page, you can choose whether to show a sidebar menu on your collections listing page.

Due to the space constraints of mobile devices, this sidebar menu is not shown on mobile screen sizes

Select the menu to display in the sidebar

Tip: You can also create groups under headings in your sidebar menu as shown on our Elda demo store. Simply enter the heading title as the link name in your menu and link it to a web address with the value #heading. These link names will then be enlarged to give the appearance of headings in the sidebar.

Create a page containing images and/or text for display in your sidebar under the menu. This is a great opportunity to cross-sell and communicate with your customers.

Blog page

The Canopy theme offers a number of different flexible blog layout choices.

The tag filter will show your tags in boxes at the top of the blog page and underneath the individual articles. To show tags under the article excerpts on the blog page use the setting show tags under each article.

Choose whether to show the article author on the blog page or the article page and whether to show comments and posting date.

If infinite scroll is enabled on the blog page, when you scroll down the page, more articles will be fetched and shown underneath. This gives the impression that all your articles are listed out on a single page.

Article layout

This controls the layout of your blog postings and blog excerpts on your blog page. The theme offers a number of layout options. The Tiles - in columns layout is used in our Kiln demo store.

Choice of:

Full Width Each article sits on its own row.
Tiles - in rows Each article shows in a small tile, arranged in rows.
Tiles - in columns Each article shows in a small tile, arranged in columns (Pinterest style). Using the Masonry layout to fill in any spaces.

Tip: to control what is shown on your blog page, you can use article excerpts. Click on the add excerpt link below your article content in Admin → Online Store → Blog Posts.

Tip: to allow an image to display wider than the central page column, add the word fullwidth to the end of the alt-text for that image. This also works on standard pages. Don't worry - the word 'fullwidth' is stripped out by the theme, so it won't affect your SEO.

Social media

Use this section to manage the social media icons on your store.

[info ] Enter the address for each social media channel you use. Don't forget to use the full url for your social links including the https://

Cart page 

General

Choose the cart type

Page Customers go straight to the cart page. Choose this option if you experience issues with 3rd party apps
Drawer Customers will stay on the same page. This feature is also be known as 'AJAX add to cart'

This setting does not apply for mobile devices where the customer is always taken straight to the cart.

A notification bar can also be shown on the cart page. This can be useful for current announcements or offers, such as 'Free postage on all orders over $100'.

The notification bar will tone seamlessly with your store color scheme as the colors are taken from Customize Theme → Colors → Background and General text.

Side bar

If enable sidebar cart summary is not checked, clicking the cart total in the header takes the customer directly to the cart page.

Continue shopping
Your Order

You have no items in your cart