Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Store Components
Product Name
vtex.store-components
Version: 3.173.0
Latest version: 3.173.0

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

{"base64":"  ","img":{"width":2100,"height":1114,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":410146,"url":"https://user-images.githubusercontent.com/284515/70231165-8f6b4200-1738-11ea-9f06-3583c08fc693.png"}}

Configuration

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

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

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

_10
"store.product": {
_10
"children": [
_10
"flex-layout.row#product",
_10
]
_10
},
_10
"flex-layout.row#product": {
_10
"children": [
_10
+ "product-name"
_10
]
_10
},

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

_10
"product-name": {
_10
"props": {
_10
"showSku": true,
_10
"showBrandName": true
_10
}
_10
},

Props

Prop nameTypeDescriptionDefault value
classesCustomCSSClassesOverrides 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
displayModeenumDisplays the product name (plainText) or the link to the product page (linkToProductPage).plainText
showBrandNamebooleanDisplays the brand name.false
showProductReferencebooleanDisplays the product reference code.false
showSkubooleanDisplays the SKU value.false
showSponsoredBadgebooleanDisplays a sponsored badge above the product's name.false
sponsoredBadgeLabelstringText of the sponsored badge if it's rendered.""
tagstringDefines 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
sponsoredBadge
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps