Storefront search is based on [query parameters](#query-parameters) that determine what information is returned, and how it’s returned, in the search results. In addition to the search query itself, there are parameters that allow you to customize the search in the following ways:

- Only search for certain resource types
- Choose whether unavailable products are returned, and where in the results
- Enable partial word matches

The query parameters can be used by including inputs in your [search form](#the-search-form), and they’re reflected in the [search URL](#search-url-structure) when a search is performed.

> Tip:
> To learn more about storefront search functionality and search query options, refer to the [Shopify Help Center](https://help.shopify.com/manual/online-store/storefront-search).

You can also add predictive search to your theme so that suggested results appear immediately as you type into the search field. To learn about predictive search, refer to [Add predictive search to your theme](/docs/storefronts/themes/navigation-search/search/predictive-search).

The [Shopify Search & Discovery app](https://apps.shopify.com/search-and-discovery) enables users to customize product recommendation and search results, which can impact results from storefront search and the Ajax [Product Recommendations](/docs/api/ajax/reference/product-recommendations) API. To learn about how these results can be impacted, visit the [Shopify Help Center](https://help.shopify.com/manual/online-store/search-and-discovery/product-recommendations).


## Query parameters

Search queries accept the following parameters:

<table>
  <thead>
  <tr>
    <th>Query parameter</th>
    <th>Type</th>
    <th>Required</th>
    <th>Description</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>q</code></td>
      <td>String</td>
      <td>Yes</td>
      <td>The search query.</td>
    </tr>
    <tr>
      <td><code>type</code></td>
      <td>Comma-separated values</td>
      <td>No</td>
      <td>
        <p>Specifies the type of results requested. The possible options are:</p>
        <ul>
          <li><code>product</code></li>
          <li><code>page</code></li>
          <li><code>article</code></li>
        </ul>
        <p>Defaults to all types. </p>
        <p>To change the default value, you can use <a href="https://help.shopify.com/manual/online-store/search-and-discovery/settings">Search Settings</a> in the Search & Discovery app.</p>
      </td>
    </tr>
    <tr>
      <td><code>page</code></td>
      <td>Integer</td>
      <td>No</td>
      <td>Specifies the current search results page. Defaults to <code>1</code>.</td>
    </tr>
    <tr>
      <td><code>options</code></td>
      <td>Hash</td>
      <td>No</td>
      <td>
        Specifies search options that you can customize with the <code>unavailable_products</code> and <code>prefix</code> settings.
      </td>
    </tr>
    <tr>
      <td><code>unavailable_products</code></td>
      <td>String</td>
      <td>No</td>
      <td>
        <p>Specifies whether to display results for unavailable products or variants in filtered results. The following are the possible options:</p>
        <ul>
          <li>
            <code>show</code> - Show unavailable products or variants in the order that they're found.
          </li>
          <li>
            <code>hide</code> - Exclude unavailable products or variants.
          </li>
          <li>
            <code>last</code> - Show unavailable products or variants after all other matching results.
          </li>
        </ul>
        <p>Defaults to <code>last</code>.</p>
        <p>To change the default value, you can use <a href="https://help.shopify.com/manual/online-store/search-and-discovery/settings">Search Settings</a> in the Search & Discovery app.</p>
      </td>
    </tr>
    <tr>
      <td><code>prefix</code></td>
      <td>String</td>
      <td>No</td>
      <td>
        <p>Specifies whether we want to perform a partial word match on the last search term.</p>
        <p>
          For example, if "winter snow" is used as a search query, a search will find all applicable resources that contain both "winter" and any term that starts with "snow". This could be terms like "snow", "snowshoe", or "snowboard".
        </p>
        <p>The possible options are:</p>
        <ul>
          <li>
            <code>last</code> - Perform a partial word match on the last search term. This is the default.
          </li>
          <li>
            <code>none</code> - Don't perform a partial word match on the last search term.
          </li>
        </ul>
      </td>
    </tr>
    <tr>
      <td>
        <code>sort_by</code>
      </td>
      <td>String</td>
      <td>No</td>
      <td>
        <p>Specifies the sort order of the results. The possible options are:<p>
        <ul>
          <li><code>relevance</code> - Sort results by relevance to the search query.</li>
          <li>
            <code>price-ascending</code> - Sort results by price from high to low. All non-product results are pushed to the end of the results array.
          </li>
          <li>
            <code>price-descending</code> - Sort results by price from low to high. All non-product results are pushed to the end of the results array.
          </li>
        </ul>
        <p>Defaults to <code>relevance</code>.</p>
      </td>
    </tr>
  </tbody>
</table>

## The search form

The search form can be included with a `<form>` element that has an attribute of `action="/search"`.

> Tip:
> You should use the [`routes` object](/docs/api/liquid/objects/routes#routes-search_url) to populate the `action` attribute so that the appropriate URL is used for multi-language stores.

Inside the form, you can include inputs for each of the [query parameters](#query-parameters) above, where each input has the following attributes:

- `name="query-parameter"`
- `value="parameter-value"`

Aside from the `q` parameter, none of the query parameters require user input, so they should be hidden inputs.

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Example search form"></script>

<script type="text/plain" data-language="html">
RAW_MD_CONTENT
<form action="{{ routes.search_url }}">
  <input type="text"
    placeholder="Search"
    name="q"
    value="{{ search.terms | escape }}"
  />
  <input type="hidden" name="type" value="product,page" />
  <input type="hidden" name="options[unavailable_products]" value="hide" />
  <input type="hidden" name="options[prefix]" value="last" />
  <input type="submit" value="Search" />
</form>

END_RAW_MD_CONTENT</script>

</div>
</p>


> Tip:
> For another example of a search form, you can refer to [Dawn's implementation](https://github.com/Shopify/dawn/blob/main/sections/main-search.liquid).

## Search URL structure

When a search is performed, the search page’s URL is updated to reflect that.

For example, a search with the following parameters returns the following URL:

| Attribute | Value |
| --- | --- |
| `q` | `snow` |
| `type` | `product,page` |
| `options[unavailable_products]` | `hide` |
| `options[prefix]` | `last` |

```
/search?q=snow&type=product,page&options[unavailable_products]=hide&options[prefix]=last
```