Can someone help me to hide this section if there's no active filters?

Store Design
, , ,

Topic summary

A user is seeking help to hide an “Active Filters” section on their Shopify collection page when no filters are currently applied.

Current Implementation:

  • The section displays active filters for Brand, Age, and Product type
  • Uses Liquid code with {% if collection.filters.size %} conditional
  • Shows filter labels, active values, and price ranges
  • Includes a “Clear all” link

Proposed Solution:
A community member suggested adding a conditional class to the body element when no active filters exist, then using CSS to hide the section based on that class.

Alternative Approach:
Recommended trying a Shopify app (Ultimate Search and Filter) that already includes this functionality built-in.

Status: The issue remains unresolved with the original poster not confirming whether either solution worked.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

Can someone help me to hide this section if there’s no active filters?

store url

danica06_0-1686234734221.png
danica06_0-1686234734221.png390×552 15.5 KB

here are the codes I used on that section:

{% if collection.filters.size %}
  
    

      #### Active Filters
      <small> {{ 'Clear all' | link_to: collection.handle }} </small>
    

    
      {% for filter in collection.filters %}
        {% if filter.label == 'Brand' or filter.label == 'Age' or filter.label == "Product type"%}
                    ###### {{ filter.label }}
        {% endif %}

        {% for filter_value in filter.active_values %}
          
            
{{ filter_value.label }}

            
              
                
              
            

          

        {% endfor %}
        {% if filter.min_value.value or filter.max_value.value %}
          ###### {{ filter.label }}
          
            

              {% if filter.min_value.value %}
                {{ filter.min_value.value | money_without_trailing_zeros }}
              {% else %}
                {{ 0 | money_without_trailing_zeros }}
              {% endif %}
              -
              {% if filter.max_value.value %}
                {{ filter.max_value.value | money_without_trailing_zeros }}
              {% else %}
                {{ filter.range_max | money_without_trailing_zeros }}
              {% endif %}
            

            
              
                
              
            

          

        {% endif %}
      {% endfor %}
    

  

{% endif %}

  {%- if current_tags -%}
    {%- for tag in current_tags -%}
      {%- liquid
        assign tag_text = tag
        assign tag_name = tag | strip
        if tag_name contains '_'
          assign cat = tag | split: '_' | first
          assign tag_text = tag | remove_first: cat | remove_first: '_'
        endif
      -%}

      - {{
            tag_text
            | link_to_remove_tag: tag_name
            | replace: 'title=', 'class="btn btn--small" title='
            | replace: '?view=ajax', ''
            | replace: 'view=ajax', ''
          }}
        
      
    {%- endfor -%}
  {%- endif -%}

@AliReviews

@made4Uo

2

You can simply include a class to the body when there is no active filter and use that class to hide the element. Or try some app on Shopify, they mostly made the logic for this already. You can try this one
https://apps.shopify.com/ultimate-search-and-filter-1