Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Product Description
vtex.store-components
Version: 3.173.0
Latest version: 3.173.0

The product-description block displays the description of a product. This Component can be imported and used by any VTEX App.

{"base64":"  ","img":{"width":1839,"height":691,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":122179,"url":"https://user-images.githubusercontent.com/67270558/147771999-64d529ab-ef49-4cb3-a592-8f54bcbbeac2.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": "2.x"
_10
}

  1. Add the product-description 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-description"
_10
]
_10
}

  1. Then, declare the product-description block using the props stated in the Props table.

Props

Prop nameTypeDescriptionDefault
classesCustomCSSClassesOverrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.undefined
collapseContentBooleanIf true, whenever the product description is too big, it will collapse and show a "Show More" button. When false, it will never collapse and will always show the whole description.true
showTitlebooleanDefine whether or not to show the title.true
titlestringDefines a custom title for the description section.undefined

Customization

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

CSS Handles
productDescriptionContainer
productDescriptionText
productDescriptionTitle
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps