📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Product Quantity

The Product Quantity allows users to a add a chosen amount of the displayed product in their cart.



  1. Import the Product Quantity to your dependencies on manifest.json file.
  "dependencies": {
    "vtex.product-quantity": "1.x"
  1. Add the Product Quantity block to your theme. If you want to display it on a Product Page, you should declare the product-quantity in the store.product block. In order to display it in a Product Summary block, i.e. in blocks that use Product Summary, declare the product-summary-quantity in the product-summary.shelf block.

Check an example of a Product Details Page built using Flex Layout with the product-quantity below:

  "flex-layout.col#product-price": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    "children": [
+      "product-quantity",
  "product-quantity": {
    "props": {
      "warningQuantityThreshold": 9999999
Prop nameTypeDescription
warningQuantityThresholdNumberDisplays the quantity of remaining items in stock if the available quantity is less than or equal to the value given to this property. Default: 0 (does not appear).


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