Skip to content
VTEX Product Summary app
Branch: master
Clone or download
luciannojunior Merge pull request #156 from vtex-apps/fix/price-labels-not-showing
Add labelListPrice prop in ProductSummaryPrice
Latest commit a615252 May 21, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
messages use store scope for attachment messages May 9, 2019
react add labelListPrice to docs May 21, 2019
resources/images Merge branch 'master' into feature/product-image Apr 27, 2018
.gitignore Add coverage Mar 22, 2019
.travis.yml Add coverage Mar 22, 2019
.vtexignore Setup for react test library / snapshot tests Feb 22, 2019 Release v2.21.0 May 21, 2019 add labelListPrice to docs May 21, 2019
manifest.json Release v2.21.0 May 21, 2019

VTEX Product Summary


The VTEX Product Summary summarises the product informations such as name, price and picture. This is a VTEX app that is used by store theme.

📢 Disclaimer: Don't fork this project; use, contribute, or open issue with your feature request

Release schedule

Release Status Initial Release Maintenance LTS Start End-of-life Store Compatibility
[2.x] Current Release 2018-11-28 2.x
[1.x] Maintenance LTS 2018-08-21 2018-11-28 March 2019 1.x

See our LTS policy for more information.

Table of Contents


This app uses our store builder with the blocks architecture. To know more about Store Builder click here.

To use this app or override the default CSS you need import it in your dependencies on manifest.json file.

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

Then, add product-summary block into our app theme, as we do in our Minicart app.

Now, you can change the behavior of the product-summary block that is in the minicart. See an example of how to configure:

"product-summary": {
  "props": {
    "isOneClickBuy": false,
    "showBadge": true,
    "badgeText": "OFF",
    "displayBuyButton": "displayButtonHover",
    "showCollections": false,
    "showListPrice": true,
    "showLabels": false,
    "showInstallments": true,
    "showSavings": true

Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within product summary and describes if they are required or optional.

  "product-summary": {
    "component": "index",
    "allowed": ["add-to-list-btn#product-summary"]
  "add-to-list-btn#product-summary": {
    "component": "*"

This block has as allowed block the add-to-list-btn#product-summary one.


Through the Storefront, you can change the product-summary's behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop name Type Description
showListPrice Boolean Shows the product list price
isOneClickBuy Boolean Should redirect to checkout after clicking on buy
showLabels Boolean Set pricing labels' visibility
showInstallments Boolean Set installments' visibility
showBorders Boolean Set product's borders visibility
showBadge Boolean Set the discount badge's visibility
showDescription Boolean Set product's description visibility
labelSellingPrice String Text of selling price's label
labelListPrice String Text of list price's label
badgeText String Text shown on badge
buyButtonText String Custom buy button text
displayBuyButton Enum Set display mode of buy button (displayButtonAlways, displayButtonHover, displayButtonNone)
hideBuyButton Boolean Hides the buybutton completely
showCollections Boolean Set collection badges' visibility
displayMode Enum Set display mode of product summary (normal, small, inline or inlinePrice)
showQuantitySelector Boolean Set the quantity selector visibility

| | priceAlignLeft | Boolean | Set the price to be left aligned

Also, you can configure the block add-to-list-btn#product-summary defined on product-summary.

Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the styles builder and create an app styling CSS file.

  1. Add the styles builder to your manifest.json:
  "builders": {
    "styles": "1.x"
  1. Create a file called vtex.product-summary.css inside the styles/css folder. Add your custom styles:
.container {
  margin-top: 10px;

CSS Namespaces

Below, we describe the namespaces that are defined in the product-summary.

Token name Component Description
container ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The main container of ProductSummary
containerNormal ProductSummaryNormal The main container of ProductSummary in normal display mode
containerSmall ProductSummarySmall The main container of ProductSummary in small display mode
containerInline ProductSummaryInline The main container of ProductSummary in inline display mode
element ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The subcontainer of ProductSummary
clearLink ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The link container of ProductSummary
information ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The information container of ProductSummary
imageContainer ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The image container
image ProductImage The product image
aspectRatio Image The image aspect ratio
nameContainer ProductSummaryName The product name container
priceContainer ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The product price container
buyButtonContainer ProductSummaryNormal, ProductSummarySmall, ProductSummaryInline The buy button container
buyButton ProductSummaryBuyButton The buy button
isHidden ProductSummaryBuyButton Style used when buy button is hidden
description ProductSummaryNormal The product description
quantityStepperContainer ProductSummaryInlinePrice The quantity stepper container
imagePlaceholder ProductImage Product image placeholder class


You can check if others are passing through similar issues here. Also feel free to open issues or contribute with pull requests.


Check it out how to contribute with this project.


To execute our tests go to react/ folder and run yarn test

Travis CI

Build Status Coverage Status

You can’t perform that action at this time.