The product-name block is responsible for displaying a product name along with other information about the product, such as the SKU or brand.

1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file, as in the following example:

2. Add the product-name block to any child of the store.product template (Product Details Page template). For example:

3. Then, declare the product-name block using the props stated in the Props table. For example:

Prop name	Type	Description	Default value
classes	CustomCSSClasses	Overrides default CSS handles. For further information, please refer to this document. Note that this is only helpful if you're using this block as a React component.	undefined
displayMode	enum	Displays the product name (plainText) or the link to the product page (linkToProductPage).	plainText
showBrandName	boolean	Displays the brand name.	false
showProductReference	boolean	Displays the product reference code.	false
showSku	boolean	Displays the SKU value.	false
showSponsoredBadge	boolean	Displays a sponsored badge above the product's name.	false
sponsoredBadgeLabel	string	Text of the sponsored badge if it's rendered.	""
tag	string	Defines the HTML tag of the product container. Possible values are: div, h1, h2, h3.	div

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

CSS Handles
productBrand
productNameBrandLoader
productNameContainer
productNameLoader
productNameSkuLoader
productReference
productSku
sponsoredBadge