Documentation
Feedback
Guides

Product Summary Name

Product Summary Name is a block exported by the Product Summary app responsible for rendering the product name.

{"base64":"  ","img":{"width":1883,"height":772,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":377119,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryname-0.png"}}

Configuration

  1. Import the vtex.product-summary app to your theme's dependencies in the manifest.json:

_10
dependencies: {
_10
"vtex.product-summary": "2.x"
_10
}

  1. Add the product-summary-name block to your store theme as a child of product-summary.shelf. For example:

_10
"product-summary.shelf": {
_10
"children": [
_10
"product-summary-image",
_10
+ "product-summary-name",
_10
"product-summary-space",
_10
"product-summary-column#1"
_10
]
_10
},

  1. Then, declare the product-summary-name and configure its behavior using the props stated below.
Prop nameTypeDescriptionDefault value
showFieldsPropsobjectDefines the visibility on certain properties.{ showProductReference: false, showBrandName: false, showSku: false }
tagstringHTML tag used. It can be: div, h1, h2, h3.h1
  • showFieldsProps object:
Prop nameTypeDescriptionDefault value
showSkuBooleanShow product SKUfalse
showProductReferenceBooleanShow product referencefalse
showBrandNameBooleanShow brand namefalse

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS Handles for store customization guide.

CSS Handles
nameContainer
nameWrapper
brandName
skuName
productReference
productNameLoader
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page