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(n):

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.object_type == 'article' %}
    <!--
      'item' is an article
      All article object properties can be accessed.
    -->
    {% if item.image %}
    <div class="result-image">
      <a href="{{ item.url }}" title="{{ item.title | escape }}">
        {{ item | image_url: 'small' | img_tag: item.title }}
      </a>
    </div>
    {% endif %}
  {% elsif item.object_type == 'page' %}
    <!--
      'item' is a page.
      All page object properties can be accessed.
    -->
  {% else %}
    <!--
      'item' is a product.
      All product object properties can be accessed.
    -->
  {% if item.featured_image %}
  <div class="result-image">
    <a href="{{ item.url }}" title="{{ item.title | escape }}">
      {{ item.featured_image | img_url: 'small' | img_tag: item.featured_image.alt }}
    </a>
  </div>
  {% endif %}
{% 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!

Want to discuss this page?

Visit the Shopify Community