Documentation
Feedback
Guides

Product Identifier

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

{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAP0lEQVR4nAE0AMv/ANjc1tHUzeXm5unp6gDw8On5+fb8/Pv///8AOkpjGzNQJThUS1x5AA4yVwAKNgAmTAAqUJuVGyTbU1sxAAAAAElFTkSuQmCC","img":{"src":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-identifier-0.png","width":208,"height":224,"type":"png"}}

Configuration

Add the vtex.product-identifier app to your theme's dependencies in the manifest.json file, as in:


_10
"dependencies": {
_10
"vtex.product-identifier": "0.x"
_10
}

Add product-identifier.product block to your store 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 is available is also available within the admin's CMS where you can configure this component to show other identifiers, such as:

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

It's also possible to hide the component label or customize its text. Notice that, in the following example, the "Reference" text was substituted by "Foo".

{"base64":"  ","img":{"width":208,"height":230,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":20602,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-identifier-1.png"}}

Customization

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

CSS Handles
product-identifier
product-identifier__label
product-identifier__separator
product-identifier__value
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page