Want to give your Shopify store a professional boost? Learn how to replace that tiny search icon with a full-fledged search bar! This easy-to-follow tutorial will walk you through the steps to enhance your store’s usability and improve the customer shopping experience. Discover how a search bar can increase product visibility and drive conversions. No coding experience is needed!
Step 1: – Open the header.liquid file and find this line of code :{% render ‘header-search’, input_id: ‘Search-In-Modal’ %}
Step 2: – Replace this line of code: {% render ‘header-search’, input_id: ‘Search-In-Modal’ %} with {% render ‘search-bar’, input_id: ‘Search-In-Modal’ %}
{% render 'header-search', input_id: 'Search-In-Modal' %}
{% render 'search-bar', input_id: 'Search-In-Modal' %}Step 3: – Create a file name: search-bar.liquid under the snippets folder.
Step 4: – Copy the following code below and paste it on search-bar.liquid within the snippets folder.
<style>
:root {
--inputs-radius: 20px !important;
}
.mobile-search {
display: none;
}
.desktop-search {
display: block;
}
@media only screen and (min-width: 769px) {
predictive-search[open] .predictive-search {
position: absolute;
min-width: 768px;
left: -768px;
transform: translateX(50%);
}
}
@media only screen and (max-width: 768px) {
.mobile-search {
display: block;
}
.desktop-search {
display: none;
}
}
</style>
<div class="mobile-search">
{% render 'header-search', input_id: 'Search-In-Modal' %}
</div>
<div class="desktop-search">
{%- if settings.predictive_search_enabled -%}
<predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
{%- else -%}
<search-form class="search-modal__form">
{%- endif -%}
<form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
<div class="field">
<input
class="search__input field__input"
id="{{ input_id }}"
type="search"
name="q"
value="{{ search.terms | escape }}"
placeholder="{{ 'general.search.search' | t }}"
{%- if settings.predictive_search_enabled -%}
role="combobox"
aria-expanded="false"
aria-owns="predictive-search-results"
aria-controls="predictive-search-results"
aria-haspopup="listbox"
aria-autocomplete="list"
autocorrect="off"
autocomplete="off"
autocapitalize="off"
spellcheck="false"
{%- endif -%}
>
<label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
<input type="hidden" name="options[prefix]" value="last">
<button
type="reset"
class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
aria-label="{{ 'general.search.reset' | t }}"
>
<svg class="icon icon-close" aria-hidden="true" focusable="false">
<use xlink:href="#icon-reset">
</svg>
</button>
<button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
<svg class="icon icon-search" aria-hidden="true" focusable="false">
<use href="#icon-search">
</svg>
</button>
</div>
{%- if settings.predictive_search_enabled -%}
<div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
{%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
</div>
<span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
{%- endif -%}
</form>
{%- if settings.predictive_search_enabled -%}
</predictive-search>
{%- else -%}
</search-form>
{%- endif -%}
</div>
Note: Don’t forget to save both files to get updated results.