Adding a search box in a Shopify Liquid Template

One of my recent projects included making a .liquid template for a website based on Shopify. The task was very simple, create a basic blog template with a listing of articles and a search box on the sidebar. Shopify documentation is very good, so setting that up was all easy, however, it took me some time to find on how to implement a search box.

I was actually looking for a search widget, which I believe is not available in Shopify. Instead, all you have to do is to setup a form in the HTML with two fields and submit it to /search. The form includes a text field named “q”, which will take the query and a hidden field named “type”. Type can have the value of article, product or page. Since I wanted to search only the blog, I entered article. You can search for multiple types by separating them with a comma e.g. article,product.

More information can be found on their website here [http://wiki.shopify.com/Admin_search#Searching_only_for_certain_types.]

The final code looked like this:

[sourcecode language=”html”]
<form action="_WEBSITE_/search" method="GET">
<input type="text" name="q" value="" placeholder="Query" />
<input type="hidden" name="type" value="article" />
<input type="submit" value="Search" />
</form>
[/sourcecode]

Also read...

Comments

  1. Somebody essentially assist to make severely articles I would state. That is the first time I frequented your web page and to this point? I surprised with the analysis you made to create this actual post incredible. Wonderful activity!

    Reply
  2. I have been surfing online greater than 3 hours lately, yet I never found any interesting article like yours. It’s beautiful value sufficient for me. Personally, if all webmasters and bloggers made good content material as you did, the internet shall be a lot more helpful than ever before. “Dignity is not negotiable. Dignity is the honor of the family.” by Vartan Gregorian.

    Reply
  3. Nice post. I was checking constantly this blog and I am impressed! Extremely useful information specifically the last part 🙂 I care for such info much. I was seeking this certain info for a long time. Thank you and good luck.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *