# Collection filter

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnNsLR8YwGkOKXSNIi%2F-MKnOZSIi7hRHfdNrb4P%2Fcollection-filter-section.jpeg?alt=media\&token=1785ddbd-53ef-4b8f-9336-360908bed5d3)

## Open the existing section

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click the **Collection filter** section.

## Add a collection filter section to your home page

1. From your Shopify admin, go to **Online Store** > **Themes**.
2. Find the theme that you want to edit and click **Customize**.
3. Click **Add section** > **Collection filter** > **Add**.
4. Use the settings to customize your **Collection filter** section.
5. Click **Save**.

## Settings <a href="#settings" id="settings"></a>

### Background <a href="#background" id="background"></a>

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnNsLR8YwGkOKXSNIi%2F-MKnOr1rpbTGPm_eZNCD%2Fcollection-filter-section-background.jpeg?alt=media\&token=4814ec44-ca78-42ad-b33a-d2e26d17d039)

* **Enable:** turn on/off the background.
* **Pick a color:** choose a color to set the background color. If the background is empty, the background color will be displayed.
* **Background image:** pick or upload your image to display it as the background image.
* **Background size:** set the size of the background image.
* **Background style:** set the style of the background image.

### Section gutters

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnNsLR8YwGkOKXSNIi%2F-MKnP0u1_w5lYmvbN95r%2Fcollection-filter-section-gutters.jpeg?alt=media\&token=1455d156-4d34-42cf-ab90-18014dcb6633)

* Enable top gutter: turn on/off the space distance on the top of the section.
* Enable bottom gutter: turn on/off the space distance on the bottom of the section.

### General settings

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnNsLR8YwGkOKXSNIi%2F-MKnPAFEYSQpIXOgV0E3%2Fcollection-filter-section-heading.jpeg?alt=media\&token=75a19cfb-f9ce-4f29-92e9-f3fe94226d62)

* Heading: add the section title.
* Subheading: add the section subtitle.

### Custom heading colors

![](https://3226993373-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MHzCBtSR9PxRIkTBmO1%2F-MKnNsLR8YwGkOKXSNIi%2F-MKnPJqtqWroxtnD5WwC%2Fcollection-filter-section-custom-colors.jpeg?alt=media\&token=18c505f2-5fb2-4398-8f4f-6b84415bd98a)

By default, the heading colors are gotten from **Theme settings** > **Colors and font sizes** > **Section title**, and **Section subtitle**. However, you can override these settings in the collection filter section.

* Enable: turn on/off overriding the title and subtitle color settings.
* Heading: pick a color for the title.
* Subheading: pick a color for the subtitle.