# Product filtering

Broadcast supports Shopify's Online Store 2.0 Product filtering for fast, customizable, and reliable collection filtering.

## How to set up

Setting up with Broadcast is fast and simple. Using the Theme Editor, navigate to any collection page (or choose the default collection template) and click on 'Collection products' to view the settings:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FdVSET8fuoCJ3fPIuPIHW%2Fcollection-products-settings.gif?alt=media&#x26;token=dca4a51f-086c-42b1-ba62-a9d97d80245a" alt="A gif showing all settings from the collection products section"><figcaption><p>Click on Collection products to view settings</p></figcaption></figure>

### Steps:

{% hint style="success" %}

1. Enable filters
2. Customize filter options and sort order
   {% endhint %}

## Filter layout options

### Slide out

'Slide out' has a larger area and uses the entire height of the shopper's browser or device:

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FJRnIbaK8tfL2WULIUrZj%2Fslide-out.gif?alt=media&#x26;token=fca6aa9d-e43b-476c-a48b-21b061948ab7" alt="A gif showing an example of how the filter layout changes when the slide out option is selected"><figcaption><p>Slide out - Desktop</p></figcaption></figure>

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FIK7ZhWcP7qChXUVknr9U%2Fslide-out-mobile.gif?alt=media&#x26;token=1bdbaf84-13de-4d8d-9d62-bde7baa465cf" alt="A gif showing an example of how the filter layout changes when the slide out option is selected on mobile devices"><figcaption><p>Slide out - Mobile</p></figcaption></figure>

### Inline (closed and open)

Inline places the filter tools within the collection area for both desktop and mobile.

When using the closed Inline option, the customer can click or tap on the filter heading to open, and the product grid becomes smaller as the filter tools animate open.

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FiGwz1Xyv2KCeRxtOHGbC%2Finline-closed.gif?alt=media&#x26;token=953caf45-a53b-4308-8c95-b9b668145e26" alt="A gif showing an example of how the filter layout changes when the inline (closed and open) option is selected"><figcaption><p>Inline closed - Desktop</p></figcaption></figure>

<figure><img src="https://2636770384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FsD7BEEDU3B7WiEJlN0F7%2Fuploads%2FTMdRHu6THVQZC2mRx9d3%2Finline-closed-mobile.gif?alt=media&#x26;token=aade12cf-f981-4569-be72-6f867e88f9d4" alt="A gif showing an example of how the filter layout changes when the inline (closed and open) option is selected on mobile devices"><figcaption><p>Inline open and closed - Mobile</p></figcaption></figure>

## Part 2 - Shopify Search & Discovery

The rest is all done using the Shopify Search & Discovery app. Using the app, you can customize which filter options to display and sort the order.

Watch this quick video on how to customize the filter options:

{% embed url="<https://www.loom.com/share/91516b225b5f40f9bdfb0b06b5e3687e>" %}

### Download Shopify Search & Discovery:

{% embed url="<https://apps.shopify.com/search-and-discovery>" %}