Help Needed: Tag Filtering on CMS Content

Design help CMS
1

Hi! I’m trying to set up tag filtering so that when a user clicks a yellow tag button, they’re taken to the Newsroom page showing posts related to that tag. I’m having two main issues below:

Picture1
Picture1360×110 2.01 KB

  1. On the Tags Template collection page, I’ve filtered the collection list by the current tag. This works, but it hides other posts from the filter dropdown. Is there a way to override this so the user can still see and select all other tags?

Picture2
Picture2602×389 53.5 KB

  1. When the page loads, the filter should show the tag that was clicked. However, this isn’t happening.

Any suggestions or better methods to achieve the above? Thanks!

Here is my public share link: LINK
(how to access public share link)

2

Published Site: Test-Site
Read Only Link: Webflow - Test-Site

I should mention that I am using Finsweet js script for this: CMS Filter for Webflow - No-code using Attributes

3

@Viridris 1. Problem: Tag Dropdown Only Shows Filtered Tags (Not All Tags)

Why this happens:

  • When you filter a collection list by a tag (e.g., “Business”), Webflow only displays posts with that tag, and the dropdown reflects only those tags.

Solution:

  • Use a separate, unfiltered collection list just for the dropdown.
    • Keep your main collection list filtered by the current tag (for displaying posts).
    • Add a second collection list (hidden) that shows all posts (no filter) to populate the dropdown.

Steps:

  1. Duplicate your collection list (for the dropdown).
  2. Hide it visually (set display: none or move it off-canvas).
  3. Apply Finsweet’s filter to this hidden list so the dropdown shows all tags.
  4. Keep the main list filtered (for displaying posts).

Code Adjustment (if needed):

  • Ensure Finsweet’s filter is only applied to the dropdown’s collection list, not the main one.

2. Problem: Clicked Tag Isn’t Auto-Selected on Page Load

Why this happens:

  • The filter dropdown doesn’t know which tag was clicked initially.

Solution:

  • Pass the tag as a URL parameter (e.g., ?tag=Business).
  • Use JavaScript to auto-select it on page load.

Step 1: Modify Tag Links to Pass URL Parameter

  • Change your tag button links from:
    https://test-site-3a6ef3.webflow.io/newsroom
    → To:
    https://test-site-3a6ef3.webflow.io/newsroom?tag=Business

Step 2: Add JavaScript to Auto-Select the Tag

// Wait for Finsweet’s filter to load
window.addEventListener('DOMContentLoaded', function() {
  // Get the tag from URL (e.g., "?tag=Business")
  const urlParams = new URLSearchParams(window.location.search);
  const selectedTag = urlParams.get('tag');
  
  if (selectedTag) {
    // Find the dropdown option and set it as selected
    const dropdown = document.querySelector('#your-filter-dropdown-id'); // Replace with your dropdown ID
    if (dropdown) {
      dropdown.value = selectedTag;
      
      // Trigger a change event (in case Finsweet needs it)
      const event = new Event('change');
      dropdown.dispatchEvent(event);
    }
  }
});
4

Hi,

Thanks for taking the time to look into this. Unfortuntely, I’m still having issues. Perhaps, I’ve missed something? I’ve screen recorded myself attempting both solutions. I’d appreciate if you can point out my mistakes.

Attempt
1. Problem: Tag Dropdown Only Shows Filtered Tags (Not All Tags)

I’ve added a second (hidden) collection list, but how to get it to be visible and disable the one that is filtered by the current tag?

All current dropdowns are Select fields. However if I use a dropdown field element instead ‘Dropdown (Tags)’ - it solves problem 1, but problem 2 remains.

2. Problem: Clicked Tag Isn’t Auto-Selected on Page Load

I can’t seem to get this solution to work. Maybe the script isn’t going in the right place? I’m also unsure about where to the tag button links.

5

Hey @Viridris,

If you are using ‘Dropdown (Tags)’ to solve the first problem, make sure you give it a unique ID and replace the ‘#Category-2’ in your custom code with the ID that you give for this ‘Dropdown (Tags)’ element.

And for the code to work, i.e. auto-select the tag in the dropdown tag element, the link you passed for each tag should have query parameters (i.e. ?tag=blue for the blue tag link)at the end like for example:
‘yourwebsite/tags/orange?tag=orange’

This should be followed for each link that you have in the dropdown and then the code would work, so whenever a user selects a tag from the “Dropdown (Tags)” element, the respective tag collection template would load with the dropdown being auto-selected for it. This is what you can do for your current setup.

That being said, since you are using a collection template page and each URL anyway has the tag name in it like ‘website.com/tags/blue’, you can probably customize the code you are using to take the value after ‘/tags/’ in the URL, instead of adding a query parameter for simplicity purposes.

Or you could also check the ‘Show Query’ feature in Finsweet’s List filter, via which you can add that attribute to the collection list in the template page and let the auto-selection of dropdown when a user selects a tag happen automatically without any use of custom code if you prefer that.

There are various approaches to solve this, hope this gives you some idea for your project.

1 Like