Fashe Search bar

Other
1

Hi there,
I was wondering, how can I add a search bar to the top header?
I know there is a small search that you can activate for the bottom of the page, but how can I add a search bar or search icon to the top of the page?

2

hey there

Im sorry but there is no such option in the theme and without major customization this is not possible

Thanks

3

Hi Noda,
Thanks for the reply.
Under the liquid pages, I see some search.liquid and similar pages.
Any idea if those are for a search bar that has not been implemented?
Is that where I should start the customization?

Thanks

4

Hi there

Honestly, Im not sure about this, I don’t have enough experience with the Shopify files and functions, usually, questions about customization are out of support scope, so, you are free to experiment with them or you may need to find someone who can help you :slight_smile:

5

Hi Noda,
It’s ok, I have found a way to add the search bar.
For those who might stumble upon this, this is what you need to do:

add this bit of code under header-1.liauid
you need to add them below these lines so they don’t break anything else
<!-- Header Icon →
<div class=“header-icons”>
<form class=“search_header” action="/search">
<input type=“text” placeholder=“Search” value="{{ search.terms | escape }}" />
</form>
then do the same thing for the mobile view below it as well do it becomes kind of dynamic

then you need to add the css. that depends on the coloring and other things you have going, but this is what i used:
you add those code to main.css

/* css code for the search bar */
.search_header{
float: right;
padding: 5px;
border: none;
margin-top: 4px;
margin-right: 10px;
font-size: 14px;
font-family:Montserrat-Regular;
color: #333333;
background-color:#F5F5F5;
}

.search_header input[type=text] {
background-color: #F5F5F5;

}

you can see the result on image 3

6

Thank you for sharing solution, it’s very appreciated

Have a great weekend