Product Description

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://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productdescription-0.png"}}

Configuration

Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

  "dependencies": {
    "vtex.store-components": "2.x"
  }

Add the product-description block to any child of the store.product template (Product Details Page template). For example:

  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
+     "product-description"
    ]
  }

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

Props

Prop name	Type	Description	Default
`classes`	`CustomCSSClasses`	Overrides 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`
`collapseContent`	`Boolean`	If `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`
`showTitle`	`boolean`	Define whether or not to show the title.	`true`
`title`	`string`	Defines 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`