All Shopify free themes have access to a search functionality: a magnifying glass shaped search icon that when clicked opens a search bar, where you can then type whatever you're looking for and any matching results among your store's products will be shown to you . While a great tool for any store or page in the web, having to click the search icon before revealing the search bar is one click too much and a step that could simply be skipped.

Using this tutorial you'll learn not only how to make the search bar permanently visible and accessible on desktop but also on mobile regardless of the device you're using, using only copy and pasted code that will work on all free themes.

Depending on what version your theme is, you'll need a different approach. Below we cover how to achieve it on the older (7 and below) and newer (7.0.1 and above) of all Shopify's free themes.

Here is a live preview of the end result.

Making a backup of your theme

Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.

1. Adding the code snippet

1. Open your Shopify admin and navigate to Online Store > Themes > Actions > Edit Code
2. Under snippets on the left side, click on “add a new snippet”.
3. Add a snippet named ezfy-header-search and paste this code inside:
   
   
   
   
4. Save the file.
5. Now open the file named header.liquid
6. Next we'll implement the snippet into this file.
   
   To proceed, double check your theme's version to ensure it works correctly.

2.a. Steps for versions above 7.0.1

1. Open your Shopify admin and click Online Store > Themes > Actions > Edit Code > Snippets > Add a new snippet
2. Find the file header.liquid and open it
3. Press CTRL + F (or CMD + F on Mac) to open the search bar and paste exactly this:
   
   {% render 'header-search'
   
4. Delete the line you found.
   
   
   
5. Paste the following:
   
   {% render 'ezfy-header-search', input_id: 'Search-In-Modal', device: 'desktop' %}
   
   
6. Now press CTRL + F (or CMD + F on Mac) again to open the search bar and paste exactly this:
   
    </header>
   
7. Paste the following code below the line you found.
   
   {% render 'ezfy-header-search', input_id: 'Search-In-Modal', device: 'mobile' %}
   
   
8. That is it! You can skip the step 2.b if your theme is above 7.0.1.

2.b. Steps for versions below or equal 7.0.1

In case your theme is below or equal the version 7.0.1, please do the following:

1. Inside the header.liquid file, press CTRL + F (or CMD + F on Mac) to open the search bar and search for:
   
   <details-modal class="header__search">
   
   Paste the following code above the line you found:
   
   {% include 'ezfy-header-search', device: "desktop" %}
   
   
   
   
   
2. Repeat the search from step 4 but this time click “next” twice to find the second and final instance of the search icon deeper down into the file.
   
   Again, right above it, paste the following:
   
   {%- if section.settings.logo_position != 'top-center' -%}
{% include 'ezfy-header-search', search_type: 'desktop' %}
{%- endif -%}
   
   
   
   
   
3. Finally, open the search bar a third time and search for the following:
   
   </header>
   
   Right below that line, paste the following:
   
   {% include 'ezfy-header-search', device: 'mobile' %}
   
   And you're done! Don't forget to click the “save” button on the top right of the screen.
   
   
   
   

Conclusion

You and your clients can now search your store more easily with a single click!

Before:



After:



It works regardless of the logo position you have selected:





And also on mobile:



If you found any issues during or you'd like your search bar to be customized further, just send us an email at ezfycode@gmail.com and we'll be ready provide further guidance and offer a quote.

You may also like

– How to make slideshow images stop cutting off
– How to add a collection with tabs section to any theme (copy/paste, no apps, blazing fast)