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.
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).
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:
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
Post a comment
1 Comments
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!