How To Create A Custom Search Bar In Framer

Introduction

Framer has a built-in search bar that you can easily add to your website. However, the customisation possibilities are pretty limited (unless you know this workaround).

So, in this tutorial, you’ll learn how to build a custom search bar that you can design and style however you want (no coding required).

I’ll also show you how to connect it to a CMS collection instead of performing a site-wide search.

If that wasn’t enough, I’ve also prepared a free working project you can remix completely for free to see how it’s done.

Interested? Let’s get started!

Step 1: Design The Search Bar

The first step is to design the search bar.

Your design will not affect whether it works, so you can be as creative as you want.

For example, here’s a simple one I’ve designed for a magazine Framer template:

Once it looks the way you want, right-click it and turn it into a component.

Step 2: Add The Built-In Search Feature

Now that we have the design in place, it’s time to make it work.

Fortunately, every Framer plan (except the mini one) has a built-in search feature we can use.

So, here’s what we will do:

We will use the built-in feature to make our custom search bar work. To do that, we’ll place the built-in component on top of our design and then set its opacity to 0 so we don’t see it.

In other words, here’s exactly what you need to do:

1. Click on “Insert” in the top bar.

2. Type “search” in the search bar until the search component shows up.

3. Place it on top of your search component

4. Set its positioning to “absolute” and set all the constraints to 0 (top, right, bottom, and left).

5. Make the opacity 0 and set the cursor to “Text”.

   
   

And voilà! Your custom search bar has just become functional!

However, there’s still a quick step we need to take.

Step 3: Set The Scope

Right now, the search component is not connected to any CMS collection and will, therefore, work on a website-wide level.

In other words, it searches the entire website, looking for what the user is typing; this includes static pages, every CMS collection, etc.

However, that’s usually not what people want. To make it search only in a specific collection (like a blog), here’s what you need to do:

1. Click on the search icon.

2. In the right sidebar, look for “scope” and choose the CMS collection you want. For example, ours will be “/blog/:slug”.

   
   

And that’s it! You’re all set. To make sure it’s working, you’ll have to publish your website and check it live.

Conclusion

In this tutorial, we’ve covered how to easily add a custom search bar to your CMS collection in Framer.

If you got lost at any point during the tutorial, make sure to grab the free sample project.

Thanks for reading the article!

- Luca