📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Product Price

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

image

Configuration

  1. Import the vtex.store-component app to your theme's dependencies in the manifest.json;
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the product-price block to any block below store.product (Product template). For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "product-price"
    ]
  },
   "product-price": {
    "props": {
      "showSavings": true,
      "showListPrice": false
    }
  },
Prop nameTypeDescriptionDefault value
labelSellingPriceStringProduct selling price labelnull
labelListPriceStringProduct list price labelnull
showListPriceBooleanSet visibility of list pricetrue
sellingPricesArrayProduct list of selling prices[]
showSellingPriceRangeBooleanSet visibility of selling price rangefalse
showListPriceRangeBooleanSet visibility of list price rangefalse
showLabelsBooleanSet visibility of labelstrue
showInstallmentsBooleanSet visibility of installmentsfalse
showSavingsBooleanSet visibility of savingsfalse
blockClassStringThe set value functions as a customization identifier for any CSS specified in the blocknull

Customization

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

CSS Handles
price_className
price_loader
price_listPriceContainer
price_listPriceLabel
price_listPrice
price_listPriceRange
price_sellingPriceRange
price_sellingPriceContainer
price_sellingPriceLabel
price_sellingPrice
price_savingsContainer
price_savings
price_installment
price_interestRate
price_installmentContainer