This page is about version 2.58.2 of the app, which is not the most recent version. The latest stable version is 2.90.7.

Product Summary is an app responsible for summarizing product information (such as name, price and image) in other store blocks, such as the Shelf and the Minicart.

1. Import the vtex.product-summary app to your theme's dependencies in the manifest.json:

Now, you are able to use all blocks exported by the product-summary app. Check out the full list below:

Block name	Description
product-summary.shelf	Logical block responsible for providing the needed structure, data and context for its child blocks (listed below).
product-summary-attachment-list	Renders a list for the product attachments.
product-summary-brand	Renders the product brand.
product-summary-buy-button	Renders the Buy Button. Notice that this block should only be configured if your store still uses the Minicart v1. When using the Minicart v2, you should configure the Add To Cart Button instead.
product-summary-description	Renders the product description.
product-summary-image	Renders the product image.
list-context.product-list	Renders a list of products in the Product Summary.
product-summary-name	Renders the product name.
product-summary-price	Renders the product price.
product-summary-sku-selector	Renders the SKU Selector block.
product-specification-badges	Renders badges based on the product specifications.

2. Add the product-summary.shelf block to the block that will host the product information, such as the Shelf. Notice that although the block's name refers to the Shelf block, it can and should be used in any block that is able to render summarizing product information, such as the Minicart and those found on the Search Results page.

3. Then, based on the product information you desire to have rendered, choose which blocks from the exported list above will be sent as the product-summary.shelf children. In a scenario in which we want to display the product name, description, image, price, a SKU selector and then a Buy Button, it would go as follows:

In order to configure and better understand each of the Product Summary exported blocks, go through their respective documentation in the Docs folder.

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
aspectRatio
buyButton
buyButtonContainer
clearLink
column
container
containerNormal
containerSmall
containerInline
description
element
image
imageContainer
imagePlaceholder
information
isHidden
nameContainer
priceContainer
quantityStepperContainer
spacer