Change add to cart button color when product out of stock

You can bind the button color to your state variable that tracks the product availability. Let’s say that variable is called isAvailable. First select the button layer where the background fill color is applied. Then navigate to the Data tab and add a new data binding. In the Get field enter style.backgroundColor to access the button color. In the From field use your availability variable to set the color: state.isAvailable ? 'green' : 'red'

Alternatively, we recently introduced an easier way to do this (in beta) with no code straight from the Style tab UI. In the Background section hover over the Fill Color label, click to view more options, and select Bind to dynamic data.

You will then be prompted for how you want to connect data to this property.

Choose Conditional Value and add the same logic.

For more info check out the short video in this related post: Visual State and Actions (beta)