The quantity selector is made up of three blocks quantity-selector-minicart, quantity-selector-shelf-guest and quantity-selector-shelf-owner-list and each of them represents a quantity selector for different contexts which are use in mini-cart, guest shelf, list owner shelf and selection modal on search page.

1. Import the vtex.list app to your theme's peer dependencies in the manifest.json file as in the following example:

  "peerDependencies": {
    "vtex.list": "2.x"
  }

2. Add the quantity-selector block to other theme block using a product context, such as the product-summary.shelf. For example:

  "product-summary.shelf":{
    "children":[
      "flex-layout.col"
    ]
  },
  
  "flex-layout.col": {
    "children": [      
      "product-summary-price#desktopPriceGuest",
+     "quantity-selector-shelf-guest",
    ]
  }

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.