Our themes Showcase, Expression, Boost, Symmetry and Masonry support 'tag groups' - which allow you do add filters to your collection pages.
For example, if you're selling t-shirts which are available in different colors and sizes, you may want to create two 'tag groups' on your collection page which allows users to filter the color and size of your products.
Note: This video applies only to the Showcase theme
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 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.
This is what your tag group may look like for the Size and Color example:
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.