ProductName.md

📢 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 information such as SKU or brand.

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

2. 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 name	Type	Description	Default value
showSku	Boolean	Show product SKU	false
showProductReference	Boolean	Show product reference	false
showBrandName	Boolean	Show brand name	false

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