Product Description


ProductDescription is a VTEX Component that shows the description of a product. This Component can be imported and used by any VTEX App.

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

Table of Contents


You should follow the usage instruction in the main README.

Then, add product-description block into your app theme, as we do in our Product Details app.

Blocks API

This component has an interface that describes which rules must be implemented by a block when you want to use the ProductDescription.

  "product-description": {
    "component": "ProductDescription"


Through the Storefront, you can change the ProductDescription's behavior and interface. However, you also can make in your theme app, as Dreamstore does.

Prop nameTypeDescription
descriptionStringProduct description

Content API

You can customize your product-description block inside your product page by passing available props in your blocks.json file.

Here are the props for this component:

Prop nameTypeDescriptionDefault
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

Styles API

You should follow the Styles API instruction in the main README.

Below, we describe the tokens, their explanation and the component where it is located.

Token nameComponentDescription
productDescriptionContainerProductDescriptionThe main container of ProductDescription.
productDescriptionTitleProductDescriptionThe title of the description.
productDescriptionTextProductDescriptionThe text of the description.