Thank you @minhcu
The liquid that renders the tag filters is facets.liquid in Sections I think. I am not sure where to add the code in this file?
{% comment %}
Renders facets (filtering and sorting)
Accepts:
- results: {Object} Collection or Search object
- enable_filtering: {Boolean} Show filtering when true
- enable_sorting: {Boolean} Show sorting when true
- filter_type: {String} Type of filter
- paginate: {Object}
Usage:
{% render ‘facets’, results: collection, enable_filtering: true, enable_sorting: true, filter_type: ‘vertical’, paginate: paginate %}
{% endcomment %}
{{ ‘component-show-more.css’ | asset_url | stylesheet_tag }}
{%- liquid
assign sort_by = results.sort_by | default: results.default_sort_by
assign total_active_values = 0
if results.url
assign results_url = results.url
else
assign terms = results.terms | escape
assign results_url = ‘?q=’ | append: terms | append: ‘&options%5Bprefix%5D=last&sort_by=’ | append: sort_by
endif
-%}
{% if enable_filtering %}
{% comment %} Heading is the first tabbable element on filter type horizontal {% endcomment %}
{{ 'products.facets.filter_by_label' | t }}
{%- endif -%} {% comment %} Pills are right below the title for filter type vertical {% endcomment %} {%- if filter_type == 'vertical' -%}{{ 'products.facets.filter_by_label' | t }}
{%- endunless -%} {{ 'products.facets.clear_all' | t }}{% comment %} Filters for both horizontal and vertical filter {% endcomment %}
{%- for filter in results.filters -%}
{%- assign total_active_values = total_active_values | plus: filter.active_values.size -%}
{% case filter.type %}
{% when ‘boolean’, ‘list’ %}
{{- filter.label | escape }}
{%- if filter_type == 'vertical' -%}
({{ filter.active_values.size }})
{%- endif -%}
{% render 'icon-caret' %}
-
<svg
width=“1.6rem”
height=“1.6rem”
viewBox=“0 0 16 16”
aria-hidden=“true”
focusable=“false”
<svg
aria-hidden=“true”
class=“icon icon-checkmark”
width=“1.1rem”
height=“0.7rem”
viewBox=“0 0 11 7”
fill=“none”
xmlns=“http://www.w3.org/2000/svg”
{{ value.label | escape }} ({{ value.count }})
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- ‘products.facets.product_count_simple.one’ | t: count: value.count -}}
{%- else -%}
{{- ‘products.facets.product_count_simple.other’ | t: count: value.count -}}
{%- endif -%}
)</span
{%- for value in filter.values -%}
{%- endfor -%}
{% comment %} No show more for no JS {% endcomment %}
-
{%- for value in filter.values -%}
-
<svg
width=“1.6rem”
height=“1.6rem”
viewBox=“0 0 16 16”
aria-hidden=“true”
focusable=“false”
<svg
aria-hidden=“true”
class=“icon icon-checkmark”
width=“1.1rem”
height=“0.7rem”
viewBox=“0 0 11 7”
fill=“none”
xmlns=“http://www.w3.org/2000/svg”
{{ value.label | escape }} ({{ value.count }})
{{- value.label | escape }} (
{%- if value.count == 1 -%}
{{- ‘products.facets.product_count_simple.one’ | t: count: value.count -}}
{%- else -%}
{{- ‘products.facets.product_count_simple.other’ | t: count: value.count -}}
{%- endif -%}
)</span
{%- endfor -%}
{{ filter.label | escape }}
{% render 'icon-caret' %}
{% if results.current_vendor or results.current_type %}
{% endif %}
{%- if filter_type == ‘horizontal’ -%}
{% comment %} Sorting and product count are the last elements when filter type is horizontal {% endcomment %}
{%- if enable_sorting -%}
{{ 'products.facets.sort_by_label' | t }}
{%- if results.results_count -%} {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} {%- elsif results.products_count == results.all_products_count -%} {{ 'products.facets.product_count_simple' | t: count: results.products_count }} {%- else -%} {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} {%- endif -%}
{{ 'products.facets.sort_by_label' | t }}
{% if results.current_vendor or results.current_type %}
{% endif %}
{%- if results.terms -%}
{%- endif -%}
{% render 'icon-filter' %} {%- if enable_filtering and enable_sorting -%} {{ 'products.facets.filter_and_sort' | t }} {%- elsif enable_filtering -%} {{ 'products.facets.filter_button' | t }} {%- elsif enable_sorting -%} {{ 'products.facets.sort_button' | t }} {%- endif -%} {%- if enable_filtering -%} {{ 'products.facets.filter_button' | t }} {%- endif -%} {%- render 'icon-close' -%}
{%- if enable_filtering and enable_sorting -%} {{ 'products.facets.filter_and_sort' | t }} {%- elsif enable_filtering -%} {{ 'products.facets.filter_button' | t }} {%- elsif enable_sorting -%} {{ 'products.facets.sort_button' | t }} {%- endif -%}
{%- if enable_filtering -%} {{ 'products.facets.filter_button' | t }} {%- endif -%}
{%- if results.results_count -%} {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} {%- elsif results.products_count == results.all_products_count -%} {{ 'products.facets.product_count_simple' | t: count: results.products_count }} {%- else -%} {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} {%- endif -%}
{{ filter.label | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
-
{%- for value in filter.values -%}
-
<svg
width=“1.6rem”
height=“1.6rem”
viewBox=“0 0 16 16”
aria-hidden=“true”
focusable=“false”
<svg
aria-hidden=“true”
class=“icon icon-checkmark”
width=“1.1rem”
height=“0.7rem”
viewBox=“0 0 11 7”
fill=“none”
xmlns=“http://www.w3.org/2000/svg”{{ value.label | escape }} ({{ value.count }})
{{- value.label | escape }} (
{%- if value.count == ‘1’ -%}
{{- ‘products.facets.product_count_simple.one’ | t: count: value.count -}}
{%- else -%}
{{- ‘products.facets.product_count_simple.other’ | t: count: value.count -}}
{%- endif -%}
)</span
{%- endfor -%}
{{ filter.label | escape }}
{% render 'icon-arrow' %}
{% render 'icon-caret' %}
{%- assign max_price_amount = filter.range_max | money | strip_html | escape -%}
{{ 'products.facets.max_price' | t: price: max_price_amount }}
{{ cart.currency.symbol }}{{ cart.currency.symbol }}
{%- if enable_sorting -%}
{% if results.current_vendor or results.current_type %}
{% endif %}
{%- if results.terms -%}
{%- endif -%}
{%- if filter.type == ‘price_range’ -%}
{%- if filter.min_value.value != null or filter.max_value.value != null -%}
{%- if filter.min_value.value -%}
{{ filter.min_value.value | money }}
{%- else -%}
{{ 0 | money }}
{%- endif -%}
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
{{ filter.range_max | money }}
{%- endif -%}
{% render ‘icon-close-small’ %}
{{ ‘products.facets.clear_filter’ | t }}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{{ ‘products.facets.clear_all’ | t }}
{{ 'products.facets.sort_by_label' | t }}
{% if results.current_vendor or results.current_type %}
{% endif %}
{%- if results.terms -%}
{%- endif -%}
{%- if results.results_count -%} {{ 'templates.search.results_with_count' | t: terms: results.terms, count: results.results_count }} {%- elsif results.products_count == results.all_products_count -%} {{ 'products.facets.product_count_simple' | t: count: results.products_count }} {%- else -%} {{ 'products.facets.product_count' | t: product_count: results.products_count, count: results.all_products_count }} {%- endif -%}
{%- if filter.type == ‘price_range’ -%}
{%- if filter.min_value.value != null or filter.max_value.value != null -%}
{%- if filter.min_value.value -%}
{{ filter.min_value.value | money }}
{%- else -%}
{{ 0 | money }}
{%- endif -%}
{%- if filter.max_value.value -%}
{{ filter.max_value.value | money }}
{%- else -%}
{{ filter.range_max | money }}
{%- endif -%}
{% render ‘icon-close-small’ %}
{{ ‘products.facets.clear_filter’ | t }}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{{ ‘products.facets.clear_all’ | t }}