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.

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

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

3. Then, declare the product-summary-price and configure its behavior using the props stated below.

Prop name	Type	Description	Default value
showListPrice	Boolean	Shows the product list price	true
showInstallments	Boolean	Set installments' visibility	true
showDiscountValue	Boolean	Set discount value's visibility	false
showLabels	Boolean	Set pricing labels' visibility	true
labelSellingPrice	String	Text of selling price's label
labelListPrice	String	Text of list price's label
showBorders	Boolean	Set product's borders visibility	false
showListPriceRange	Boolean	Set if you want to see list price as range (lowest - highest) when available	false
showSellingPriceRange	Boolean	Set if you want to see selling price as range (lowest - highest) when available	false

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