Quantity On Cart

The Quantity on Cart app allows you to display a message to your customers informing them how many units of a product they have added to the cart. This message can be displayed on a Shelf or on a product page.

The Quantity On Cart app does not work with promotion scenarios such as Buy Together and Buy One Get One.

1. Open the terminal and use the VTEX IO CLI to log into the desired VTEX account.
2. Run the following command to install the Quantity On Cart app:

3. Open your store’s Store Theme app directory in your code editor.
4. Open your app's manifest.json file and add the Quantity On Cart app under the peerDependencies field.

5. Add the quantity-on-cart block to another theme block that uses a product context, since the quantity-on-cart block handles product data, such as store.product or the product-summary.shelf. In the example below, we have added it to the product-summary.shelf:

After step 5, no further configuration is needed, and the app is ready to use in your store.

The message displayed by the Quantity On Cart app is available in three languages: English (EN), Spanish (ES), and Portuguese (PT), and follows the pattern below, which cannot be changed: EN - You have x units in your shopping cart. | ES - Tienes x unidades en el carrito. | PT - Você tem x unidades no carrinho.

---

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