# 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, Stiletto also displays a price slider, color swatches, and product chips for easy navigation.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2FGien3adzguYqifSHSuH5%2Fcollection-filters.jpeg?alt=media\&token=ec1a6d1a-8719-49e1-ae96-91d1ba78cf2a)

## 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>

## Customize filter bar layout

***

Choose the **location** of the filter bar, make it **sticky**, and change the layout of the filter groups.

`Click Product grid section to find settings`

<table><thead><tr><th width="254">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable sticky top bar</mark></td><td>Keep the filter top bar visible at the top of the screen when visitors scroll down.<br><br>This setting applies only when the filter location is set to Top bar.</td></tr><tr><td><mark style="color:blue;">Desktop filter location</mark></td><td>Display filters in a Top bar above the product grid or as a Sidebar to the left of the product grid.</td></tr><tr><td><mark style="color:blue;">Collapse filter display on desktop</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;">Enable sticky filter sidebar</mark></td><td>Keep the filter sidebar visible when visitors scroll down.<br><br>This setting applies only when the filter location is set to Sidebar.</td></tr><tr><td><mark style="color:blue;">Collapse filter group</mark></td><td>Hide values of filter groups until visitors click to reveal them.</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" %}
Stiletto'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 %}

<table><thead><tr><th width="243">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show variant option swatch filters</mark></td><td>If you have <a href="../product-pages/variant-options/variant-swatches">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](https://help.fluorescent.co/stiletto/collection-pages/collection-pages)\
> [Product grid](https://help.fluorescent.co/stiletto/collection-pages/product-grid)\
> [Banner](https://help.fluorescent.co/stiletto/collection-pages/banner)\\