Product SKU Attributes by vtex

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

The ProductSKUAttributes is a block responsible for displaying a list of the currrent SKU variations for the 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

Add the vtex.store-components app to your theme's dependencies in the manifest.json file:


_17  "dependencies: {
_17+   "vtex.store-components": "3.x"
_17  }
_17
_172. Add the `product-sku-attributes` block to any block in the `store.product` template (Product Details Page template). For example:
_17
_17```json
_17  "store.product": {
_17    "children": [
_17      "flex-layout.row#product",
_17    ]
_17  },
_17  "flex-layout.row#product": {
_17    "children": [
_17      "product-sku-attributes"
_17    ]
_17  },

Prop name	Type	Description	Default value
`classes`	`CustomCSSClasses`	Used to override default CSS handles. To better understand how this prop works, we recommend reading about it here. Note that this is only useful if you're using this block as a React component.	`undefined`

Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on Using CSS Handles for store customization.

CSS Handles
`attributeLine`
`attributeName`
`attributeValue`
`ProductSKUAttributesContainer`