# Filters and sorting

The filter bar allows visitors to sort and filter collections according to what they're looking for. Products can be filtered by availability, product type, vendor, and other options.

* Enable **sorting** (by best selling, alphabetical, price, or date)
* Enable **filtering** (by price slider and 'In stocky only')
* Add more **filter options** with Shopify's Search & Discovery
* Show a **sticky filter and sort button**

<div><figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FRsvfd2QEjyAyagDREuvT%2Ffilter-drawer.png?alt=media&#x26;token=4208808e-ae5c-47a0-a281-5267e09e1b9c" alt="" width="356"><figcaption><p>Filter drawer with default options</p></figcaption></figure> <figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FeRtaQAoZXBrmFs1X2b7L%2Ffilter-options.png?alt=media&#x26;token=fe912936-62d1-44f1-8fd6-8355d2f3cf14" alt="" width="356"><figcaption><p>Color swatch and size options</p></figcaption></figure></div>

{% hint style="success" %}
Sorting and filtering products are Shopify features. The theme provides options to customize the appearance.
{% endhint %}

## Set up filters in Shopify admin

***

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 %}

`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 filtering</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><tr><td><mark style="color:blue;">Filter group open state</mark></td><td>Choose how filter groups are displayed when the page loads.</td><td><strong>First opened</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>All open</strong><br><strong>All closed</strong></td></tr></tbody></table>

## Sticky filter and sort button

***

By default, a "sticky" button for filters and sorting appears at the bottom of the screen.

You can hide the button on desktop by deselecting the **Show sticky and filter button** option. The button always appears on mobile screens to remain accessible.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2Fxq7lkRaJ7NiDMHHPxnuI%2Ffilter-sticky-bar.png?alt=media&#x26;token=bfa83d8b-f08b-44d9-ae4a-b20cb8e3bab8" alt="" width="338"><figcaption><p>Sticky filter and sort button</p></figcaption></figure>

`Click Product grid section to find settings`

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Show sticky filter and sort button</mark></td><td>Continue to show the filter and sort button at the top of the screen when visitors scroll down.</td><td><em><mark style="background-color:yellow;">Default</mark></em><mark style="background-color:yellow;">: Disabled</mark></td></tr></tbody></table>

## Show product filter swatches

***

By default, filter options for colors display as swatches. To disable this option, go to **Theme settings > Swatches** and de-select the **Enable product filter swatches**.

You can also change the **Product filter swatch layout** from Compact to Expanded.

<figure><img src="https://3688473072-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHUe2h5JnXOGnUNdkJwav%2Fuploads%2FNSb2gcCLOmyi4hXJhjOI%2Ffilter-swatches-expanded.png?alt=media&#x26;token=2ff74e1c-6cd5-491c-b520-649648c5eb42" alt=""><figcaption><p>Filter option swatches with expanded layout</p></figcaption></figure>

{% hint style="info" %}
See our [guide to set up swatches](https://help.fluorescent.co/eclipse/products/swatches) for your product variants.
{% endhint %}

`Go to Theme settings > Swatches to find settings`

<table><thead><tr><th width="175">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Enable product filter swatches</mark></td><td>Display variant options in collection and search page filters as swatches.</td><td></td></tr><tr><td><mark style="color:blue;">Color swatch layout</mark></td><td>Choose the layout of swatches in product filters.</td><td><strong>Compact</strong> <em><mark style="background-color:yellow;">Default</mark></em><br><strong>Expanded</strong></td></tr></tbody></table>