> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/cornerstone/collection-pages/filters-and-sorting.md).

# 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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FBUIkisSjEkdTcUuBe4Ou%2Fcollection-filters-glow.jpeg?alt=media&amp;token=3b0be659-d6ae-4cf3-b459-ee0f8cf8a4aa" alt=""><figcaption><p>Filter sidebar with swatches</p></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2Fes8FzMBOfeKNoy7FZXlO%2Fcollection-filters-barista.jpeg?alt=media&amp;token=6076c22b-a71c-4b8b-a244-48564e2ed171" 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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FFBHj303OjoN5uXU2g5Rh%2Ffilter-group-search.gif?alt=media&amp;token=e12073b4-f765-44b6-83a5-6d8b72bb27ad" 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="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2F2ynY4nVh5L1fBhAlUBsz%2Ffilter-swatches.png?alt=media&amp;token=fd76b152-789f-41c3-89cf-80291280c3a1" alt="" width="402"><figcaption></figcaption></figure> <figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FAscN1vALcyWWC4tirZmp%2Ffilter-chips.png?alt=media&amp;token=9bf569e7-e185-45d0-baf8-4062f4fd4b99" 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="/cornerstone/product-pages/variant-options/variant-swatches.md">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)