Search Box in header above menu

Store Design
1

I am using the Spotlight theme. Currently in my header, above the menu I have a magnifying glass that you click that will then open a search box. I would like to just have a search box in the header right above my main menu. Like in the image below. Please, can someone help?

IMG_0066
IMG_0066954×400 68.1 KB

2

@CigarBubba You can make that change in the Spotlight theme by editing your header settings. Go to Online Store → Themes → Customize → Header and look for the search option. By default, Spotlight shows the magnifying glass icon, but you can switch it to “search bar” so it displays directly in the header.

If the setting isn’t available in your version, you can do a quick edit in the theme code:

  • Go to Edit code → Sections → header.liquid

  • Find where the search icon (icon-search) is rendered.

  • Replace it with the full search form code ({% form 'search' %} block).

That will give you the always-visible search bar like in your screenshot.

3

Hi @CigarBubba

First, go to Online Store > Themes. On your Spotlight theme, click the three dots (…) and Duplicate.

The, you can try the following to hide the old search icon and add the new search bar.

  1. In the theme code editor, open the file sections/header.liquid.
  2. Search for search-modal-opener to find the block of code that starts with <details-modal class="header__search">.
  3. Wrap this entire block in {% comment %} and {% endcomment %} tags to hide it.
  4. Directly below the {% endcomment %} tag you just added, paste this code:
<div class="header-search-bar">
  <form action="{{ routes.search_url }}" method="get" role="search" class="search">
    <input
      class="search__input"
      id="Search-In-Header"
      type="search"
      name="q"
      value="{{ search.terms | escape }}"
      placeholder="{{ 'general.search.search' | t }}"
      aria-label="{{ 'general.search.search' | t }}"
    >
    <button type="submit" class="search__button" aria-label="{{ 'general.search.search' | t }}">
      <svg class="icon icon-search" aria-hidden="true" focusable="false"><use href="#icon-search"></use></svg>
    </button>
  </form>
</div>

Also. you can try to make the new search bar look correct.

  1. In the code editor, open the file assets/base.css.
  2. Scroll to the very bottom of the file and paste this code
.header-search-bar {
  width: 100%;
  max-width: 400px;
  margin: 1rem auto;
  padding: 0 1.5rem;
}
.header-search-bar .search {
  position: relative;
}
.header-search-bar .search__input {
  width: 100%;
  padding: 10px 40px 10px 20px;
  border: 1px solid #ccc;
  border-radius: 50px;
  font-size: 1rem;
}
.header-search-bar .search__button {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-search-bar .search__button .icon-search {
  width: 18px;
  height: 18px;
}
type or paste code here

Hope this helps!