Documentation
Feedback
Guides

Store Components
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.

{"base64":"  ","img":{"width":2100,"height":1114,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":410146,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productname-0.png"}}

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file, as in the following example:
"dependencies": { "vtex.store-components": "3.x" }
  1. Add the product-name block to any child of the store.product template (Product Details Page template). For example:
"store.product": { "children": [ "flex-layout.row#product", ] }, "flex-layout.row#product": { "children": [ + "product-name" ] },
  1. 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 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
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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page