StoreFront Filtering // Updating a value outside of the firm based on the filtered output

Technical Q&A
,

Topic summary

Goal: Access the current filter’s selected value ({{ filter_value.label }}) and use it outside the filter form (e.g., to dynamically set the collection header title and image on /collections/all).

Context/Details:

  • A Liquid snippet loops over filter.active_values to render selected labels and a close (✕) icon. A code snippet (Liquid/markup) is central to the discussion.
  • The author is trying to confirm logic via console.log but sees no updates after initial page load, expecting the script to run again when a filter is selected.
  • They asked where the active filter state is stored (checked localStorage, found nothing).
  • Intended use: map a small set of filter options (4 x 4 = 16 combinations) to corresponding header titles/images, avoiding multiple separate collections.

Latest Interaction:

  • A request for more implementation details (theme, store URL, purpose) was answered: it’s a sandbox; the purpose is header control via filters on a single collection.

Status: No solution yet. Open questions: how to capture filter changes in JS and where filter state is stored.

Summarized with AI on January 12. AI used: gpt-5.
3

Sorry Its in a sanbox at the moment.

I want to get that value out of the filter, so I can use it in the header title.

IE: instead of having multiple collections, where a customer needs to navigate to another /collection/X to see different items, I wanted to take them to collections/all and then control the header title and image via the filter.

I only have 4 options that I want to filter against, so really only 4x4. = 16 different header names and images for header image.