Change add to cart button color when product out of stock

[ADCC]

Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.

Builder content link

Builder.io: Drag and drop page builder and CMS

Builder public api key
a8d9e7bf3aef46acafc7970ca95aee8c

What are you trying to accomplish
I’d like to change the color of the add to cart button to make it stand out when the product is out of stock/sold out.

Screenshots or video link
Scroll to bottom of the page to see.

Code stack you are integrating Builder with
Shopify

Reproducible code example
n/a

[ancheetah]

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)