QuillObjects
Search
The search object for search results, terms, and filtering.
The search object is available on search results pages. It holds the query, matched results, and result count.
Properties
| Property | Type | Description |
|---|---|---|
search.performed | boolean | true if a search was submitted |
search.terms | string | The search query entered by the visitor |
search.results | array | Matching results (products, articles, pages) |
search.results_count | number | The total number of results |
Search results page
{% if search.performed %}
<h1>Search results for "{{ search.terms }}"</h1>
{% if search.results_count == 0 %}
<p>No results found. Try a different search term.</p>
{% else %}
<p>{{ search.results_count }} {{ search.results_count | pluralize: 'result', 'results' }}</p>
{% for result in search.results %}
<div class="search-result">
{% if result.featured_image %}
<img src="{{ result.featured_image | img_url: '100x100' }}" alt="{{ result.title }}" />
{% endif %}
<div>
<h3><a href="{{ result.url }}">{{ result.title }}</a></h3>
{% if result.price %}
<p>{{ result.price | money }}</p>
{% endif %}
{% if result.excerpt %}
<p>{{ result.excerpt | truncatewords: 30 }}</p>
{% endif %}
</div>
</div>
{% endfor %}
{% endif %}
{% else %}
<h1>Search</h1>
<p>Enter a term to search our store.</p>
{% endif %}Search form
Build a search form that submits to the search page:
<form action="/search" method="get">
<input type="text" name="q" value="{{ search.terms }}" placeholder="Search..." />
<button type="submit">Search</button>
</form>Result types
Each result in search.results can be a product, article, or page. Check the type property to render them differently:
{% for result in search.results %}
{% if result.type == 'product' %}
<p>{{ result.title }} - {{ result.price | money }}</p>
{% elsif result.type == 'article' %}
<p>{{ result.title }} (Blog post)</p>
{% elsif result.type == 'page' %}
<p>{{ result.title }} (Page)</p>
{% endif %}
{% endfor %}Highlighting search terms
Use the highlight filter to mark matching terms in the results:
{% for result in search.results %}
<h3>{{ result.title | highlight: search.terms }}</h3>
{% endfor %}