Search bar in header

Store Design
, , , ,
1

hello everyone,

I’m using Vessel theme. I would like to have a search bar on the header like this screenshot please. it doesnt have to be exact same but looking like

IMG_2145
IMG_21451284×1648 286 KB

thank you

2

The free theme Vessel does not have a search bar, only a search icon. To import one would require some heavy coding. My suggestion is find an alternative theme that includes a search text box in the header.

3

If the theme doesn’t allow it natively, it can be custom coded. Taking about the style it can actually be a lot like this with custom css, it may though be a little less in functionality like other themes but enough to make it workable.

This is just an assumption, it could even be better after starting.

Best

4

Hi @Transcolie19 ,

Basically, it is possible to create the header just like Amazon. But you need to hire a good developer.

5

Hi @Transcolie19,

1. Go to Online Store → Theme → Edit code.
2. Open your header.liquid file and paste the code just below the logo or above icons.

 <div class="custom-header-search">
  <form action="/search" method="get" role="search">
    <input type="search" name="q" placeholder="Search products..." aria-label="Search" />
    <button type="submit">🔍</button>
  </form>
</div>

then open your theme.css / based.css file and paste the code in the bottom of the file.

.custom-header-search {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem;
  width: 100%;
}

.custom-header-search form {
  display: flex;
  width: 100%;
  max-width: 500px;
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.custom-header-search input[type="search"] {
  flex: 1;
  padding: 10px;
  font-size: 16px;
  border: none;
  outline: none;
}

.custom-header-search button {
  background: #f3f3f3;
  border: none;
  padding: 0 15px;
  cursor: pointer;
  font-size: 18px;
}

If this code works, please vote.
Thank you!

6

@Transcolie19 hello, please try code above provided by @topnewyork , if you find it difficult then you can ad me as collaborator and I can do it for you.

7

Hi @suyash1 I’m not able to make it work with @topnewyork solution. I try but maybe I got wrongwith the header liquid place. how to add you as collaborator please?

8

@Transcolie19 can you please share your website link and collab code?

website link you can share here,

Collab code is a sensitive information, hence I recommend that to be shared via dm here or on email on my profile