VTEX Developer Portal

Product Availability


The Product Availability component shows different messages set by the user, depending on the available quantity of the product.

It is only available to be used on the store.product block, in your product page.

:loudspeaker: Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request

Table of Contents


This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.

  "dependencies": {
"vtex.product-availability": "0.x"

Then, add product-availability block to your blocks.json

Now, you can change the behavior of the product-availability block that is in the minicart. See an example of how to configure without showing availability:

  "product-availability": {
    "props": {
      "lowStockMessage":"Only {quantity} left!",
      "highStockMessage":"Item in stock!"

See an example of how to configure showing availability:

  "product-availability": {
    "props": {
      "showAvailability": "stock",
      "showAvailabilityMessage": "There are {quantity} available!"

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within product-availability and describes if they are required or optional.

  "product-availability": {
    "component": "ProductAvailability"

For now this block does not have any required or optional blocks.


Through the Storefront, you can change the product-availability's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescription
thresholdNumberDefineMinimum quantity that makes low stock message appear (if message is set). Default: 0
lowStockMessageStringString to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: "Only {quantity} left!". Leave empty to not show. Default: ""
highStockMessageStringString to be shown when stock is higher or equal than threshold. If left empty, won't show. Default: ""
showAvailability'disabled' \ 'stock'Enables the possibility to show the available items instead of lowStockMessage or highStockMessage. Default 'disabled'. To enable it, string should be 'stock'
showAvailabilityMessageStringString to be shown when show available option is true. Should have {quantity} inside the given string, to be replaced for the available property. Example: "There are {quantity} available!". Leave empty to not show. Default: ""

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  1. Create a file called vtex.product-availability.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;

CSS Namespaces

Below, we describe the namespaces that are defined in the product-availability.

Token nameComponentDescription
containerindexThe main container of ProductAvailability
lowStockTextindexNormal text for the low stock message.
lowStockHighlightindexNumber of the low stock message that is supposed to be highlighted.
highStockTextindexText of the hight stock message.
showAvailableTextindexText of the show available message.
showAvailableTextHighlightindexNumber of the available items that is supposed to be highlighted.


You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.


To execute our tests go to react/ folder and run yarn test

Travis CI

Build StatusBuild Status
Coverage StatusCoverage Status

Updated 4 months ago

Product Availability

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.