The search object

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 individual search results by looping search.results.

{% for item in search.results %}
  <h3>{{ item.title | link_to: item.url }}</h3>
{% endfor %}

Search result object_type

Search results have an additional attribute titled object_type which returns the type of each result. This is useful for writing the logic of your search results loop.

Example

{% for item in search.results %}
  <h3>{{ item.title | link_to: item.url }}</h3>
  {% if item.object_type == 'article' %}
    {% comment %}
      'item' is an article
      All article object properties can be accessed.
    {% endcomment %}

    {% if item.image %}
      <div class="result-image">
        <a href="{{ item.url }}" title="{{ item.title | escape }}">
          {{ item | img_url: 'small' | img_tag: item.title }}
        </a>
      </div>
    {% endif %}

  {% elsif item.object_type == 'page' %}
    {% comment %}
      'item' is a page.
      All page object properties can be accessed.
    {% endcomment %}

  {% else %}
    {% comment %}
      'item' is a product.
      All product object properties can be accessed.
    {% endcomment %}

    {% 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!

search.types

Returns an array of strings representing the types the search was performed on. The items in the array can be any combination of article, page, product.

The search types can be seen in the URL parameters of a search page. For example, storefront.com/search?type=article,product&q=* will have a search.types array containing article and product.

On this page