Product Name by vtex

This page is about version 3.119.6 of the app, which is not the most recent version. The latest stable version is 3.178.1.

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

{"base64":" ","img":{"width":2100,"height":1114,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":410146,"url":"https://user-images.githubusercontent.com/284515/70231165-8f6b4200-1738-11ea-9f06-3583c08fc693.png"}}

Configuration

Import the vtex.store-components app to your theme's dependencies in the manifest.json, for example:


_10  "dependencies: {
_10    "vtex.store-components": "3.x"
_10  }

Add the product-name block to any block below store.product (Product template). For example:


_16  "store.product": {
_16    "children": [
_16      "flex-layout.row#product",
_16    ]
_16  },
_16  "flex-layout.row#product": {
_16    "children": [
_16      "product-name"
_16    ]
_16  },
_16  "product-name": {
_16    "props": {
_16      "showSKU": true,
_16      "showBrandName": true
_16    }
_16  },

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`