Documentation
Feedback
Guides

Deprecated
Product Specifications

{"base64":"  ","img":{"width":73,"height":20,"type":"svg","mime":"image/svg+xml","wUnits":"px","hUnits":"px","length":927,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productspecifications-0.png"}}

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.

{"base64":"  ","img":{"width":1265,"height":367,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":72299,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productspecifications-1.png"}}

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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page