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

ProductHighlights is a VTEX Component that shows the general specifications of a product. This Component can be imported and used by any VTEX App.

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

• Usage
  • CSS namespaces
  • Styles API
    • CSS namespaces

You should follow the usage instruction in the main README.

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

Now, you can change the behavior of the product-details through blocks. See an example of how to configure:

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

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

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

CSS Namespaces

Below, we describe the namespace that are defined in the ProductHighlights.

Class name	Description	Component Source
highlightContent	The content of ProductHighlights section.	index
itemHighlight	The area that wrapper a highlight.	index
highlightTitle	The content that contains the highlight's title.	index
highlightValue	The content that contains the highlight's value.	index