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.2.

The ProductName is a block responsible for displaying the product name along other information such as SKU or brand.

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

2. Add the product-name block to any block below store.product (Product template). For example:

Prop name	Type	Description	Default value
showSku	Boolean	Show product SKU	false
showProductReference	Boolean	Show product reference	false
showBrandName	Boolean	Show brand name	false
classes	CustomCSSClasses	Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're using this block as a React component.	undefined
displayMode	enum	Possible values: linkToProductPage (show the product link associated with its name) or plainText (to show only the product name).	plainText

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
productNameContainer
productBrand
productSku
productReference
productNameLoader
productNameBrandLoader
productNameSkuLoader