Display product filter:

<form class="filter-form">
  {%- for filter in collection.filters -%}
    <details class="filter-group">
      <summary class="filter-group-summary">
        <div>
          <span>{{ filter.label }}</span>

          {%- if filter.active_values.size > 0 -%}
            <span>({{ filter.active_values.size }})</span>
          {%- endif -%}
        </div>
      </summary>

      <div class="filter-group-display">
        <div class="filter-group-display__header">
          <span class="filter-group-display__header-selected">{{ filter.active_values.size }} selected</span>

          {%- if filter.active_values.size > 0 -%}
            <a href="{{ filter.url_to_remove }}" class="filter-group-display__header-reset">Reset</a>
          {%- endif -%}
        </div>

        {%- case filter.type -%}
          {%- when 'boolean' or 'list' -%}
            <ul class="filter-group-display__list">
              {%- for filter_value in filter.values -%}
                <li class="filter-group-display__list-item">
                  <label for="Filter-{{ filter.param_name }}-{{ forloop.index }}">
                  <input type="checkbox"
                    name="{{ filter_value.param_name }}"
                    value="{{ filter_value.value }}"
                    id="Filter-{{ filter.param_name }}-{{ forloop.index }}"
                    {% if filter_value.active -%}checked{%- endif %}
                    {% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}
                  >{{ filter_value.label }}</label>
                </li>
              {%- endfor -%}
            </ul>

            <div class="filter-group-display__submit">
              <input type="submit" value="Apply">
            </div>
          {%- when 'price_range' -%}
            <div class="filter-group-display__price-range">
              <div class="filter-group-display__price-range-from">
                <span>{{ cart.currency.symbol }}</span>

                <input name="{{ filter.min_value.param_name }}"
                  id="Filter-{{ filter.min_value.param_name }}"
                  {% if filter.min_value.value -%}
                    value="{{ filter.min_value.value | money_without_currency | replace: ',', '' }}"
                  {%- endif %}
                  type="number"
                  placeholder="0"
                  min="0"
                  max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                >

                <label for="Filter-{{ filter.min_value.param_name }}">From</label>
              </div>
              <div class="filter-group-display__price-range-to">
                <span>{{ cart.currency.symbol }}</span>

                <input name="{{ filter.max_value.param_name }}"
                  id="Filter-{{ filter.max_value.param_name }}"
                  {% if filter.max_value.value -%}
                    value="{{ filter.max_value.value | money_without_currency | replace: ',', '' }}"
                  {%- endif %}
                  type="number"
                  placeholder="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                  min="0"
                  max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
                >

                <label for="Filter-{{ filter.max_value.param_name }}">To</label>
              </div>
            </div>

            <div class="filter-group-display__submit">
              <input type="submit" value="Apply">
            </div>
        {%- endcase -%}
      </div>
    </details>
  {%- endfor -%}

  <div class="active-filters">
    <a href="{{ collection.url }}?sort_by={{ collection.sort_by }}" class="active-filters__clear">Clear all</a>

    {%- for filter in collection.filters -%}
      {%- if filter.type == "price_range" -%}
        {%- if filter.min_value.value != nil or filter.max_value.value != nil -%}
          <a class="active-filters__remove-filter" href="{{ filter.url_to_remove }}">
            {%- assign min_value = filter.min_value.value | default: 0 -%}
            {%- assign max_value = filter.max_value.value | default: filter.range_max -%}
            {{ min_value | money }} - {{ max_value | money }} X
          </a>
        {%- endif -%}
      {%- else -%}
        {%- for filter_value in filter.active_values -%}
          <a class="active-filters__remove-filter" href="{{ filter_value.url_to_remove }}">
            {{ filter.label }}: {{ filter_value.label }} X
          </a>
        {%- endfor -%}
      {%- endif- %}
    {%- endfor -%}
  </div>
</form>