Hey Folks,
Just stumbled across this nifty tool for searching within your Webflow project. It’s called AddSearch and it’s a less expensive alternative ($29/month) to SwiftType’s ($299/month). So far, you can see here on my published project that there are a few kinks to work out but for the most part it does the job well!
The support is friendly and they have a few options for customization and styling. After you sign up (theres a 7 day free trial -no card required), head over to the settings tab to inject this code if you want to remove the default features and branding.
Use this code to hide the page preview image to the right of the search results:
#addsearch-results #addsearch-results-right { display: none; }
#addsearch-results { width: 585px !important; margin-left: 190px; }
Use this code to hide the thumbnail image to the left of the search results:
#addsearch-results .addsearch-result-item-container,
#addsearch-results .addsearch-result-item-sub-active,
#addsearch-results .addsearch-result-item-sub {
background-size: 0 0 !important;
}
#addsearch-results .addsearch-result-item-sub-active div,
#addsearch-results .addsearch-result-item-sub div {
padding-left: 30px;
width: 545px;
}
Use this code to remove the AddSearch Branding:
#addsearch-logo { display: none !important; }
The description text is populated by keyword but you can exclude content from showing up by following these steps in their support article:
AddSearch detects automatically the main content in your pages, and indexes only that main content. This makes the search results better, as superfluous content (such as sidebars, headers, footers etc.) and duplicate content is not included in the search.
Sometimes you might want to manually make sure that certain content is included in or excluded from the search. You can insert HTML5 tags to your pages to mark such content.
To make AddSearch include a certain section in your page into the search, use the data-addsearch="include"
attribute in any element, typically a DIV
or P
.
Example:
<div data-addsearch="include">Content that is included in the search</div>
To make AddSearch exclude a certain section in your page from the search, use the data-addsearch="exclude"
attribute in any element, typically a DIV
or P
element.
Example:
<div data-addsearch="exclude">Content that is excluded from the search</div>
Works with Dynamic Items and Collection Lists too
Hopefully this is music to a lot of ears as I was pretty stoked to find it. Message me or send me an email with any questions! Also, I hope others that use AddSearch will reply back with tips, tricks and Webflow inspired designs to customize the look and feel of this.
Cheers,
David