Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Product SKU Attributes
vtex.store-components
Version: 3.172.1
Latest version: 3.172.2

This page is about version 3.172.1 of the app, which is not the most recent version. The latest stable version is 3.172.2.

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://user-images.githubusercontent.com/24723/93642867-358ced80-f9d5-11ea-9dad-a5286eb04efd.png"}}

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

_10
"dependencies: {
_10
+ "vtex.store-components": "3.x"
_10
}

  1. Add the product-sku-attributes block to any child of the store.product template (Product Details Page template). For example:

_10
"store.product": {
_10
"children": [
_10
"flex-layout.row#product",
_10
]
_10
},
_10
"flex-layout.row#product": {
_10
"children": [
_10
+ "product-sku-attributes"
_10
]
_10
},

  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
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps