Collection filters

Merchants choose filters (availability, price, vendor, product type, tags, options such as size and colour, custom fields) in Storefront › Search & discovery. Themes read them from collection.filters and search.filters: a list of filter objects.

snippets/facets.liquid

<form id="Facets" action="{{ collection.url }}">
  {%- for filter in collection.filters -%}
    <details {% if filter.active_values.size > 0 %}open{% endif %}>
      <summary>{{ filter.label }}</summary>
      {%- case filter.type -%}
        {%- when 'list', 'boolean' -%}
          {%- for value in filter.values -%}
            <label>
              <input type="checkbox" name="{{ value.param_name }}" value="{{ value.value }}" {% if value.active %}checked{% endif %}>
              {{ value.label }} ({{ value.count }})
            </label>
          {%- endfor -%}
        {%- when 'price_range' -%}
          <input type="number" name="{{ filter.min_value.param_name }}" value="{{ filter.min_value.value }}" placeholder="0">
          <input type="number" name="{{ filter.max_value.param_name }}" value="{{ filter.max_value.value }}" placeholder="{{ filter.range_max | money_without_currency }}">
      {%- endcase -%}
    </details>
  {%- endfor -%}
  <input type="hidden" name="sort_by" value="{{ collection.sort_by }}">
  <button>Apply</button>
</form>

URL parameters

Filter	Parameter
Availability	filter.v.availability=1
Price	filter.v.price.gte=100&filter.v.price.lte=300 (in major units)
Vendor	filter.p.vendor=Layla
Product type	filter.p.product_type=Abayas
Tag	filter.p.tag=linen
Option	filter.v.option.size=M, filter.v.option.color=Black
Custom field	filter.p.m.custom.material=Linen
Category	filter.p.t.category=…

Repeat a parameter for several values (filter.p.vendor=A&filter.p.vendor=B): values of one filter are OR-ed, different filters AND-ed. Sort with sort_by (collection.sort_options lists the choices).

Active filters and “clear”

{%- for filter in collection.filters -%}
  {%- for value in filter.active_values -%}
    <a href="{{ value.url_to_remove }}">{{ filter.label }}: {{ value.label }} ✕</a>
  {%- endfor -%}
{%- endfor -%}
<a href="{{ collection.url }}">Clear all</a>

Without reloading

Submit the form with JavaScript: build the URL from the form data, fetch it with section_id= for the product grid (the section rendering API), swap the grid, and update the address bar with history.replaceState.

Colour options have presentation: "swatch" and value.swatch.color, to draw colour circles instead of names.