The Shopify search bar in the Header is one of the most important features. The search bar allows people to search for products within your shopify store and it helps in better product discovery and sales.

Without a search bar, any visitor who could have been a potential customer will be calculated in the bounce rate users. Well, if there is a proper search bar for your listed products to be searched, instead of simple horizontal or vertical categories, a header search bar looks promising.

Add Shopify search bar in header

Let’s look at the different methods to create your Shopify search bar. 

 

Using Shopify smart search bar shopify app

You can add a Shopify search bar app using expertrec’s Shopify search app in a few clicks. You can install the app from here.

Add Shopify Search Bar in Header

Add shopify search bar  to header

 

 Search bar using custom search code – Expertrec

    1. Create your Shopify search bar from here.
    2. Log in to your Shopify admin panel.
    3. Click-> Online store->Themes-> Edit code
    4. Go to https://cse.expertrec.com/csedashboard/home/code to copy-paste your search bar code.add shopify search bar to header
    5. Choose theme.liquid.
    6. Add the following code just below the “Head” section.Add Shopify Search Bar in Header
    7. Add the following code just below the “Body” section. This will be rendered as the Search Box.Add Shopify Search Bar in Header
    8. This will add a search bar to your Shopify website.

    Search bar using google custom search

    Google custom search is a free tool with which you can add a search bar to your shopify store. A major drawback of this method is that it contains ads which could mean losing out hard earned site visitors to competitors.

    1. Go to https://cse.google.com
    2. Enter your website URL, give a name to your custom search engine.
    3. Click on create.
    4. Click on get code and copy the code.add shopify search bar to header
    5. Now login to your Shopify admin panel.
    6. Go to Online store-> Themes-> Current theme->Actions-> Edit code
    7. Use the search files feature, search for theme.liquid .add shopify search bar to header
    8. Add the google custom search code to the theme.liquid field in the <head> section.
    9. This will add a google custom search to your Shopify store.add shopify search bar to header

    Muthali loves writing about emerging technologies and easy solutions for complex tech issues. You can reach out to him through chat or by raising a support ticket on the left hand side of the page.

    You may also like