Product Highlights by vtex

This page is about version 3.150.0 of the app, which is not the most recent version. The latest stable version is 3.178.1.

{"base64":" ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","url":"https://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.

product-highlights is a block that shows the general specifications of a product.

Configuration

Add the vtex.store-component app to your theme's dependencies in the manifest.json;


_10  "dependencies": {
_10    "vtex.store-components": "3.x"
_10  }

Add the product-highlights block to any block below store.product template (product page) or product-summary. For example:


_10  "store.product": {
_10    "children": [
_10      "product-highlights",
_10    ]
_10  },

Props

Prop name	Type	Description	Default value
`highlights`	`Array(Highlights)`	Highlights of a product	`[]`

Highlights:

Prop name	Type	Description
`name`	`String!`	Highlights name
`values`	`Array(String)!`	Highlights values

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`highlightContent`
`itemHighlight`
`highlightTitle`
`highlightValue`