Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Product Summary Price
vtex.product-summary
Version: 2.90.1
Latest version: 2.90.1

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAIAAAB2XpiaAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAFUlEQVR4nGNoYGD6v3v+/6ask37WACanBhm9KoMJAAAAAElFTkSuQmCC","img":{"src":"https://img.shields.io/badge/-Deprecated-red","width":73,"height":20,"type":"svg"}}

The Product Summary Price block has been deprecated in favor of the Product Price app. Although support for this block is still available, we strongly recommend that you update your store theme with the Product Price app to stay up with the component's evolution.

ProductSummaryPrice is a block exported by the Product Summary app responsible for rendering the product's price.

{"base64":"  ","img":{"width":1883,"height":773,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":377933,"url":"https://user-images.githubusercontent.com/67270558/156375295-9fc9b1b8-2534-4a12-ac59-4db52b763bf7.png"}}

Configuration

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

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

  1. Add the product-summary-price block to your store theme as a child of the product-summary.shelf block. For example:

_10
"product-summary.shelf": {
_10
"children": [
_10
"product-summary-image",
_10
"product-summary-name",
_10
+ "product-summary-price",
_10
"product-summary-attachment-list",
_10
"product-summary-space",
_10
"product-summary-column#1"
_10
]
_10
},

  1. Then, declare the product-summary-price and configure its behavior using the props stated below.
Prop nameTypeDescriptionDefault value
showListPriceBooleanShows the product list pricetrue
showInstallmentsBooleanSet installments' visibilitytrue
showDiscountValueBooleanSet discount value's visibilityfalse
showLabelsBooleanSet pricing labels' visibilitytrue
labelSellingPriceStringText of selling price's label
labelListPriceStringText of list price's label
showBordersBooleanSet product's borders visibilityfalse
showListPriceRangeBooleanSet if you want to see list price as range (lowest - highest) when availablefalse
showSellingPriceRangeBooleanSet if you want to see selling price as range (lowest - highest) when availablefalse

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.

CSS Handles
priceContainer
productPriceClass
listPriceContainer
listPriceLabel
listPrice
sellingPriceContainer
sellingPriceLabel
sellingPrice
savingsContainer
savings
interestRate
installmentContainer
listPriceRange
sellingPriceRange
priceLoading
See also
Vtex.product Summary
VTEX IO Apps
VTEX App Store
VTEX IO Apps