How to Customize "No Items Found" Error Messages in Webflow

This video is going to show where to go in Webflow to customize the error message that appears as part of collections in cases where there are no items to be displayed. So initially going to start with a blank slate.

So there isn't going to be a collection. There aren't any pages. And the first thing I'm going to do is add a page and I'm going to use an existing layout to help with a little bit of the formatting. Just going to drop in one of the provided symbols from Webflow and I'm going to remove the rich text block since we're not going to be dealing with rich text. And then I'm going to go in and create a collection and just going to create a bunch of blog posts.

At least the data initially not going to create any actual items. And then I'm going to go back to the page that I started to create and add in a collection list block and connect it to the blog posts. And since we didn't actually have any items generated, we're going to be seeing the no items found state. There's a couple of ways that we can get at it. And so if you go over on the right hand side and click on the gear, that's one way and also the other Navigator, that's another way of accessing the no items found situation.

And I'm just going to add in a little bit block because I want to get to a point where I'm also going to include an image as part of my error.

And your normal formatting options are available. So if we wanted to change away from inline block, we certainly can. And I'm going to create a class for this because I want to move toward having this be saved as a symbol because I'm assuming that for the site, I'm going to have more than just blog posts and I'm going to need to have error messages in multiple cases. And I'm going to just change what is displayed from new items found to a generic Ugg. And now I'm going to try and save it as a symbol.

And I'm clicking in the wrong spots because I always do that. So bear with me.

All right, here we go. Creating a symbol, and you don't have to do this.

Now let's work on a little bit of styling.

I don't like the generic gray. You can change this to any color you want.

The red is a little bright, but that was the hex code that I had at the top of my head. And now let's start to work on the situation of what's displayed in cases where you do have content. And I need to select the right item in order to do that. Now that I've got the right thing in the navigator selected, I'm going to add a heading and connect it to the name field.

And of course, I haven't added any data. So let's go do that now.

So now that we've got some data, let's go back and voila. Our titles are showing. We can switch over to the empty state if we need to go back and forth. And we can also switch back and forth via the gear icon on the right hand side of the page.

And we can also manipulate classes, just like for our error messages, just like normal text. So this doesn't look super pretty, but at least it shows you the concept of what is in fact possible if you hadn't if you hadn't previously been making your error codes pretty.

Thanks for watching.

‍