How to customize the search bar

Store Design
, , , , , , , ,
1

Hey, I need help customizing the search bar.

This is what mine looks like:

CreatorTim_0-1736000816782.png
CreatorTim_0-1736000816782.png400×102 7.24 KB

And I want it to look like this:

CreatorTim_1-1736000816760.png

So here’s what I want:

  1. I want to move the entire search bar below the header so that the header is still visible.

  2. I want to make it smaller, roughly the size shown in the picture.

  3. I want to remove the borders, and fill it with a light gray color.

  4. The last and most important thing is that I want a smooth slide-in and slide-out animation for it. You can check the kind of animation I mean here when you click on the magnifying glass icon: https://tomnoske.store/

That’s all, and I want it to work the same way on mobile.

Here is my store URL: https://1049xn-ya.myshopify.com/

And here’s the store where I want it to look like: https://tomnoske.store/

Thanks a lot,
Tim