📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Product Name

The ProductName is a block responsible for displaying the product name along other informations such as SKU or brand.

image

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json, for example:
  "dependencies: {
    "vtex.store-components": "3.x"
  }
  1. Add the product-name block to any block below store.product (Product template). For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "product-name"
    ]
  },
  "product-name": {
    "props": {
      "showSKU": true,
      "showBrandName": true
    }
  },
Prop nameTypeDescriptionDefault value
showSkuBooleanShow product SKUfalse
showProductReferenceBooleanShow product referencefalse
showBrandNameBooleanShow brand namefalse

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
productNameContainer
productBrand
productSku
productReference
productNameLoader
productNameBrandLoader
productNameSkuLoader