How can I make a static search bar more prominent on my site?

[PaceheadsFabi]

Hi,

this is my current shop: https://paceheads.com/

I want to implement a static search bar which is more actionable for my customers. A customer should see that the first and best step to find a product is to use the search bar. 

A good example is Grover: https://www.grover.com/de-de

I already installed a smart search app on my test shop. So the app behind the search results are not the issue. I just want so display a big search bar on desktop, instead of a small magnifying glas. Also I want to add text in the search bar as a label like "what are you looking for?".

This should be done with a few code adjustments but I could find anything.

Thanks in advance.

 

[nidhipatel]

Hi @PaceheadsFabi, 

I have set the search bar as you have said for the header. Please follow the below steps to change the code

In your header.liquid file please find the below condition approximately the line no, 239

{%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%}

Replace the whole condition till it ends with {% endif %} with the below code

{%- if section.settings.logo_position == 'top-center' or section.settings.menu == blank -%}
<details-modal class="header__search">
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input" id="Search-In-Modal" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.search' | t }}">
<label class="field__label" for="Search-In-Modal">What are you looking for?</label>
<input type="hidden" name="options[prefix]" value="last">
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-search">
</svg>
</button>
</div>
</form>
{% comment %}<details>
<summary class="header__icon header__icon--search header__icon--summary link link--text focus-inset modal__toggle" aria-haspopup="dialog" aria-label="{{ 'general.search.search' | t }}">
<span>
<svg class="modal__toggle-open icon icon-search" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-search">
</svg>
<svg class="modal__toggle-close icon icon-close" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-close">
</svg>
</span>
</summary>
<div class="search-modal modal__content" role="dialog" aria-modal="true" aria-label="{{ 'general.search.search' | t }}">
<div class="search-modal__content" tabindex="-1">
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input class="search__input field__input" id="Search-In-Modal" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.search' | t }}">
<label class="field__label" for="Search-In-Modal">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-search">
</svg>
</button>
</div>
</form>
<button type="button" class="modal__close-button link link--text focus-inset" aria-label="{{ 'accessibility.close' | t }}">
<svg class="icon icon-close" aria-hidden="true" focusable="false" role="presentation">
<use href="#icon-close">
</svg>
</button>
</div>
</div>
</details>
{% endcomment %}
</details-modal>
{%- endif -%}

Let me know if it helps you or not.

Thank you.

[sisustajankoti]

Unfortunately changing the above code made no changes in Dawn.

[Parasoul]

Have a look at this article.

The tutorial above is going to mess up your predictive search