Warning
The Product Highlights block has been deprecated in favor of the Product Specifications app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Specification's blocks in order to keep up with the component's evolution.
The product-highlights block shows the general specifications of a product.
Configuration
- Import the
vtex.store-componentsapp to your theme's dependencies in themanifest.jsonfile as in the following example:
_10 "dependencies": {_10 "vtex.store-components": "3.x"_10 }
- Add the
product-highlightsblock to any child of thestore.productorproduct-summarytemplates. For example:
_10 "store.product": {_10 "children": [_10+ "product-highlights",_10 ]_10 },
- Then, declare the
product-highlightsblock using the props stated in the Props table.
Props
| Prop name | Type | Description | Default value |
|---|---|---|---|
highlights | Array(Highlights) | Highlights of a product. | [] |
highlights props
| Prop name | Type | Description |
|---|---|---|
name | String! | Highlights name. |
values | Array(String)! | Highlights values. |
Customization
To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.
| CSS Handles |
|---|
highlightContent |
itemHighlight |
highlightTitle |
highlightValue |