Customising your search results page

Your search results page can be customised if you include it as a snippet in your theme.liquid file. Instructions on how to do this are below.

This tutorial assumes that you have a basic knowledge of HTML. If you do not, then you should find someone who does, or contact us for paid support. Spiffy Stores will not provide free support on how to edit your theme other than to provide these instructions on how to "hack" the built-in search engine.

Step 1

Create a snippet called "_search_results.liquid" and copy the code below into it. You can customise this code however you like, but you must use the liquid tags in this example code for it to display your results correctly.

<div id="searchresults">
  <form action="/search" method="get">
    <p>
      <input type="text" name="q" value="{{ search_terms }}" id="q">
      <input type="submit" value="Search" style="width:100px">
    </p>
  </form>{% if search_results.hits_count == 0 %}{% if search_terms.size > 0 %}
  <p>Your search for "{{ search_terms | strip_html }}" did not yield any results</p>{% endif %}{% else %}
  <ol>{% for hit in search_results.hits %}
    <li>
      <h3>{{ hit.title | link_to: hit.url, hit.title }}</h3>{% if hit.images_count > 0 %}
      <div class="result-image">{{ hit.featured_image | product_img_url: 'thumb' | img_tag: hit.title | link_to: hit.url, hit.title }}</div>{% endif %}
      <span><small>{{ hit.content | strip_html | truncate: 450 }}</small></span>
      <div style="clear:left"></div>          
    </li>{% endfor %}
  </ol>{% endif %}
</div>

Step 2

Upload the snippet in your theme editor, or in the "snippets" folder using Webdav.

Step 3

Edit your theme.liquid file, and copy the following code into it. Ensure you remove any current code that refers to your search results page.

{% if template == "search" %}{% include 'search_results' %}{% endif %}

Your customised search results page should now display.