---
description: >-
  Advanced search filters play a crucial role in enhancing the user experience
  for e-commerce websites, and a great example of this is a Shopify theme
  designed for a car accessories store.
---

# Advanced Search Filter

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FZUpOI7cfWKTOmyLQaIAF%2F1.png?alt=media&#x26;token=d07238a6-51d9-4bd2-9769-ce6af69768ec" alt=""><figcaption></figcaption></figure>

## General settings

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FPlOJHAUhtSMqCxcShw8Z%2F2.png?alt=media&#x26;token=8ce25d1d-ddbe-400c-93ea-7acac98c9e24" alt=""><figcaption></figcaption></figure>

| Settinsg                      | Description                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Collections**               | To search your entire store, leave it blank. "Also, the select box will appear if you select more than 1 collection."                                                                                                                                                                                                                                                                                                                                   |
| **Collections label**         | This is lable of colellection label                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Collections tooltip**       | This is lable of colellection tooltip                                                                                                                                                                                                                                                                                                                                                                                                                   |
| **Show all collection**       | <p>If you enable it, you will see a new option in the collection pick box to search for products across the whole store. "It will appear if you select more than 1 collection."<br></p><p><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FSF8fW08P5erqe0cK31LR%2F3.png?alt=media&#x26;token=57d39a15-9c1b-4db0-99f6-ff9c931edb07" alt="" data-size="original"><br></p> |
| **Default collections label** | This is lable of colellection label                                                                                                                                                                                                                                                                                                                                                                                                                     |
| **Padded container type**     | <ol><li>None</li><li>Small</li><li>Medium</li><li>Large</li></ol>                                                                                                                                                                                                                                                                                                                                                                                       |
| Round corner                  | You can add **border radius** of the box.                                                                                                                                                                                                                                                                                                                                                                                                               |
| Enable box shadow             | You can add a **box shadow**                                                                                                                                                                                                                                                                                                                                                                                                                            |
| Make section full width       | You can display content in full-width or 2 columns.                                                                                                                                                                                                                                                                                                                                                                                                     |
| Filter container color scheme | You can change color of the section.                                                                                                                                                                                                                                                                                                                                                                                                                    |
| Enable transparent background | You can enable a transparent background when you add a background image (if you need to)                                                                                                                                                                                                                                                                                                                                                                |

## Add Filter&#x20;

1. **Add a filter block**

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FfGOoglCv9fty2QCm45gz%2F4.png?alt=media&#x26;token=ce87d8be-87d8-484f-a7fe-7add2ef21dd5" alt=""><figcaption></figcaption></figure>

2. **Add Filter name**

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FIQDH1JbtYFjawyKwDlEH%2F5.png?alt=media&#x26;token=8a5bac02-6ffc-43e3-914c-41af5af578c9" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
**This must exactly match the name of the filter.** [**Learn more**](https://help.shopify.com/en/manual/online-store/search-and-discovery/filters)
{% endhint %}

<div><figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FGis3oamX7a0wc8JpVKhm%2F6.png?alt=media&#x26;token=ed852b46-26fc-4081-9d63-eb0aea3b586a" alt=""><figcaption></figcaption></figure> <figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FJis3jc7sl9ZOddmIi4TR%2F7.png?alt=media&#x26;token=82aeb9bb-0d1c-44f9-bcc2-149db0ab3e81" alt=""><figcaption></figcaption></figure></div>

## Filter layout

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FrnkfwDbzvBZgYVGDCKGZ%2F8.png?alt=media&#x26;token=e78cf2a6-6209-4100-b0ed-1d97ef7f45d4" alt=""><figcaption></figcaption></figure>

## Image settings

{% hint style="info" %}
Disable the **Make section full width**
{% endhint %}

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FSU0kH8ap56QZmb2eHxgH%2F9.png?alt=media&#x26;token=60d69dd7-8b74-463c-8f9a-b502a4d9f3f6" alt=""><figcaption></figcaption></figure>

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FxKbkYlYQZ39qtM778Ct6%2F10.png?alt=media&#x26;token=b08d503b-bc0c-4d48-abca-bab4e6474936" alt=""><figcaption></figcaption></figure>

## Section margin

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FmMggl4NXA5NmrlErvbve%2F11.png?alt=media&#x26;token=e81ec706-aefa-4600-b087-2f4bbebc52b7" alt=""><figcaption></figcaption></figure>

## Section padding

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FULZVH4LXeRVQY5S5TkLu%2F12.png?alt=media&#x26;token=cf0e2b1a-1f1a-46ad-b13c-3f5763d90ab8" alt=""><figcaption></figcaption></figure>

## Colors

<figure><img src="https://502474181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FiCZ4jNa471odH4EhZvrK%2Fuploads%2FaDHqfZ7KF2QWA13jKahN%2F13.png?alt=media&#x26;token=4d603ba5-3a6c-489f-9947-71abf77e2f06" alt=""><figcaption></figcaption></figure>

