To use the correct terminology, what we’re really talking about in this tutorial is how to make a template in your Shopify theme that will generate a search results page. The template we’ll be working with here is search.liquid. Like other Shopify template files, search.liquid will live in the /templates directory of your Shopify theme.
For a lot of Shopify websites, and a lot of websites in general, you might have a search box on every page of your website, perhaps somewhere in the header of the site or in a sidebar area. You can learn how to add a search box to your Shopify theme in this little tutorial I wrote awhile back.
In addition to a search box, you almost certainly will also want a search page on your site, where the search box is the main content of that page. If you build your theme the way we’ll be describing today, this search page will be generated by the same template that generates the search results page. So the same template can generate a clean search page before the user has entered a search query, or it can generate a page with all the results of the search after the user enters some text into the search field.
When a user visits a page with a URL of http://whateveryourstorenameis.myshopify.com/search, Shopify will then use the search.liquid template to generate the search page for your website. To get the search results page, someone would need to have typed a search query, which would make the URL something like http://whateveryourstorenameis.myshopify.com/search?q=searchterm.
First let’s take a look at the full code for the search.liquid template we’re going to produce in this tutorial:
{% if search.performed %}
<!-- start results when there are results -->
{% if search.results.size > 0 %}
{% paginate search.results by 10 %}
<h1>Search Results</h1>
<p>Your search for <strong>"{{ search.terms | escape | downcase }}"</strong> yielded the following results:
<ul id="searchresults">
{% for item in search.results %}
<li>
{% if item.featured_image %}
<div class="result-image"><a href="{{item.url}}" title="">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a></div>
{% endif %}
<h4>{{ item.title | link_to: item.url }}</h4>
<span>{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}</span>
<div style="clear:left"></div>
</li>
{% endfor %}
</ul>
{% if paginate.pages > 1 %}
<!-- start paginate -->
<div id="paginate">
<div>
{{ paginate | default_pagination }}
</div>
</div>
<!-- end paginate -->
{% endif %}
{% endpaginate %}
{% endif %}
<!-- end results when there are results -->
<!-- start results when no results -->
{% if search.results.size == 0 %}
<h1>Search Results</h1>
<p>Your search for <strong>"{{ search.terms | escape | downcase }}"</strong> did not yield any results.</p>
<p>Feel free to try another search using the box below:</p>
<form action="/search" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" alt="Search" class="submit" />
</form>
{% endif %}
<!-- end results when no results -->
{% else %}
<h1>Search for Something</h1>
<form action="/search" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" alt="Search" class="submit" />
</form>
{% endif %}
If you are pretty familiar with Liquid you can probably just read through that code and understand what’s going on. I’m going to assume a lot of people reading this would prefer a little more explanation though, so let’s break this code down into parts.
This code basically covers 3 different scenarios that could happen when someone loads the search / search results page:
- The user has entered a search term and there are results for that term. That means we need to show the results of the search.
- The user has entered a search term and there are no results for that term. That means we need to tell the user there are no results for that search term.
- The user has not entered a search term. That means we’ll be displaying a search box for the user to enter a search term(s).
We need to write conditional code that accounts for each of these situations. We’ll start by having one big if statement that checks to see whether any search terms were entered. We do this by checking to see whether search.performed is true or false.
{% if search.performed %}
... scenario #1 and #2 are covered in here, we'll talk about that later ...
{% else %}
<h1>Search for Something</h1>
<form action="/search" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" alt="Search" class="submit" />
</form>
{% endif %}
As you can see, what we did there is checked to see whether a search was performed. If so, we’ll be then checking to see if there were results on that. But if not, you can see that way down at the bottom of the page, we then add a headline of “Search for Something” and then provide a search input field for the user to enter his/her search term(s).
That covers what happens in scenario #3 from the list above.
Now let’s look at the code that handles the first 2 scenarios. The code you see below would replace the words “scenario #1 and #2 are covered in here, we’ll talk about that later” in the code above:
<!-- start results when there are results -->
{% if search.results.size > 0 %}
{% paginate search.results by 10 %}
<h1>Search Results</h1>
<p>Your search for <strong>"{{ search.terms | escape | downcase }}"</strong> yielded the following results:
<ul id="searchresults">
{% for item in search.results %}
<li>
{% if item.featured_image %}
<div class="result-image"><a href="{{item.url}}" title="">{{ item.featured_image | product_img_url: 'small' | img_tag }}</a></div>
{% endif %}
<h4>{{ item.title | link_to: item.url }}</h4>
<span>{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}</span>
<div style="clear:left"></div>
</li>
{% endfor %}
</ul>
{% if paginate.pages > 1 %}
<!-- start paginate -->
<div id="paginate">
<div>
{{ paginate | default_pagination }}
</div>
</div>
<!-- end paginate -->
{% endif %}
{% endpaginate %}
{% endif %}
<!-- end results when there are results -->
<!-- start results when no results -->
{% if search.results.size == 0 %}
<h1>Search Results</h1>
<p>Your search for <strong>"{{ search.terms | escape | downcase }}"</strong> did not yield any results.</p>
<p>Feel free to try another search using the box below:</p>
<form action="/search" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" alt="Search" class="submit" />
</form>
{% endif %}
<!-- end results when no results -->
In this part of our code, we check to see if there are results. If there are results, we paginate them, loop through the results, and write some code that displays the results the way we want them displayed. This is scenario #1 and it’s the part of the code that starts with the comment “start results when there are results” and ends with “end results when there are results.”
Scenario #2 starts with the comment “start results when no results” and ends with “end results when no results.” As you can see, what we did with scenario #2 is simply tell the user there are no results for the search term entered (including printing the search term to the page so he/she can see it), and then providing a search box to try another search.
It might be a little confusing the way I’ve broken up the code into chunks to show the 3 different scenarios. If so, remember the big code excerpt closer to the top of this tutorial shows the code in its entirety.