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

imageimage

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. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.undefined
displayModeenumPossible values are: linkToProductPage (show the product link associated with its name) or plainText (to show only the product name).plainText
showBrandNameBooleanBrand name.false
showProductReferenceBooleanProduct reference code.false
showSkuBooleanProduct SKU.false

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

Did this page help you?