How to fix sort/filter issue in theme development?

Store Design
1

I’ve been developing a theme for a while now and currently fixing a sort/filter issue. What happens is when I filter by brand everything is okay. It is filtered accordingly, the pagination is okay, and the URL looks something like this

stressedowner_0-1651462161798.png

However when I click on filter by (currently I just worked on filtering by vendor) the URL looks like this and the sort is removed from the URL. vice versa. When I click the filter first and sort it, the filter is removed and only the sort is applied. Also the pagination when I filter seems to be all wrong.

stressedowner_1-1651462297496.png

Here’s my code
template-collection.liquid


  {% paginate collection.products by 12 %}
    

      

        #### Shop by categories
          All
        {% for product_type in collection.all_types %}
          {% if product_type == blank %}
            {% continue %}
          {% endif %}
          {{ product_type | link_to_type: class: 'text-lg block' }}
        {% endfor %}
      

      
      {% render 'filters' %}
    

    
      

        # {{ collection.title }}
        
          

Sort by

          {% assign sort_by = collection.sort_by | default: collection.default_sort_by %}
          
            
            {% render 'loader' %}
      
            
            
          

        

      

      
      
        {% for product in collection.products %}
          {% render 'product-card', product: product %}
        {% else %}
          

There are no products inside of this collection.

        {% endfor %}
      

      {% render 'pagination-custom', pagination: paginate %}
    

    
  {% endpaginate %}

Here’s my code for the filters


  {% render 'loader' %}
2

Up. Help, please. Just an idea would be nice