My filter button isn't work

Store Design

Topic summary

A user reports that their store’s filter button doesn’t update product results on desktop without a manual page refresh. On mobile, the filter button doesn’t appear at all.

Technical Issues Identified:

  • Hard-coded section ID in facets.js no longer matches the current collection template ID after modifications
  • Missing data-id attribute on the product grid element that the theme JavaScript expects
  • Missing CSS code
  • Duplicate options appearing under the “Availability” filter

Root Cause:
The theme’s JavaScript fails to fetch and update the product grid because the section ID reference is outdated. The user had been using the “Filter & Search” app from Shopify, but it still doesn’t function properly.

Status: The issue remains unresolved with multiple code-level problems requiring fixes.

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

My store has a filter button on the desktop, but once I’ve chosen an option, nothing changes until I refresh.

In my mobile, the button does not even present as an option.

my website is: https://ru9.vn/

2

Yes, I agree with you; I used the app “Filter & Search” options in Shopify, but it still does not function; what should I do?

3

There are several problems with your theme.

For example, in facets.js there is a hard-coded section id:

const url = `${window.location.pathname}?section_id=template--14675310936143__main-collection&${searchParams}`;

It may have worked before, but when you’ve modified the collection template the id is not longer matches and theme JS fails to fetch data to update product grid.

There is another place:

section: document.getElementById('product-grid').dataset.id,

where code expects your product grid element to have data-id attribute to use it later to construct URL, but it is missing.

This is probably the reason why section ID was hard-coded …

Some CSS code is missing as well – this is why you have duplicate options under “Availability” filter.

1 Like