How to style elements when product is out of stock

You can use custom CSS to style any element inside the product container when the product is out of stock. Add the following CSS to your page's head section.

In this example, we select an element with the stock-indicator class and set its background color to red when the product is out of stock. Change the selector to fit your use case.

<style>
  [sf-out-of-stock] .stock-indicator {
  	background-color: red;
  }
</style>

‍

This works because Shopyflow adds the sf-out-of-stock attribute to the product container when the product is unavailable. You can target any child element using this parent selector.