How to further customize Webflow search results

Has anyone figured out how to further customize Webflow search results? I’d prefer it to work exactly like a CMS collection list, where you can add/remove fields and add whatever styles you’d like to each field. Instead, you are limited to the name, snippet, and description.

I understand you can “customize” the content of the description by adding/removing fields in that page’s settings. However, I don’t see a way to do anything with that content besides display it in one long form paragraph.

Ideally, I’d like to lay out my search results in the card format seen here (Reading & Writing classes | Gather).

Instead, I am limited to this list format with a bunch of information strung together as seen here (Search).


Here is my site Read-Only: https://preview.webflow.com/preview/gather-with-us?utm_medium=preview_link&utm_source=designer&utm_content=gather-with-us&preview=339158fe31f4593ea6fd69c351493fd1&mode=preview

Simply apply Grid to the Search Result List and apply border/box shadow etc to the Search Result Item. That will result in the card layout you want.

Images can be inserted and bound to the page settings:

image

image

1 Like

Forgive the blur as I’m not able to share this project (this screenshot contains links), but this took about 2 minutes to style.

Just need to add an image field, bind it to the “Search Image” from your page settings, and job done.

1 Like

This looks promising. Could you share an image of the fields in your Search Description? Your screenshot only shows that it’s Same as SEO Description Tag, and it would be helpful to see how you’re passing that info along to the grid. My current guess is that it’s simply those 4 fields (a wild guess would be image, link, title, description)

I’m holding my breath!

I’m not sure if this solves my problem.

To put a finer point on it, I have a number of fields in my CMS collection that I’d like to lay out across multiple rows. The Webflow Search Results only let’s you pass along an image, title, link, description.

To date, I’ve just concatenated a number of fields into the description. What I’d like to do is be able to handle each of these fields individually, as you would in a normal CMS Collection List.

Thanks in advance for your help!

I wasn’t actually using one, it was just automatically ticked (which is why you can’t see an image in the screenshot) - I just quickly put it into this grid layout to demonstrate for you (I’m actually using a traditional list layout with no image). However for your CMS pages you can set the image to any image fields present within the collection, like so (each of these is a CMS image field):

image

I’m afraid I’m not sure how to solve your requirement for binding/linking to additional information though, sorry :frowning:

I’m new to webflow and have this same problem with customizing search results pages.

My first thought was to add a grid to the Search Result List but webflow won’t allow me to do that. It will only allow me to add a grid to a Search Result Item, which creates a grid for each item and stacks them on top of each other.

I realize this is 3 years old but I can’t find any documentation or instruction on how to create a 3 column search results page.

…can start a new thread :slight_smile:

Hi @MrMerrick ,

You shouldn’t have any problems assigning a grid-