Collection tags: Add a background color to active tags

Collection sidebar tags can be combined to provide deep filtering. For example, when a tag is selected from the collection sidebar, it becomes active. If you click a second tag, both are active and the filter results are now based on products that have both tags in that collection. The normal behaviour is single tag filtering. 

To enable multi-tag filtering, edit this file:

snippets/collections-sidebar.liquid

Change this line:

From:

{{ tag | link_to_tag: tag }}

To:

{{ tag | link_to_add_tag: tag }}

Example after:

Save the file.

After making that modification the behaviour changes from single tag filtering to multi-tag filtering. 

To help emphasis active tags, you can add a background color. Here's how to make that modification with this CSS style code: 

/* -- code to add background color for active collection tags -- */
.collection-nav .collection-nav--active>a {
    background-color:#ddd; 
    padding:2px;
}
/* - end - */

Example after:

You can use any hex color code for the background color:

http://www.colorhexa.com/web-safe-colors


Where do I add the CSS style code?

Use this link to learn where exactly to add this code snippet:

Where to add your CSS style code

Still need help? Contact Us Contact Us