tetchi blog

Tetchi's blog about life and stuff

Shopify Theme from Scratch Part 9: search.liquid

Shopify Theme from Scratch Part 9: in this tutorial we’re going to be building the search.liquid template, where customers can search through a shop for products, pages, and blog articles.


part9_banner

In Part 9 of the Shopify Theme from Scratch series, we’re going to be the search.liquid template, where customers can search through a shop for products, pages, and blog articles.

Let’s gitter done! Head on over to “yourshop.myshopify.com/search” to see your search page.

1. Add the search form

The first thing we’re going to do is add the search form. Open search.liquid, and replace its contents with the following code:


Search

You will now see a snazzy search form (Figure 9.1).

search page

Figure 9.1: search bar on search.liquid

2. Check to see if a search was performed

Before we output the contents of the search result, we need to add an if-statement to see if a search query was actually submitted or not. This is done to prevent the search page from searching for a blank string when you visit it.

Enter the code in red below:


Search

{% if search.performed %} {% endif %}

3. Add a for-loop to output the search results

Now let’s add a for-loop to output the search results. We want to look through the ‘results’ array that is part of the search object to see if there is anything to output. For more on the search object, please see the docs page.

Within the if-statement that we just added, put in the code in red below:


{% if search.performed %}    
    {% if search.results_count == 0 %}  
      Your search for "{{ search.terms }}" did not yield any results.

{% else %} {% for item in search.results %}

{{ item.title | link_to: item.url }}

{% if item.featured_image %}
{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}
{% else %}
{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}
{% endif %}
{% endfor %} {% endif %}
{% endif %}

Now, using the search form that we added in Step 1, try searching for “lorem” (it should be part of the descriptions of the products we uploaded in The Setup). You should now see the results of the search result being listed:

search results

Figure 9.2: Search results being listed (we’ll pretty it up in step 5)

What is {% if item.featured_image %} there for?

In the for-loop to output the search results, you may have noticed an odd-looking if-statement. This if-statement checks to see if the search result contains a featured_image, or in other words, it checks to see if the result is a product. If the search result is a product, we want to output its corresponding image. If the search is not a product, we’ll just output the text of the page/blog article.

4. Paginate the search results

Like we did on collection.liquid and blog.liquid, we’re going to paginate the number of search results that can be shown per page on search.liquid. At the very top of search.liquid, add the following line of code in red:


{% paginate search.results by 5 %}

Search

…and at the very bottom of search.liquid, add the following:


{% if paginate.pages > 1 %}

{% endif %}

{% endpaginate %}    

If you have more than 5 search results, you should now see the page being paginated (Figure 9.3). Feel free to change the ‘paginate by’ value to something else!

search pagination

Figure 9.3: pagination on the search page

5. Add the CSS for the search page

Now let’s pretty up the search results a bit. Open the style.css file, and insert the following code at the very bottom of the file.


/**** search.liquid ****/

.search-form input[type='text']{border:1px solid #ccc; padding:6px;}
.search-result{margin-bottom:20px;}
.search-text{width:818px; padding-left:20px;}
.highlight{color:#ff0000;}

Your search results will now be laid out much nicer.

search page styled

Figure 9.4: Pretty search results!

6. Add a search bar to the header toolbar

The last thing we’re going to do is add a search bar inside the black tool bar that sits on top of the shop. To do this, we need to go back to theme.liquid (remember – as a rule of thumb, elements of a theme that are on every page of the shop are typically found in theme.liquid).

Open theme.liquid, and insert the code in red to the location specified below:




You’ll now have a handy little search bar at the top of the theme that you can use anywhere in the shop (Figure 9.5)! :D

search bar

Figure 9.5: search bar inside the toolbar

That’s it for this week!

← Back to table of contents

1 Comments

  • Michael Nathan
    Michael Nathan on June 17th, 2014

    Hi tetchi,

    Thank you for this blog – super helpful! I was wondering if there was a way to order search results by collection so that search will display results for one collection (or product type or vendor) followed by another? For example – I want to add a sold collection, but want the sold products to appear under available products in my search results.

    Thanks tetchi!

Post a comment