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

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"
  }

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"
    ]
  },

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`