Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Summary Shelf
vtex.product-summary
Version: 2.89.0
Latest version: 2.89.0

The Product Summary Shelf is the main block exported by the Product Summary app. It includes the child blocks required to display the Product Summary component in your store.

{"base64":"  ","img":{"width":2852,"height":1550,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":543765,"url":"https://user-images.githubusercontent.com/40380674/96649443-7d21d480-1307-11eb-9100-534fa9e70ca6.png"}}
)

Configuration

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

_10
dependencies: {
_10
"vtex.product-summary": "2.x"
_10
}

  1. Add the product-summary.shelf block as a child of the list-context.product-list block:

_10
"list-context.product-list": {
_10
+ "blocks": ["product-summary.shelf"]
_10
},

  1. Declare the product-summary.shelf block, passing the desired blocks exported by the Product Summary app to build your Product Summary component. For example:

_12
{
_12
+ "product-summary.shelf": {
_12
+ "children": [
_12
+ "product-summary-image",
_12
+ "product-summary-name",
_12
+ "product-rating-inline",
_12
+ "product-summary-space",
_12
+ "product-summary-price",
_12
+ "product-summary-buy-button"
_12
+ ]
_12
+ }
_12
}

Remember to define the other Product Summary blocks in your theme, otherwise the component will not be displayed.

Prop nameTypeDescriptionDefault value
priceBehaviorenumDetermines whether the component should fetch the most up-to-date price (async) or (default). Remember to configure the Search Result's simulationBehavior prop to skip and use the Product Price product-price-suspense block to render a loading spinner while the price information is being fetched.default
trackListNamebooleanDetermines whether the component should send the list name to the product page when the product summary is clicked. Disabling it will prevent the productDetail GTM event sent on the PDP to identify from which list the user navigated.true
sponsoredBadgeLabelStringThe text of the "Sponsored" tag, if applicable."store/sponsored-badge.label"
sponsoredBadgePositionenumThe position of the "Sponsored" tag, if applicable. Possible values are titleTop, containerTopLeft and none."titleTop"

Customization

The Product Summary Shelf merely establishes the block structure to render the Product Summary component. Therefore, this block does not have CSS Handles for its specific customization.

Instead, you should use its child block Handles.

See also
Vtex.product Summary
VTEX IO Apps
VTEX App Store
VTEX IO Apps