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

Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file, as in the following example:
"dependencies": {
"vtex.store-components": "3.x"
}
- Add the
product-name
block to any child of thestore.product
template (Product Details Page template). For example:
"store.product": {
"children": [
"flex-layout.row#product",
]
},
"flex-layout.row#product": {
"children": [
+ "product-name"
]
},
- Then, declare the
product-name
block using the props stated in the Props table. For example:
"product-name": {
"props": {
"showSku": true,
"showBrandName": true
}
},
Props
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 |
tag | string | Defines the HTML tag of the product container. Possible values are: div , h1 , h2 , h3 . | div |
Customization
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 |