Monitoring - not detecting changes in color of available sizes

Hello Support team,

I’ve been tryin to monitor changes in a website and I believe it’s not working. Please see the screenshot attached.

I would like to know if there is any way taht Distill can notify me when the part of the page inside the red rectangle changes. As you can see, the size letter is black when it is available, and turns grey when unavailable. Could you please send me the configuration so I can be notified when the sizes’ color changes? I would really appreciate it.
Here is the link to the page:
Thanks in advance

Hello @jpruiz, there are two ways to monitor the list of available sizes for changes.

First method is to only monitor the list of available sizes instead of all of them. This can be done using the following CSS selector expression: .size-selector__size-list-item:not([disabled])

The second method is to monitor the list’s HTML. Note that by default, Distill monitors changes to text as shown in the following screenshot:

You can change it to monitor the HTML instead (using innerHTML property). That way, it will capture all changes to the selected element. Following screenshot shows it in action:

I recommend trying both approaches out and see which one works best for you. Let me know if you have any questions or need any clarification.


Thank you so much! it seems to work! :slight_smile:

1 Like

Great, thanks for the update!

Hey, how do I use the first method? When I do this, it gives me the “Selection empty” error.

@vulvare As you can see, the page’s layout has changed. Using the first method, following CSS selector should be able to select the items that are in stock:


Similarly, there are others to match different kinds of availability:


I will recommend using the second method. This should give you the most flexibility where you can configure things on your own using the visual selector.