Canopy theme support

Theme settings

Colours

Buttons

Displaying your brand’s accent colours on your buttons can really make your storefront shine. Having colour consistency and a visual continuity throughout your site helps build confidence and familiarity with your brand.

Change your button background colour and text link colours here:

Admin > Online store > Customise theme > Theme settings > Colours > Buttons > ‘Background’ or ‘Text’

On hover, your buttons will automatically ‘accent’ to become lighter in colour, as a visual cue to show the user this button is an interactive element of your store.

Tints / overlays for sections with images

Some sections that contain images will let you choose a type of ‘tint’ which overlays the image itself. Applying a tint helps make any section text more legible, particularly when an image used has colours which are very similar to the font. For example, in the “Image with text overlay” section, you could cover the whole image (Standard), or just the bottom part of the image (Bottom). Or you may only want to include the tint behind the text itself – in which case you can choose Text Shadow. If you pick a setting such as Bottom, be sure to align your text to the bottom of the image as well.

You can pick your tint and text colour here:

Admin > Online store > Customise theme > Theme settings > Colours > Image tints > ‘Background’ (or ‘Text’)

Typography

The Canopy theme includes the option to choose your button shape and whether buttons should be capitalised or not. Headings can also be capitalized across the site. All three options can be found here:

Admin > Online store > Customise theme > Theme settings > Typography

Products

The theme’s settings contain a few different product related options which can be found here:

Admin > Online store > Customise theme > Theme settings > Products

Product grid layout

The various ‘grids’ of products that display around your store, like ‘Featured Collection’ section, or ‘Collection Page’ can be styled using controls found here:

Admin > Online store > Customise theme > Theme settings > Products

Choose from options such as: spacing, gaps, borders, image shapes, text alignment and more.

Product labels

Canopy supports product labels on the home and collection pages, which you can see an example of below:

There is only space for one label to show at a time, so there is an order of priority applied as to which of these are shown.

    1. Sold out – shows when Shopify manages the inventory and customers cannot purchase out of stock items
    2. Sale – shows if a product’s compare at price is set higher than its actual price.
    3. X left in stock – only for items with a single variant
    4. New In – shown for new products.
TIP! – If the ‘Sold out’ label is shown, this takes priority over all other labels.

The theme can determine if a product is ‘New In’ in one of three ways:

    1. Collection – will show when a product is in a collection with ‘new’ in the handle.
    2. Tag – add the tag ‘New’ to the product.
    3. Date – choose the number of days ago that the product was created.

Quantity controls

The quantity controls that show on the ‘product page’, ‘featured product’ section and ‘quick buy’ popup can be controlled with this setting.

If set to ‘Standard’ – the controls will always show quantity as ‘1’ by default, and adding an item to cart will add one more to the cart (or however many is entered in the quantity box).

However, if this setting is set to ‘Show quantity currently in cart’ – the number in the quantity controls will reflect how many of that item are currently in the cart. Pressing + and – will increment/decrement that number in realtime, and the ‘Add to cart’ button will change to ‘Remove from cart’ when the item is in the cart.

Quick buy

Choose from two different ‘quick buy’ styles:

  1. A circle that shows over your images on hover
  2. A button that shows underneath the product and allows you to add single variant products straight to the cart

Hide the “Buy it now” button & Express checkout buttons (Paypal/GPay)

Steps outlined in the video above:

  1. Head here: Admin > Online store > Customise theme > Theme settings > Navigate to your product page
  2. Expand the “Product pages” option in the left-hand panel
  3. Choose “Buy buttons/quantity”
  4. Uncheck the “Show dynamic checkout button” tickbox
  5. Save changes

Search

With search settings, you can determine which elements of your store can be searched, for example, products, pages, articles etc.

Activating ‘Enable search suggestions’ allows the store to automatically suggest matching products, in realtime, as the customers type in the search box within the header.

Steps outlined in the video above:

  1. Head here: Admin > Online store > Customise theme > Theme settings > Search
  2. Choose from the “search only” dropdown and select your desired function.
  3. Choose from additional options such as “enable search suggestions”, “Show vendor”, “Show price” and “search tags and SKUs”
  4. Save changes

Plus:

  1. Head here: Admin > Online store > Customise theme > Header > Search
  2. Choose from the “search appearance” dropdown and select your desired function (show just the search icon or search box etc).
  3. Toggle “enlarge search box on desktop” if you wish to extend the horizontal width across the header.
  4. Toggle “show product type dropdown” if you wish to show a list of product types.
  5. Save your changes

 

Here’s how some of the above options appear:

Search appearance > Icon

Search appearance > Search box

Enlarge search box on desktop

Show product type dropdown

TIP! – Turn off ‘Search tags and SKUs’ to improve search speed

Layout

The spacing between sections can be adjusted here, and also ‘section dividers’ (lines in between sections) can be turned on here.

Cart

The Canopy theme includes the option of a sidebar cart drawer (in addition to the standard cart page). See the Cart drawer help page for more information.

Animations

As you scroll down the page, sections will animate as the content populates the page. This can be turned off here.

Theme styles

The Canopy theme is available in 3 styles – Natural, Fresh and Light. These demo stores aim to illustrate the variety of looks possible with the theme. Choose your theme style in the ‘Theme settings’ tab. The style settings will affect cross-store elements such as your fonts, colours, cart behaviour and social media icons.

Note! – Applying a theme style will overwrite any existing settings in your ‘Theme settings’ tab. Your section-specific settings won’t be affected.

Did you find this article helpful?