Documentation
Feedback
Guides

Store Components
Product SKU Attributes

The product-sku-attributes block displays a list of the current SKU variations of a product.

{"base64":"  ","img":{"width":886,"height":704,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":170331,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-productskuattributes-0.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-sku-attributes 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-sku-attributes" ] },
  1. Then, declare the product-sku-attributes block using the props stated in the Props table. For example:

Props

Prop nameTypeDescriptionDefault value
classesCustomCSSClassesOverrides default CSS handles. To better understand how this prop works, check this document. Note that this is only helpful if you're using this block as a React component.undefined

Customization

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

CSS Handles
attributeLine
attributeName
attributeValue
ProductSKUAttributesContainer
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