search

The search object has the following attributes:

search.performed

Returns true if an HTML form with the attribute action="/search" was submitted successfully. This allows you to show content based on whether a search was performed or not.

{% if search.performed %}
    <!-- Show search results -->
{% endif %}

search.results

Returns an array of matching search result items. The items in the array can be a:

You can access the attributes of the above three objects through search.results.

{% for item in search.results %}      
  <h3>{{ item.title | link_to: item.url }}</h3>
  {% if item.featured_image %}
  <div class="result-image">
    <a href="{{ item.url }}" title="{{ item.title | escape }}">
      {{ item.featured_image.src | product_img_url: 'small' | img_tag: item.featured_image.alt }}
    </a>
  </div>
  {% endif %}
  <span>{{ item.content | strip_html | truncatewords: 40 | highlight: search.terms }}</span>        
{% endfor %}

search.results_count

Returns the number of results found.

search.terms

Returns the string that was entered in the search input box. Use the highlight filter to apply a different style to any instances in the search results that match up with search.terms.

Input

{{ item.content | highlight: search.terms }}

Output

<!-- If the search term was "Yellow" -->
<strong class="highlight">Yellow</strong> shirts are the best! 
Return to top

Ready to put what you've learned into action?

Build an online store with Shopify. Try it free.

Experience the future of retail now.

Shopify Point of Sale. Try it free.