The Product Availability app displays text messages regarding the in-stock quantity for products.

1. Add the Product Availability app to your theme's dependencies in the manifest.json file:

2. Add the product-availability block to the desired theme block whose data is fetched from the Product Context, such as the Minicart. For example:

Prop name	Type	Description	Default value
threshold	number	Minimum product quantity that makes the low stock message to be displayed (if any message is set in the lowStockMessage prop).	0
lowStockMessage	string	Message text to be displayed when the in-stock quantity is lower than the quantity defined in the threshold prop. This prop value must have {quantity} inside the string text in order to properly display the stock quantity according to the threshold. For example: "Only {quantity} left!. Notice: if this prop's value is left empty, no message will be shown.	""
highStockMessage	string	Message text to be displayed when the in-stock quantity is higher or equal than the quantity defined in the threshold prop. Notice: if this prop's value is left empty, no message will be shown.	""

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
container
highStockText
lowStockHighlight
lowStockText