Require a custom Change in Trade Theme Filter

[big99dev]

We are having a store which is using shopify theme Trade 

=> want a help to make some custom change in filter like when we have category of product and the particular  category is selected  then that category should move to the top in category filter 

=> if the particular category is selected then in other filter option the option option should be visible which is related to that category other should get hide automatically 

require a solution code and file name which need to be changed 

Thanks & Regards

  

  

[Small_Task_Help]

Hi,

Hope this will work

- Make Selected Category Go to Top
- Show Only Relevant Filter Options Based on Category
Code Example (add to collection.js or facets.js)

document.addEventListener("DOMContentLoaded", function () {
  const categoryFilter = document.querySelector('[name="filter.v.category"]');
  const filterGroups = document.querySelectorAll('.facets__disclosure');

  // Define which filters are allowed per category
  const categoryToFilters = {
    "Shoes": ["Size", "Color"],
    "Shirts": ["Color", "Material"],
    "Bags": ["Type", "Size"]
  };

  function updateFilters() {
    let selectedCategory = document.querySelector('[name="filter.v.category"]:checked');
    if (!selectedCategory) return;

    let allowed = categoryToFilters[selectedCategory.value] || [];

    filterGroups.forEach(group => {
      let label = group.querySelector('.facets__summary').textContent.trim();
      if (label === "Category") return; // Always show category
      if (allowed.includes(label)) {
        group.style.display = "";
      } else {
        group.style.display = "none";
      }
    });
  }

  // Run initially
  updateFilters();

  // Re-run on category change
  categoryFilter?.addEventListener("change", updateFilters);
});