Home/Shopify/How to add a search bar in Shopify

How to add a search bar in Shopify

A snippet to include a search bar anywhere in your theme.
Note we are using ‘input-group’ for the layout. Look under Forms > Input Groups for some demos.

More information:
– http://docs.shopify.com/themes/liquid-variables/search

To return only products in results:
– http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
– Or manually add type=product to the search URL as a query parameter
– Uncomment hidden input with value=”product” below

Step 1: Create a search-bar.liquid file inside snippets folder. Put the below code on search-bar.liquid file

 
<form action="/search" method="get" class="input-group search-bar" role="search">
{% comment %}<input type="hidden" name="type" value="product">{% endcomment %}
<input type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" class="input-group-field" aria-label="{{ 'general.search.placeholder' | t }}">
<span class="input-group-btn">
<button type="submit" class="btn icon-fallback-text">
<span class="icon icon-search" aria-hidden="true"></span>
<span class="fallback-text">{{ 'general.search.submit' | t }}</span>
</button>
</span>
</form>

Step 2: Add the code where you want to show the search bar

 
{% include 'search-bar' %}
By | 2016-10-27T18:00:32+00:00 December 25th, 2015|Shopify|1 Comment

About the Author:

One Comment

  1. Awsome website! I am loving it!! Will come back again. I am bookmarking your feeds also

Leave A Comment