VTEX Developer Portal

Product Summary Name

Product Summary Name renders the product name.

Configuration

You should follow the usage instruction in the main README.

Then, add product-summary-name block into your app theme as children of product-summary.shelf, as we do in our Product Summary app.

   "product-summary.shelf": {
    "children": [
      "product-summary-image",
+     "product-summary-name",
      "product-summary-space",
      "product-summary-column#1"
    ]
  },
Prop nameTypeDescriptionDefault value
showFieldsPropsobjectDefines the visibility on certain properties.{ showProductReference: false, showBrandName: false, showSku: false }
tagstringHTML tag used. It can be: div, h1, h2, h3.h1
  • showFieldsProps object:
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
nameContainer
nameWrapper
brandName
skuName
productReference
productNameLoader

Updated about a month ago


Product Summary Name


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.