https://img.shields.io/badge/-Deprecated-redhttps://img.shields.io/badge/-Deprecated-red

️ 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

  1. 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": "3.x"
  }
  1. Add the product-highlights block to any child of the store.product or product-summary templates. For example:
  "store.product": {
    "children": [
+     "product-highlights",
    ]
  },
  1. Then, declare the product-highlights block using the props stated in the Props table.

Props

Prop nameTypeDescriptionDefault value
highlightsArray(Highlights)Highlights of a product.[]

highlights props

Prop nameTypeDescription
nameString!Highlights name.
valuesArray(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

Did this page help you?