Product Specifications

https://img.shields.io/badge/-Deprecated-redhttps://img.shields.io/badge/-Deprecated-red

⚠️

Warning

The Product Specifications block has been deprecated in favor of the Product Specifications app. Although support for this block is still granted, we strongly recommend you to update your store theme with the Product Specification's blocks in order to keep up with the component's evolution.

The product-specifications block shows the technical specifications of a product.

Product SpecificationsProduct Specifications

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:
  "dependencies": {
    "vtex.store-components": "3.x"
  }
  1. Add the product-specifications block to any child of the store.product template (Product Details Page template). For example:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
+     "product-specifications#product"
    ]
  },
  1. Then, declare the product-specifications block using the props stated in the Props table. For example:
   "product-specifications#product": {
    "props": {
      "shoudCollapseOnTabChange": true,
      "collapsible": "desktopOnly"
    }
  },

Props

Prop nameTypeDescriptionDefault value
collapsiblemobileOnly|desktopOnly|always|neverDefines when the content of the specifications should be collapsed.always
hiddenSpecificationsString[]Name of the specifications to be hidden.[]
shouldCollapseOnTabChangeBooleanIf it should collapse if you change the tab.false
showSpecificationsTabBooleanShows the component in the tabs mode if true.false
visibleSpecificationsString[]Name of the specifications to be presented. Only provide one of hiddenSpecifications or visibleSpecifications.[]

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
specificationItemProperty[data-specification="{specificationName}"]
specificationItemSpecifications
specificationsTab
specificationsTable
specificationsTableBody
specificationsTableContainer
specificationsTableHead
specificationsTablePropertyHeading
specificationsTableSpecificationHeading
specificationsTableRow
specificationsTabsContainer
specificationsTitle

Did this page help you?