# Storefront filtering Storefront filtering is the recommended method for filtering products in a theme. It allows merchants to [easily create filters](https://helpcenter.shoplazza.com/hc/zh-cn/articles/6087310877593-%E4%B8%93%E8%BE%91%E9%A1%B5%E9%9D%A2%E5%A2%9E%E5%8A%A0%E5%95%86%E5%93%81%E7%AD%9B%E9%80%89%E5%99%A8) for filtering collection and search results pages. Filters can be based on the following product and variant data: * Availability * Price * Vendor * Variant options * [Product tags](/docs/theme/references/liquid/objects/product) Filters are applied with `AND` logic, and filter values with `OR`. For example, you can return products that are a specific color and a specific size, or you can return products that are one color or another. When filters are applied, they're reflected in the collection URL through [URL parameters](/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#filter-url-parameters). ## Implementing storefront filtering Use the following resources to learn how to implement storefront filtering in your theme. [ ### Support storefront filtering Learn more about how to support storefront filtering in your theme. ](./support-storefront-filtering)[ ### Storefront filter UX Familiarize yourself with UX considerations for storefront filtering. ](./ux-guidelines) ## Filter URL parameters Applied filters are reflected in the page URL with URL parameters based on the filter type. These URL parameters have a [specific structure](/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#url-parameter-structure). **note** Before filters can be applied, they need to be created in the Shoplazza admin. Go to **Online Store** > **Navigation**. ### URL parameter structure Filter URL parameters consist of the following components: | Component | Required | Description | | --- | --- | --- | | `filter` | Yes | The default namespace for filter URL parameters. | | `filter_scope` | Yes | The scope of the filter. Can be either of the following: * `p` - To note that the scope is on the product level. * `v` - To note that the scope is on the variant level. | | `attribute` | Yes | The attribute the filter is based on. To learn more about the available attributes, refer to [Filter types](./storefront-filtering#filter-types). | | `attribute_scope` | No | The atrribute scope for `option` and `price` attributes. To learn more, refer to [Variant-specific filters](./storefront-filtering#variant-specific-filters) | | `value` | Yes | The filter value. To learn more about the value format, refer to [Filter types](./storefront-filtering#filter-types). | Depending on the filter `attribute`, the format of the URL parameter can be one of the following: ```liquid filter.filter_scope.attribute=vale filter.filter_scope.attribute.attribute_scope=value ``` For example, if you had the following filters: * A filter based on the **Vendor** product option, with a value of `nero` * A filter based on the **Color** variant option, with a value of `orange` Then the URL parameters for each would be the following: ```liquid filter.p.vendor=nero filter.v.option.color=orange ``` #### Multiple filters You can have multiple filters like the following: ```liquid filter.p.vendor=nero&filter.v.option.color=orange ``` You can also filter on multiple values from the same filter. This can be done in two ways: * Include multiple values in a single parameter * Include a parameter for each value **Example** ```liquid filter.v.option.color=orange,deeppink filter.v.option.color=orange&filter.v.option.color=deeppink ``` ### Filter types Filters can be applied at two levels: * [The product level](/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#product-specific-filters) * [The variant level](/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#variant-specific-filters) #### Product-specific filters The following outlines the product-specific filters and how they're reflected as a [URL parameter](/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#filter-url-parameters): | Name | Description | Parameter name | Accepted parameter value | | --- | --- | --- | --- | | Product tags | Filter based on specific product tags | `tag` | A single product tag, an ampersand-separated list of product tags. For example, `hot`, or `hot&flash`. | | Vendor | Filter based on specific vendors. | `vendor` | A single vendor, or an ampersand-separated list of vendors. For example, `vendor1`, or `vendor1&vendor2`. | The following is an example of the full URL parameter structure for the product-specific filters: **Example** ```liquid filter.p.tag=hot filter.p.tag=hot&filter.p.tag=flash filter.p.vendor=vendor1 filter.p.vendor=vendor1&filter.p.vendor=vendor2 ``` #### Variant-specific filters The following outlines the variant-specific filters and how they're reflected as a [URL parameter](/docs/theme/theme-features/site-navigation-and-search/filtering/storefront-filtering#filter-url-parameters): | Name | Description | Parameter name | Accepted parameter value | | --- | --- | --- | --- | | Availability | Filter based on variant availability. | `availability` | Either of the following: * `0` - Variants that are out of stock. * `1` - Variants that are in stock. * `0&1` - Variants of both stock status. | | Variant option | Filter based on a variant option, such as **Size** or **Color**. Variant option filters also need to specify the option name for the `attribute_scope` component of the [URL parameter structure](./storefront-filtering#filter-url-parameters). For example, \`option.color\`. | `option` | A single variant option value, or an ampersand-separated list of variant option values. For example `orange` or `orange&deeppink`. | | Price | Filter based on variant price. Price filters also need to specify the price condition for the `attribute_scope` component of the [URL parameter structure](./storefront-filtering#filter-url-parameters). The following are the accepted values: * `gte` - Based on prices greater than, or equal to, the entered value. * `lte` - Based on prices less than, or equal to, the entered value. | `price` | A single monetary value in the format of the shop's default currency. For example `12` or `98.98`. | The following is an example of the full URL parameter structure for the variant-specific filters: **Example** ```liquid filter.v.availability=0 filter.v.availability=0&filter.v.availability=1 filter.v.option.color=orange filter.v.price.lte=228 ```