📢 Don't fork this project. Use, contribute, or open issues through Store Discussion.

Product Summary

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

image

Configuration

  1. Import the vtex.store-component's app to your theme's dependencies in the manifest.json, for example:
  dependencies: {
    "vtex.product-summary": "2.x"
  }
  1. Add the product-summary block. For example:
"product-summary": {
  "props": {
    "isOneClickBuy": false,
    "showBadge": true,
    "badgeText": "OFF",
    "displayBuyButton": "displayButtonHover",
    "showCollections": false,
    "showListPrice": true,
    "showLabels": false,
    "showInstallments": true,
    "showSavings": true
  }
}
Prop nameTypeDescription
showListPriceBooleanShows the product list price
isOneClickBuyBooleanShould redirect to checkout after clicking on buy
showLabelsBooleanSet pricing labels' visibility
showInstallmentsBooleanSet installments' visibility
showBordersBooleanSet product's borders visibility
showBadgeBooleanSet the discount badge's visibility
showDescriptionBooleanSet product's description visibility
labelSellingPriceStringText of selling price's label
labelListPriceStringText of list price's label
badgeTextStringText shown on badge
buyButtonTextStringCustom buy button text
displayBuyButtonEnumSet display mode of buy button (displayButtonAlways, displayButtonHover, displayButtonNone)
hideBuyButtonBooleanHides the buybutton completely
showCollectionsBooleanSet collection badges' visibility
displayModeEnumSet display mode of product summary (normal, small, inline or inlinePrice)
showQuantitySelectorBooleanSet the quantity selector visibility

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

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
container
containerNormal
containerSmall
containerInline
element
clearLink
information
imageContainer
image
aspectRatio
nameContainer
priceContainer
buyButtonContainer
buyButton
isHidden
description
quantityStepperContainer
imagePlaceholder
column
spacer