Search: More than just title and summary?

Community resources General
1

Hello there,

Is there a way to show more than just title, summary and image on search result page?

Our product catalog is having several info: brand, category/subcategory, popularity score (stars), etc.

Instead of showing just the plain title and summary, I’d like to show a richer item tile showing “stars”, brand as a clickable tags, and so forth…

I tried nesting a collection inside the search list item, but Webflow does not allow that :(

2

The options available are explained at Site search - Webflow University Documentation

3

Thanks but that’s not really an answer. I’m asking here since Webflow and documentation that goes along with it limit us to: title, image, snippet, URL, and description…

I’m asking on the forum because I wan to go beyond that and display a much richer product tile on the search results page.

Any experience with that @webdev ? That’d be awesome.

EDIT: I’m looking after a search result page that look more like THIS

image
image1920×950 191 KB

Rather than THIS

image
image1032×995 241 KB

4

The search function Webflow provides is not extendable. Webflow itself used to use a third-party search provider for this very reason. You can find options in =>
https://university.webflow.com/integrations-type/search

I have used algolia in the past. Problem you run into is the API from Webflow is rate limited so the approach I would use is to create a json data source to feed the search providers engine. Then you need to figure out updating.

Another option is to just use something like https://www.jetboost.io/

Since I don’t use Webflow for large sites I don’t have more recommendations for you. Good luck with your project.

2 Likes
5

As Jeff says, search is heavily limited.

For what you’re describing though, you can “extend” the search page by adding a second, separate collection list, bound to the collection you want more complex display for. The setup involves;

  • Collection list, bound to e.g. products
  • Finsweet CMS filter + CMS load, using a text field filter ( hidden ).
  • JS to pick up the search term on entry into the page, and when it’s changed, and then set and trigger the FS text filter.
  • CSS grid or other layout so that your page layout can showcase both site search results, and your collection-specific results ( formatted however you want ).
  • Probably exclude your collection page from site search so the results aren’t doubled.

You can get fairly creative with your search page layout using JS and CSS grids, I’ve done some experiments here on Sygnal’s site that often show interesting results, e.g.;

https://www.sygnal.com/search?query=hack

1 Like
6

Thanks @webdev ! Getting cool results with jetboost which text search field is more robust than finsweet’s.

Jetboost allow to enter several words: “fair trade coffee” will yiel results.
Finsweet will return nothing right at the first blank: "fair "

Also, Jetboost is case and accent insensitive. A huge plus.

All in all, I’m capable of reproducing something close to a full fledged search engine with Jetboost. And having a superb product display.

7

Thanks @memetican Smart idea! Will look at it if I hit a wall with Jetboost…