Canopy theme support

Using filters / tag groups in collection pages

Please note if you are using a theme running OS 2.0 this guide no longer applies as this has changed. To discover how to set up filter, head to our guide through this link

OS 2.0 Guides

How to set up collection filters in OS 2.0

How To Create A Sub Collection Within A Collection (OS 2.0)

Pre OS2 Version 1 guides

Our themes Showcase, Expression, Boost, Symmetry, Masonry and Canopy support ‘tag groups’ – which allow you to add filters to your collection pages.

For example, if you’re selling t-shirts that are available in different colours and sizes, you may want to create two ‘tag groups’ on your collection page which allows users to filter the colour and size of your products.

Please note we have made updates to our Tag Group feature so depending on what version of the theme you are on, you may see a different style

Old Style: In this version, you can put the tags and add comma’s to separate them.

New Style: If you don’t see this you can update the theme to get this or the theme has not had the new style added to it yet. You will add each tag on a new line like the image below. No need to add commas.

Video Guide (pre-OS 2.0)

For colour swatches, be sure you have enabled them in theme settings > product > enable swatches. Make sure to add the name of the colour variant the same way it’s spelt on a product. If not, they won’t show.

Note: This video applies only to the Showcase & Symmetry theme latest versions

Step 1 – Add tags to your products

Due to limitations with Shopify, it’s not possible to directly filter on variants options for a product. Instead, we need to create tags for each product that we want to filter on.

Go to your product in the Shopify Admin area, and at the bottom of the right-hand panel, add the tags that represent the variations the product is available in.

For example, the Sizes and Colors of a particular product may be:

Repeat this for all products which you’d like to be filterable.

Tip: Be sure to enter all tags in the same case on all products. For example, don’t add the tag ‘Red’ to one product, and ‘red’ to another.

Step 2 – Add your tag groups

Go to the Theme Customizer, and change to Collection pages.

On the left-hand side, you should see an option to add a tag group (if your theme supports tag groups!). This may look slightly different in each of them – for example, Symmetry supports two tag groups, and you need to tick the ‘Show’ checkbox for them to show. Showcase version 4 onwards supports multiple tag groups – click ‘Add Tag group’ to add one.

You then need to enter the label/name of your tag group, and then the tags themselves.

  • Name/label: This is the label that shows next to your filter on your collection page.
  • Tags to include: This should be in the same case as the tags added to your products, and separated by commas.

 

The filters that then show on the collection page will be built from these options. If none of the products within the collection have a particular tag then that option will not be shown. For example, if none of the t-shirts with a collection come in Red (i.e. have the ‘Red’ tag associated with them), the Red option will not show.

If the products within a collection have none of the tags for a particular tag group, then the entire filter will not show. For example, if you also sold hats, none of which have customizable colors or sizes, when you create a hat collection, none of the filters in this example would show.

Things to note

  • Your customers won’t be able to select more than one option from a particular tag group. For example, users couldn’t select Red AND Blue, they could only select one or the other. However, they could select Red AND Large, because these are in two different tag groups. This is due to limitations with the standard Shopify platform – but if you do want this you may be able to find an app on the app store which can help. You could possibly create a tag called ‘Red and Blue’ which you add to a product and a tag group, although this isn’t perhaps the best user experience.
  • Avoid having two tag groups with the same name which could show at the same time.

Did you find this article helpful?