# Monitoring zara.com - not detecting changes in color of available sizes

**URL:** <https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562>\
**Category:** Help and Support\
**Created:** [January 3, 2023, 5:32pm UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562 "2023-01-03T17:32:04Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![jpruiz](https://forums.distill.io/user_avatar/forums.distill.io/jpruiz/32/287_2.png) [@jpruiz](https://forums.distill.io/u/jpruiz)\
**Post date:** [January 3, 2023, 5:32pm UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562/1 "2023-01-03T17:32:04Z")

</div>

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.

 ![Screenshot_1](https://forums.distill.io/uploads/default/original/1X/624cd0ab667b1e435d588a104373a343181c1ac3.png)  
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:  
[https://www.zara.com/es/es/vestido-punto-combinado-semitransparente-p09598220.html](https://www.zara.com/es/es/vestido-punto-combinado-semitransparente-p09598220.html)  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [January 4, 2023, 11:32am UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562/2 "2023-01-04T11:32:16Z")

</div>

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:

 ![image](https://forums.distill.io/uploads/default/original/1X/7f1c29d78bcb3ca1ebd9d35b4a1f513942ab7901.png)

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:

 ![image](https://forums.distill.io/uploads/default/original/1X/e596cf486e738fe88db06f5d78170bafefddc1e6.png)

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.

Cheers!

---

<div class="post-metadata">

**Author:** ![jpruiz](https://forums.distill.io/user_avatar/forums.distill.io/jpruiz/32/287_2.png) [@jpruiz](https://forums.distill.io/u/jpruiz)\
**Post date:** [January 5, 2023, 9:50am UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562/3 "2023-01-05T09:50:31Z")

</div>

Thank you so much! it seems to work! 🙂  
Regards

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [January 6, 2023, 6:55am UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562/4 "2023-01-06T06:55:33Z")

</div>

Great, thanks for the update!

---

<div class="post-metadata">

**Author:** ![vulvare](https://forums.distill.io/letter_avatar_proxy/v4/letter/v/91b2a8/32.png) [@vulvare](https://forums.distill.io/u/vulvare)\
**Post date:** [July 21, 2023, 10:42am UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562/6 "2023-07-21T10:42:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ajitk](https://forums.distill.io/letter_avatar_proxy/v4/letter/a/ec9cab/32.png) [@ajitk](https://forums.distill.io/u/ajitk)\
**Post date:** [July 21, 2023, 11:56am UTC](https://forums.distill.io/t/monitoring-zara-com-not-detecting-changes-in-color-of-available-sizes/1562/7 "2023-07-21T11:56:30Z")

</div>

@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:

`[data-qa-action='size-in-stock']`

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

`[data-qa-action='size-low-on-stock']`  
`[data-qa-action='size-out-of-stock']`

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.
