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.

Configuration
- Import the
vtex.product-summary
app to your theme's dependencies in themanifest.json
:
"dependencies": {
"vtex.product-summary": "2.x"
}
Now, you are able to use all blocks exported by the product-summary
app. Check out the full list below:
Block name | Description |
---|---|
list-context.product-list | product-summary.shelf block. This block, then, provides its child blocks with the product data. |
product-summary.shelf | |
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. This block must be configured only if your store uses the Minicart v1. If your store uses the Minicart v2, please configure the Add To Cart Button instead. |
product-summary-description | Renders the product description. |
product-summary-image | Renders the product image. |
product-summary-name | Renders the product name. |
product-summary-sku-name | Renders the selected sku name. |
product-summary-price | |
product-summary-sku-selector | Renders the SKU Selector block. |
product-specification-badges | Renders badges based on the product specifications. |
- Add the
list-context.product-list
block to a store template of your choice and declare theproduct-summary.shelf
in its block list. For example:
{
"list-context.product-list": {
"blocks": ["product-summary.shelf"]
},
Info
Although the name of the block 'product-summary.shelf' alludes to the Shelf component, this block is not required to create a Shelf component. The Product Summary Shelf is used to present summary product information in other components, such as the Minicart and the Search Results page.
- Add the blocks from the list above as children of the
product-summary.shelf
, considering the product information you want to present in the product list. Take the following example in which the product name, description, image, price, SKU selector, and Buy Button are all displayed in the Product Summary:
{
"list-context.product-list": {
"blocks": ["product-summary.shelf"]
},
"product-summary.shelf": {
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
]
}
}
Customization
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 |
Contributors ✨
Thanks goes to these wonderful people:
This project follows the all-contributors specification. Contributions of any kind are welcome!