Filters: How to make sure users understand that they need to confirm their filter selection?

Question

Due to performance constraints, our e-commerce site's filter results page cannot have a filter that auto-updates when any filter values are updated. Therefore, we have 2 'Apply Filter' options- one text link at the top of the filter and one button at the bottom.

Currently, when a user updates the filter in any way, there are no visual indicators that they need to click 'Apply Filters' to update their results. Customers typically don't see the top 'Apply Filters' link and end up scrolling all the way down to hit the blue button when the top link is even right next to the filter value they updated.

I'm thinking of testing out some visual indicators to show that users need to click either of these links. Maybe something small like this in the corner of each link/button to draw attention: https://codepen.io/olam/pen/zcqea

Does anyone have any positive experiences with this type of interaction and/or any examples they could share of this used effectively before we go down the path of designing and developing? I'm not sure if this solution is worth pursuing.

Current Top and Bottom of Filter:

Answer 1

What I found really smart and usable on some ecommerce websites the filters are applied while checking them. There is also an apply filter button that basically closes the dialog box.

Answer 2

This is the everyday problem of needing several changes that are each 'expensive' to carry out, and the standard solution is to 'Batch' and submit the changes.

Batching is, critically, a MODAL operation - therefore you MUST have a modal dialog or equivalent, otherwise you get the problem you described.

You can probably implement a modal dialog as a neat overlay that resembles the main list of filter options/tickboxes, greying out the rest of the app until the APPLY/OK (or Cancel) button is clicked. If there are a lot of options then a floating APPLY button will be needed to stay visible as the user scrolls down.