Adding a search engine.

[Leeloo]

Hi everyone,

I would like to add permanent search bar in my art pages at the top of the page.  I want this to be always visible.

I'm ok adding the correct code to the theme.  It's ok if it involves using custom code, I just need a bit of help where to put it.  I’m using the Craft free theme.

Thanks!

[Sangeetanahar]

Hello @Leeloo 

1.Go to online store ---------> themes --------------> actions ------> edit code-------> section folder .....>open  header.liquid

2.In the header.liquid file, find the location where you want to insert the search bar.
and paste the code

<form action="/search" method="get" class="search-form">
  <input type="text" name="q" placeholder="Search" class="search-input" />
  <button type="submit" class="search-button">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
      <path d="M23.7,22.3l-6.2-6.2c1.4-1.7,2.2-3.9,2.2-6.1c0-5.5-4.5-10-10-10S0,4.5,0,10s4.5,10,10,10c2.3,0,4.5-0.8,6.2-2.2l6.2,6.2c0.4,0.4,1,0.4,1.4,0l1.9-1.9C24.1,23.3,24.1,22.7,23.7,22.3z M10,18c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S14.4,18,10,18z"/>
    </svg>
  </button>
</form>

3.open theme.css
add this code at the end of the file

.search-form {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px;
}

.search-input {
  width: 100%;
  max-width: 300px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.search-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  margin-left: 8px;
}

.search-button svg {
  fill: #333;
  }

save the file

Buy me a Pizza
- If helpful then please Like and Accept Solution.

Thanks

[Leeloo]

Thank you but I couldn't get it to sit where I want it to.