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"}}](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"}}](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 themanifest.json
:
_10 dependencies: {_10 "vtex.product-summary": "2.x"_10 }
- Add the
product-summary-price
block to your store theme as a child of theproduct-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 |