Hi!
I’m looking to have a search bar in the header instead of a search icon without using any app.
I want something similar to this:
Desktop
Mobile
2 Likes
Hey @Tilda_Falth Welcome to Shopify Community can you please share the Website URL
Hey @Tilda_Falth,
Can you share your site url so that I can take a look and provide you the solution code.
Hello there, I see you are using Horizon theme which don’t have built in feature to reshape the header which you are looking for.
That say, it requires to redesign the header to match with the reference site. Which cannot be done with Quick css or tricks.
Ah really? I can’t create a search bar block and then render it (or whatever it’s called) in the header file or something like that?
Yes you can. But it’s requires proper Shopify theme development knowledge. If you are comfortable and have experience in coding, I can guide you basic on how you can achieve the layout that you are looking for. But if you don’t have coding knowledge then obviosly you need hire the Shopify Developer.
Okay thank you. Could you maybe help me with this other post I made?
I see the post. I just want to confirm have you upload the image for the variant in the product admin?
Sometime not uploading the image cause the media image not change while clicking the variant.
Can you try to disable all Shopify apps within the theme and then check whether it’s working on it.
In most cases the issues happens due to the apps code conflict.
Hi @Tilda_Falth
This would require updates to the theme code, as it cannot be implemented using CSS alone.
Hi @Tilda_Falth,
Go to theme Edit > edit code > snippets > header-search.liquid >
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="What are you looking for?"
>
<label class="field__label" for="{{ input_id }}">What are you looking for?</label>
<button class="search__button field__button" aria-label="Search">
<span class="svg-wrapper">
{{- 'icon-search.svg' | inline_asset_content -}}
</span>
</button>
</div>
then go theme Edit > edit code > assets> base.css > and paste this code in the boottum of this file
.header__search-container .field {
border-radius: 50px !important;
border: 1px solid #e0e0e0 !important;
background-color: #ffffff !important;
overflow: hidden;
}
.header__search-container .field__button svg {
color: #e91e63 !important;
width: 2.2rem;
height: 2.2rem;
}
.header__search-container .field__input {
padding-left: 20px !important;
}
@media screen and (min-width: 990px) {
.header {
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
column-gap: 2rem !important;
}
.header__inline-menu {
flex: 1 1 auto !important;
}
.header__inline-menu .list-menu--inline {
display: flex !important;
flex-wrap: nowrap !important;
gap: 1.5rem !important;
}
.header__search-container {
flex: 0 1 350px !important;
}
}
It looks like your current theme is using a modal-based search, which is why the search only appears when clicking the icon. That setup is built into the theme’s core functionality, so changing it to a visible header search bar usually requires some customization.
If you’re aiming for a more professional layout, a common approach is:
-
Show a full search bar directly in the header on desktop
-
Keep the search icon (modal) for mobile to save space
This kind of adjustment typically involves editing theme files like header.liquid and some CSS, so if you’re not comfortable with code, getting help from a developer might be the easiest route.
That said, here’s a very simple example of a basic search form you can use as a starting point:
<input
type=“search”
name=“q”
placeholder=“Search products…”
style=“flex:1; padding:8px; border:1px solid #ccc; border-radius:4px 0 0 4px;”
<button
type=“submit”
style=“padding:8px 12px; border:1px solid #ccc; border-left:none; background:#000; color:#fff; border-radius:0 4px 4px 0;”
Search
<form action="/search" method="get" role="search" style="display:flex; max-width:400px;">
<input
type="search"
name="q"
placeholder="Search products..."
style="flex:1; padding:8px; border:1px solid #ccc; border-radius:4px 0 0 4px;"
>
<button
type="submit"
style="padding:8px 12px; border:1px solid #ccc; border-left:none; background:#000; color:#fff; border-radius:0 4px 4px 0;"
>
Search
</button>
</form>
Hi. I dont have that file. Where else can I paste it?
Hello @Tilda_Falth **
Step:- 1 Go to the theme edit code and search the file name “search.liquid”**
Need to add below code after the search button tag
Copy Below code
{% comment %} open search bar code start here {% endcomment %}
<predictive-search-component
class="desktop-search predictive-search color-{{ settings.popover_color_scheme }}{% if class != blank %} {{ class | strip }}{% endif %}"
style="--product-corner-radius: {{ settings.product_corner_radius | default: 8 | append: 'px' }}; --card-corner-radius: {{ settings.card_corner_radius | default: 8 | append: 'px' }};{% if settings.card_title_case == 'uppercase' %} --title-case: uppercase;{% endif %}"
data-section-id="predictive-search"
data-testid="{{ 'search-component--modal' }}"
role="search"
aria-label="{{ 'content.search_input_label' | t }}"
>
<form
action="{{ routes.search_url }}"
method="get"
role="search"
class="predictive-search-form"
ref="form"
on:keydown="/onSearchKeyDown"
>
<div
class="predictive-search-form__header"
>
<div class="predictive-search-form__header-inner">
<label
for="{{ 'cmdk-input' | default: 'Search' }}"
class="visually-hidden"
>
{{- 'content.search_input_label' | t -}}
</label>
<input
class="search-input"
id="{{ 'cmdk-input' | default: 'Search' }}"
type="search"
name="q"
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocomplete="off"
placeholder="What are you looking for?"
ref="searchInput"
on:input="/search"
on:keydown="/onSearchKeyDown"
>
<input
name="options[prefix]"
type="hidden"
value="last"
>
<span class="svg-wrapper predictive-search__icon search-icon-custom">
{{ 'icon-search.svg' | inline_asset_content }}
</span>
</div>
</div>
<div class="predictive-search-form__content-wrapper">
<div
class="predictive-search-form__content"
ref="predictiveSearchResults"
on:click="/handleModalClick"
>
{% render 'predictive-search-empty-state',
load_empty_state: true,
shadow_opacity: 0.1,
products_test_id: 'products-list-default--modal'
%}
</div>
<div class="predictive-search-form__footer">
<button
class="button predictive-search__search-button"
ref="viewAllButton"
>
{{ 'content.search_results_view_all' | t }}
</button>
</div>
</div>
</form>
</predictive-search-component>
At the bottom of this file (search.liquid)add css which is required to design the search box
{% style %}
.predictive-search-form__content.custom-active {
display: block;
opacity: 1;
}
.predictive-search-form__content {
max-height: 0dvh;
}
.predictive-search-form__content.custom-active {
max-height: 50dvh;
}
.predictive-search-form__header-inner {
border: 1px solid;
}
.search-icon-custom {
right: 1.25rem;
left: unset;
}
@media screen and (min-width: 769px) {
.desktop-search {
display: block;
}
.mobile-search {
display: none;
}
.desktop-search input.search-input {
padding: 10px;
}
}
@media screen and (max-width: 768px) {
.desktop-search {
display: none;
}
.mobile-search {
display: block;
}
}
{% endstyle %}
At the bottom of this file (search.liquid)add Javascript code which is required manipulate the search box
<script>
document.addEventListener('input', function (e) {
if (e.target.matches('.search-input')) {
const wrapper = e.target.closest('.predictive-search');
const content = wrapper?.querySelector('.predictive-search-form__content');
if (!content) return;
const value = e.target.value.trim();
if (value.length > 0) {
content.classList.add('custom-active');
} else {
content.classList.remove('custom-active');
}
}
});
</script>
Output
