AppsThemesSupport

Storefront filtering

Suggest Edits

Storefront filtering is the recommended method for filtering products in a theme. It allows merchants to easily create filters for filtering collection and search results pages.

Filters can be based on the following product and variant data:

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.

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.

Storefront filter UX

Familiarize yourself with UX considerations for storefront filtering.

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.

📘

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.
attribute_scope No The atrribute scope for option and price attributes. To learn more, refer to Variant-specific filters
value Yes The filter value. To learn more about the value format, refer to Filter types.

Depending on the filter attribute, the format of the URL parameter can be one of the following:

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:

filter.p.vendor=nero
filter.v.option.color=orange

Multiple filters

You can have multiple filters like the following:

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
filter.v.option.color=orange,deeppink <!-- AND -->
filter.v.option.color=orange&filter.v.option.color=deeppink <!-- OR -->

Filter types

Filters can be applied at two levels:

Product-specific filters

The following outlines the product-specific filters and how they're reflected as a URL parameter:

NameDescriptionParameter nameAccepted parameter value
Product tagsFilter based on specific product tagstagA single product tag, an ampersand-separated list of product tags.

For example, hot, or hot&flash.
VendorFilter based on specific vendors.vendorA 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:

<!-- Product tags -->
filter.p.tag=hot
filter.p.tag=hot&filter.p.tag=flash

<!-- Product vendor -->
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:

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.
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. 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:

<!-- Variant availability -->
filter.v.availability=0
filter.v.availability=0&filter.v.availability=1

<!-- Variant option -->
filter.v.option.color=orange

<!-- Variant price -->
filter.v.price.lte=228

Updated 10 months ago