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

Configuration
- Import the
vtex.store-components
app to your theme's dependencies in themanifest.json
file as in the following example:
"dependencies: {
+ "vtex.store-components": "3.x"
}
- Add the
product-sku-attributes
block to any child of thestore.product
template (Product Details Page template). For example:
"store.product": {
"children": [
"flex-layout.row#product",
]
},
"flex-layout.row#product": {
"children": [
+ "product-sku-attributes"
]
},
- Then, declare the
product-sku-attributes
block using the props stated in the Props table. For example:
Props
Prop name | Type | Description | Default value |
---|---|---|---|
classes | CustomCSSClasses | Overrides 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 |