Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Summary

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.

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAAECAIAAAArjXluAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAH0lEQVR4nGOIDQ/ydbRjMNNV0VCSZPgPBgwMTCpABAB8/wkD1kKe4wAAAABJRU5ErkJggg==","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-0.png","width":596,"height":1074,"type":"png"}}

Configuration

  1. Import the vtex.product-summary app to your theme's dependencies in the manifest.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 nameDescription
list-context.product-list
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNIYmD4P7v5c1m8OwMDACBaBI9Db7FhAAAAAElFTkSuQmCC","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-1.png","width":69,"height":20,"type":"svg"}}
Renders the list of products in the Product Summary component. It fetches product data and provides it to the product-summary.shelf block. This block, then, provides its child blocks with the product data.
product-summary.shelf
{"base64":"  ","img":{"width":69,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":917,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-2.png"}}
.
product-summary-attachment-listRenders a list for the product attachments.
product-summary-brandRenders the product brand.
product-summary-buy-buttonRenders 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-descriptionRenders the product description.
product-summary-imageRenders the product image.
product-summary-nameRenders the product name.
product-summary-sku-nameRenders the selected sku name.
product-summary-price
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}
Renders the product price. This block has been deprecated in favor of the Product Price app. Although support for this block is still available, we strongly recommend that you use the Product Price app.
product-summary-sku-selectorRenders the SKU Selector block.
product-specification-badges
{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}
Renders badges based on the product specifications. This block has been deprecated in favor of the VTEX Product Specification Badges app. Although support for this block is still available, we strongly recommend that you use the VTEX Product Specification Badges app.
  1. Add the list-context.product-list block to a store template of your choice and declare the product-summary.shelf in its block list. For example:
{ "list-context.product-list": { "blocks": ["product-summary.shelf"] },

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.

  1. 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
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Product Specifications
« Previous
Product Summary Attachment List
Next »
Contributors
4
Photo of the contributor
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 4 contributors
On this page