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.

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>

1. Upload the snippet in your theme editor, or in the "snippets" folder using Webdav.
   
   
2. 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.