Where you can achieve what your competitors can’t

Shopify Custom Filters Enhancement

CODE : Hide underline from filters

/* Designed by OnHOW YouTube Channel - Anas El Medlaoui */

.facets__summary,
.facets__summary *,
.mobile-facets__summary,
.mobile-facets__summary *,
.facets__summary-label,
.facets__summary span,
.mobile-facets__summary span {
  text-decoration: none !important;
}

.facets__summary:hover,
.facets__summary:hover *,
.mobile-facets__summary:hover,
.mobile-facets__summary:hover *,
.facets__summary:focus,
.facets__summary:focus *,
.mobile-facets__summary:focus,
.mobile-facets__summary:focus * {
  text-decoration: none !important;
}

CODE : Show filters dropdown on hover

<script>

document.addEventListener('DOMContentLoaded', function() {
  let hoverTimeout;
  
  const desktopFilters = document.querySelectorAll('.facets__disclosure');
  
  desktopFilters.forEach(function(filter) {
    filter.addEventListener('mouseenter', function() {
      clearTimeout(hoverTimeout);
      this.setAttribute('open', '');
      const summary = this.querySelector('.facets__summary');
      if (summary) {
        summary.setAttribute('aria-expanded', 'true');
      }
    });
    
    filter.addEventListener('mouseleave', function() {
      const self = this;
      hoverTimeout = setTimeout(function() {
        self.removeAttribute('open');
        const summary = self.querySelector('.facets__summary');
        if (summary) {
          summary.setAttribute('aria-expanded', 'false');
        }
      }, 100);
    });
  });
});

document.addEventListener('shopify:section:load', function() {
  const newDesktopFilters = document.querySelectorAll('.facets__disclosure');
});

</script>