> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/collection-page.md).

# Collection Page

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

## Collection Filters Setup

Here's an overview of how to set up filters in the sidebar of your **Collection page** when using the OS 2.0 version.

Here's an example showing a collection page sidebar.

To create custom collection filters:

**Step 1: Install Shopify Search & Discovery**

1. Open **Apps** in Shopify Admin.
2. Install **Search & Discovery**.
3. Open the app.

**Step 2: Create Filters**

1. Open **Search & Discovery**.
2. Click **Filters**.
3. Add desired filters such as:
   * Color
   * Size
   * Material
   * Product Type
   * Vendor
4. Save changes.

The filters will automatically appear on collection pages when **Enable Filtering** is turned on.

### **Add filters to your collection page**

Follow the below steps to select which product filters you want to display.

1. To add a filter to the Collection page, go to Online Store > Navigation > Collection and search filters > Open.

<div data-with-frame="true"><figure><img src="broken://files/UGhUdRUNuaes6rZMSH9v" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FumL7Jl5TJ4lWD153Uj0q%2Ffilter.png?alt=media&amp;token=079eb96e-34bb-422c-9b1b-e6b4f6593b79" alt=""><figcaption></figcaption></figure></div>

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FGIAj0W3SZ9g9jqplvnKg%2Ffilter-add.png?alt=media&amp;token=6e7d7182-a1eb-44a7-bc96-2f2cf2ef65b6" alt=""><figcaption></figcaption></figure></div>

2. Check the box for any filters you want to display on the collection page. If you want to display product variant options (according to your store’s already existing product variants), then select Product options and you will be able to select which ones you want to display.

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FTH6L3GZ8XQyQnNYR5Vl7%2Ffilter-source.png?alt=media&amp;token=f1192882-a7b7-4c95-ad81-0befabfe7f94" alt=""><figcaption></figcaption></figure></div>

3. Check the relevant boxes, and select Done and Save to ensure the implementation of the changes is done before l leaving the area of the Shopify Admin. After selecting which filters you want to display in your collection page’s sidebar, you now need to return to the theme editor to set the collection page to display them on your store.

### **Display the filter in a sidebar**

1. Open theme editor.
2. Select **Collections** > **Default collection**.

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2FBnIQ4dgH0pvuKWftL7TB%2Fcollection-page.png?alt=media&amp;token=11925b77-cc16-4d6c-840f-e3ef9799f4a4" alt=""><figcaption></figcaption></figure></div>

3. After opening "**Default collection**", Check "**Enable filtering**" Option.

<div data-with-frame="true"><figure><img src="https://2356931311-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2wXphKnAlRWTA61K8EmG%2Fuploads%2F6fWmiUUbPeCZ2H1nuIMk%2Fcollection-filter.png?alt=media&amp;token=fe859b83-4032-4ca4-8f8b-83ab5bdbd0a6" alt=""><figcaption></figcaption></figure></div>

4. Select "**Save**" and ensure that your changes have taken effect before leaving the theme editor.

### **Collection page customization**

{% embed url="<https://youtu.be/TpUm0HtxaUk>" %}