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

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

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

3. Then, declare the product-summary-name and configure its behavior using the props stated below.

Prop name	Type	Description	Default value
showFieldsProps	object	Defines the visibility on certain properties.	{ showProductReference: false, showBrandName: false, showSku: false }
tag	string	HTML tag used. It can be: div, h1, h2, h3.	h1

• showFieldsProps object:

Prop name	Type	Description	Default value
showSku	Boolean	Show product SKU	false
showProductReference	Boolean	Show product reference	false
showBrandName	Boolean	Show brand name	false

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