The Product Identifier app is responsible for showing a product identifier, such as a product reference, product ID, SKU EAN, or SKU reference.

1. Add the vtex.product-identifier app to your Store Theme's dependencies in the manifest.json file:

   
   

   _10

   "dependencies": {

   _10

   "vtex.product-identifier": "0.x"

   _10

   }

   
   

2. Add product-identifier.product block as a child of product-summary.shelf.

   
   

   _10

   "product-identifier.product": {

   _10

   "props": {

   _10

   "label": "default", //'default' | 'custom' | 'hide'

   _10

   "customLabel": "teste", // text if label is custom

   _10

   "idField": "skuReferenceId" //'itemId' | 'productId' | 'productReference' | 'skuEan' | 'skuReferenceId'

   _10

   }

   _10

   },

   
   

The product-identifier interface can also be configured in the Site Editor. You can choose to display the following identifiers:

• Product Reference
• Product ID
• SKU EAN
• SKU Reference ID
• Item ID

It's also possible to customize or hide the label text. In the following example, the "Reference" text was substituted by "Foo."

To apply CSS customization to this and other blocks, follow the instructions in the Using CSS Handles for store customization guide.

CSS Handles
product-identifier
product-identifier__label
product-identifier__separator
product-identifier__value