# Filters and sorting

Let customers discover products quickly by filtering your products by availability, price, type, vendor, and your variant options.

When filters are enabled, Cornerstone also displays a price slider, color swatches, and product chips for easy navigation.

<div data-full-width="false"><figure><img src="/files/J6C501mEkEQlsiJkJsSA" alt=""><figcaption><p>Filter sidebar with swatches</p></figcaption></figure> <figure><img src="/files/qrCgdZ5mtcjm0NTqQRkj" alt=""><figcaption><p>Filter sidebar with price slider</p></figcaption></figure></div>

## Set up filters

***

By default, the **filter drawer** includes a **price slider** and **In stock only** option. You can add more filter options with Shopify's [Search & Discovery app](https://apps.shopify.com/search-and-discovery).

1. In the [Shopify Search & Discovery app](https://admin.shopify.com/apps/search-and-discovery), go to **Filters**, and then click **Add filter**.
2. Select a **Source** for the filter options. Sources can be variant options, tags, or metafields.
3. Add a **Filter label** to change the filter group name that appears in the filter drawer.
4. Click **Save**.

{% hint style="info" %}
Learn more about customizing filter options in [Shopify's Search & Discovery manual.](https://help.shopify.com/en/manual/online-store/search-and-discovery)
{% endhint %}

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click on the **Product grid** section to open the settings.
2. Choose whether to **Enable sorting** to let customers sort products by *Price, Date, Best Selling, Featured,* or *Alphabetically.*

   > Sorting is a Shopify feature. Learn how to [change the default sort order](https://help.shopify.com/en/manual/products/collections/collection-layout#change-the-sort-order-for-the-products-in-a-collection).
3. Choose whether to **Enable filters** to callow customers to filter by product options, product type, price, availability, and more.

   > To select which filter options to enable, go to your **Online Store > Navigation** settings in your Shopify admin. In the **Collection and search filters** section, you can add, remove, and reorder your filter options.

   > See Shopify's manual for their guide on [collection filters](https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters).
4. Select a **Desktop filter location** to change where to display the filter options.

   > Select **Top bar** to display filters above the product grid.

   > Select **Sidebar** to display filters to the left of the product grid.
5. If **Top bar** is selected, choose whether to **Enable sticky top bar** to keep the filters visible at the top of the screen when visitors scroll down.
6. If **Sidebar** is selected, choose whether to **Enable sticky filter sidebar** to keep the filters visible when visitors scroll down.
7. Choose to **Collapse filter bar on desktop** to hide filter and sorting options until visitors click to open the "Filter" bar.
8. Choose to **Collapse filter groups** to hide filter options until visitors click to open the available filter groups.

   > You can select this option for both **desktop** and **mobile**.
9. If you have product swatches enabled, check the **Show swatch filters** box to display those variant options as swatches.
10. If you have product chips, check the **Show chip filters** box to display those variant options as chips.

    > Select a **Chip layout**. Either **2 Column**, **3 Column**, or **Natural**.

    > **Natural** matches the width of the chip to the length of the variant name.
11. Click **Save**.

</details>

`Click Product grid section to find settings`

<table><thead><tr><th width="171">Setting</th><th width="351">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable sorting</mark></td><td>Allow visitors to sort products by availability, price, or date released.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr><tr><td><mark style="color:blue;">Enable filters</mark></td><td>When enabled, visitors can filter products by type, price, availability, and other options.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Enabled</mark></td></tr></tbody></table>

{% embed url="<https://www.youtube.com/watch?v=8WEre6GPfu8>" %}

## Enable filters search

***

Display a search bar for filter groups that have a long list of filter values.

<figure><img src="/files/gKE2UBVpxcj3W4UXQUOh" alt="" width="266"><figcaption></figcaption></figure>

`Click Product grid section to find settings`

<table><thead><tr><th width="245">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Filter search groups</mark></td><td>Enter filter group names to enable searching. Visitors can enter a search term to refine the list of filter values.<br><br>To enable search for multiple filter groups, enter the filter group names in a comma-separated list. For example: <code>Brand, Color, Format, Material</code></td></tr></tbody></table>

## Change filters layout

***

Change the appearance of filters and sorting by collapsing the sidebar or filter groups, truncating longer filter lists, and showing variant swatches and chips as filter options.

`Click Product grid section to find settings`

<table><thead><tr><th width="220">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Collapse filter sidebar</mark></td><td>Hide the filter sidebar when the collection page loads. Visitors can click the Filter button to reveal the sidebar.</td></tr><tr><td><mark style="color:blue;">Collapse filter groups on desktop</mark></td><td>Hide values of filter groups until visitors click to reveal them.</td></tr><tr><td><mark style="color:blue;">Truncate filter list</mark></td><td>Choose to limit how many filter values to show in filter groups. Visitors can click "Show more".</td></tr><tr><td><mark style="color:blue;">Truncate filter list amount</mark></td><td>Select the number of filter values to show before hiding additional values.</td></tr></tbody></table>

## Show product filter swatches

***

By default, filter options use swatches and chips, when enabled in your theme settings.

To display options as names, click to open the **Product grid** section settings and de-select **Show variant option swatch filters.**

{% hint style="warning" %}
Cornerstone's swatch filters option is separate from Shopify's [Visual filters](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters#visual-filters), which allows you to add visual swatches to filter options, separately from product variants.
{% endhint %}

<div><figure><img src="/files/k4b5ZbmLp69DsnBdTULC" alt="" width="402"><figcaption></figcaption></figure> <figure><img src="/files/NxZC8h9gn8CQFV8E9mUG" alt="" width="402"><figcaption></figcaption></figure></div>

`Click Product grid section to find settings`

<table><thead><tr><th width="243">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show swatch filters</mark></td><td>If you have <a href="/pages/icEbZO563kl4UGPTX0fD">Variant swatches</a> enabled, choose to display those variant options as swatches.</td></tr><tr><td><mark style="color:blue;">Show chip filters</mark></td><td>Choose to display chips instead of variants names.</td></tr><tr><td><mark style="color:blue;">Chip layout</mark></td><td>Choose to display chips in <strong>2</strong> or <strong>3 column grid</strong>.<br><br>Select <strong>Natural</strong> to display a layout that adapts to the natural length of the chips.</td></tr></tbody></table>

***

> **Related links**\
> [Collections template](/cornerstone/collection-pages/collection-pages.md)\
> [Product grid](/cornerstone/collection-pages/product-grid.md)\
> [Banner](/cornerstone/collection-pages/banner.md)\
> [Shopify's Adding filters guide](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/collection-pages/filters-and-sorting.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.