Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Deprecated
Product 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-store-components-productprice-0.png"}}

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

The product-price component is responsible for displaying the price of a given product.

{"base64":"  ","img":{"width":2094,"height":1084,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":408904,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productprice-1.png"}}

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

  1. Add the product-price block to any child of the store.product template (Product Details Page template). For example:

_10
"store.product": {
_10
"children": [
_10
"flex-layout.row#product",
_10
]
_10
},
_10
"flex-layout.row#product": {
_10
"children": [
_10
+ "product-price"
_10
]
_10
},

  1. Then, declare the product-price block using the props stated in the Props table. For example:

_10
"product-price": {
_10
"props": {
_10
"showSavings": true,
_10
"showListPrice": false
_10
}
_10
},

Props

Prop nameTypeDescriptionDefault value
blockClassStringThe set value functions as a customization identifier for any CSS specified in the blocknull
labelListPriceStringProduct list price labelnull
labelSellingPriceStringProduct selling price labelnull
sellingPricesArrayProduct list of selling prices[]
showInstallmentsBooleanSet visibility of installmentsfalse
showLabelsBooleanSet visibility of labelstrue
showListPriceBooleanSet visibility of list pricetrue
showListPriceRangeBooleanSet visibility of list price rangefalse
showSavingsBooleanSet visibility of savingsfalse
showSellingPriceRangeBooleanSet visibility of selling price rangefalse

Customization

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

CSS Handles
price_className
price_installment
price_installmentContainer
price_interestRate
price_listPrice
price_listPriceContainer
price_listPriceLabel
price_listPriceRange
price_loader
price_savings
price_savingsContainer
price_sellingPrice
price_sellingPriceContainer
price_sellingPriceLabel
price_sellingPriceRange
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page