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);
});