Use custom attributes to hide specific CMS items from Webflow site search results.
Although you can natively exclude entire CMS Collections from site search, there may be times where you only want to exclude specific CMS items (and not the entire Collection). To do so, check out the instructions and resources below.
https://webflow.com/made-in-webflow/website/exclude-cms-items-from-site-search
If you haven't already done so, follow the directions in this Webflow University guide to add and style site search in your project. Note: Site search is available only on sites with CMS Hosting or a higher site plan tier.
For each of the CMS Collections you plan to partially exclude from site search, navigate to its corresponding Template Page Settings. If it isn't already configured accordingly, set the Search Title to the Name of the CMS item. Do not add any additional text or characters.
On your Search Results page, add a text element to your Search Result Item element and bind it to the Search Title. If you do not plan to display an item's Search Title, you may optionally add a CSS class to hide it (display:none;).
For each of the CMS Collections you plan to partially exclude from site search, create a new Switch field within the Collection structure. You may want to name it something similar to "Exclude from site search?"
Once the switch field is in place, update your CMS items accordingly — toggle the switch to "Yes" for any items that should be hidden from your Search Results page.
For each of the CMS Collections you plan to partially exclude from site search, add a Collection List element to your Search Results page. Connect it to your relevant CMS Collection(s). Because these Collection Lists will be removed from the rendered page, you can place them anywhere you would like and it is not necessary to style them.
Once they are connected, filter each Collection List by "Exclude from site search? is On" — the Collection List should only display the CMS items that will be removed from your search results.
For each of the Collection Lists on your Search Results page, add a Text Block to the Collection Item block. Bind it to the Name of the CMS item.
By default, when there are no matching results for your visitors' search query, Webflow will display its own native empty state through server-side rendering. However, the excluded CMS items will be removed client-side on the Search Results page, so Webflow's native empty state will not appear.
To resolve this, you will need to create and a style a custom "empty state" that mimics the native one (you can likely reuse the CSS class applied to the native empy state). Be sure to add your custom empty state as a sibling element of your Search Result Wrapper in order for it to appear in the same place as the native one.
The custom empty state will be hidden when the Search Results page loads. It is not required to add any additional CSS properties (such as "display: none" through a combo class), although you may optionally do so if you prefer to hide it in the Designer.
On your Search Results page, locate the "Search Results List" element. From the Element Settings panel, add the following custom attribute:
- Name:
exclude-cms-items - Value:
results
On your Search Results page, locate the "Search Results List" element. From the Element Settings panel, add the following custom attribute:
- Name:
exclude-cms-items - Value:
title
For each of the Collection Lists on your Search Results page, navigate to the Element Settings panel and add the following custom attribute. Be sure to add this on the Collection List (and not the Collection List Wrapper); repeat this step as needed.
- Name:
exclude-cms-items - Value:
remove
On your Search Results page, locate your "custom empty state" element. From the Element Settings panel, add the following custom attribute:
- Name:
exclude-cms-items - Value:
empty-state
Copy the provided script below and paste it before the closing tag of your Search Results page. Be sure to add an opening <script> and closing </script> tag if you plan to inline the custom code.
// Get list of Search Results
const resultsList = document.querySelector('[exclude-cms-items="results"]');
// Get titles in Search Results
const resultTitles = document.querySelectorAll('[exclude-cms-items="title"]');
// Get custom empty state
const emptyState = document.querySelector('[exclude-cms-items="empty-state"]');
// Hide custom empty state by default
emptyState.style.display = "none";
// Create array of excluded item titles from all excluded Collection Lists
const excludeTitles = Array.from(document.querySelectorAll('[exclude-cms-items="remove"]')).map((item)=> {
return item.innerText.toLowerCase();
});
// Remove the excluded Collection Lists from DOM
document.querySelectorAll('[exclude-cms-items="remove"]').forEach(item => {
item.parentElement.remove();
});
// Check each Search Result item title against each excluded item title
resultTitles.forEach(resultItem => {
excludeTitles.forEach(excludeTitle => {
// If a match, remove Search Result item that contains matching title
if (resultItem.innerText.toLowerCase() == excludeTitle) {
resultItem.parentElement.parentElement.remove();
}
})
});
// If list of Search Results is now empty, remove it from DOM and show custom empty state
(function() {
if (resultsList.childElementCount == 0) {
resultsList.remove();
emptyState.style.display = "block";
}
})();Publish your site and test your site search by querying the name of an excluded item.