Product Summary Price

{"base64":" ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryprice-0.png"}}

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://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryprice-1.png"}}

Configuration

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


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

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  },

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`

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`