This page is about version 1.3.0 of the app, which is not the most recent version. The latest stable version is 1.31.0.

Product Price app is responsible for exporting blocks related to the product's price, such as list price, selling price and savings.

In your theme's manifest.json, add the Product Price app as a dependency:

Now, you can use all the blocks exported by the product-price app. Check out the full list below:

Block name	Description
product-list-price	Renders the product list price. If it is equal to the product selling price, this block will not be rendered.
product-selling-price	Renders the product selling price.
product-spot-price	Renders the product spot price. If it is equal to the product selling price, this block will not be rendered. For more information about how to set this up in your store, check this document.
product-installments	Renders the product installments. If more than one option is available, the one with the biggest number of installments will be displayed.
product-price-savings	Renders the product price savings, if there is any. It can show the percentage of the discount or the value of the absolute saving.
product-list-price-range	Renders the product list price range. It follows the same logic applied to the ListPrice: if its value is equal to the product selling price, this block is not rendered.
product-selling-price-range	The product selling price range.

All blocks listed above use product price data fetched from the store catalog. In order to understand further, please access the Pricing Module overview.

To add the Product Price's blocks in your theme, you just need to declare them as children of the product-summary.shelf, exported by the Product Summary app, or declare them in the theme's Product template (store.product).

Notice the following: these blocks necessarily need a Product context in order to work properly. Therefore, when declaring them as children of the product-summary.shelf, be sure that they are in a store template in which this context is available.

For example:

Every block in this app only has two props in common:

Prop name	Type	Description	Default value
markers	[string]	IDs of your choosing to identify the block's exported messages and customize them using the admin's Site Editor. Learn how to use them accessing the documentation on Using the Markers prop to customize a block's message.	[]
blockClass	string	Block ID of your choosing to be used in CSS customization.	undefined

For example:

Every Product Price's block uses the ICU Message Format, making it possible to fully edit the text messages and the variables displayed by each block.

Access your VTEX account's admin, open the Site Editor and look for the Product Price's blocks.

Once editing their messages, bear in mind the message variables exported by each block (stated below) and the documentation on how to use the Markers prop.

• product-list-price

Message variable	Type	Description
listPriceValue	string	List price value.
listPriceWithTax	string	List price value with tax.
taxPercentage	string	Tax percentage.

• product-selling-price

Message variable	Type	Description
sellingPriceValue	string	Selling price value.
sellingPriceWithTax	string	Selling price with tax.
taxPercentage	string	Tax percentage.

• product-spot-price

Message variable	Type	Description
spotPriceValue	string	Spot price value.

• product-installments

Message variables	Type	Description
spotPriceValue	string	Spot price value.
installmentsNumber	string	Number of installments.
installmentValue	string	Value of each installment.
installmentsTotalValue	string	Total value of installments.
interestRate	string	Interest rate.
hasInterest	boolean	Whether the installments have interest (true) or not (false).

• product-price-savings

Message variables	Type	Description
previousPriceValue	string	Previous price value (list price).
newPriceValue	string	New price value (selling price).
savingsValue	string	Difference between previous product price and the new one.
savingsWithTax	string	Difference between previous product price and the new one with taxes.
savingsPercentage	string	Percentage of savings.

• product-list-price-range

Message variables	Type	Description
minPriceValue	string	Value of the cheapest list price SKU.
maxPriceValue	string	Value of the most expensive list price SKU.
minPriceWithTax	string	Value of the cheapest list price SKU with tax.
maxPriceWithTax	string	Value of the most expensive list price SKU with tax.
listPriceValue	string	Value of the list price of the only SKU available.
listPriceWithTax	string	Value of the list price of the only SKU available with tax.

• product-selling-price-range

Message variables	Type	Description
minPriceValue	string	Value of the cheapest selling price SKU.
maxPriceValue	string	Value of the most expensive selling price SKU.
minPriceWithTax	string	Value of the cheapest selling price SKU with tax.
maxPriceWithTax	string	Value of the most expensive selling price SKU with tax.
sellingPriceValue	string	Value of the selling price of the only SKU available.
sellingPriceWithTax	string	Value of the selling price of the only SKU available with tax.

In the gif example above, the block was firstly displaying a Save $224.40 message. By editing the message exported, it now renders a You are saving: $224.40 (37%) message thanks to the changes performed through the admin's Site Editor.

To apply CSS customization in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
installmentValue
installmentsNumber
installmentsTotalValue
installments
interestRate
listPrice'
listPriceRangeMaxValue
listPriceRangeMaxWithTax
listPriceRangeMinValue
listPriceRangeMinWithTax
listPriceRangeUniqueValue
listPriceRangeUniqueWithTax
listPriceRange
listPriceValue
listPriceWithTax
newPriceValue
previousPriceValue
savingsPercentage
savingsValue
savingsWithTax
savings
sellingPrice--hasListPrice
sellingPriceRangeMaxValue
sellingPriceRangeMaxWithTax
sellingPriceRangeMinValue
sellingPriceRangeMinWithTax
sellingPriceRangeUniqueValue
sellingPriceRangeUniqueWithTax
sellingPriceRange
sellingPriceValue
sellingPriceWithTax
sellingPrice
spotPriceValue
spotPrice
taxPercentage