Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Basic components
Product Summary SKU Selector
vtex.product-summary
Version: 2.89.0
Latest version: 2.89.0

The product-summary-sku-selector is a VTEX block that's tasked with rendering the SKU Selector component in a Product Summary component, such as the Shelf or the Search Results Page.

{"base64":"  ","img":{"width":2224,"height":1302,"type":"gif","mime":"image/gif","wUnits":"px","hUnits":"px","length":767184,"url":"https://user-images.githubusercontent.com/52087100/68625690-87f9a580-04b8-11ea-835d-009ac768805f.gif"}}

Configuration

  1. Follow the Product Summary app's configuration instruction.
  2. Add the product-summary-sku-selector to the Product Summary's desired block. In the following example, we'll use a Shelf:

_13
"product-summary.shelf": {
_13
"children": [
_13
"product-summary-add-to-list-button",
_13
"stack-layout#prodsum",
_13
"product-summary-name",
_13
"product-rating-inline",
_13
"product-summary-space",
_13
"product-summary-sku-selector",
_13
"product-summary-price",
_13
"product-identifier.summary",
_13
"product-summary-buy-button"
_13
]
_13
},

  1. Below, declare the product-summary-sku-selector block. The props that it uses are the same that are available for the SKU Selector. For example:

_10
"product-summary-sku-selector": {
_10
"props":{
_10
"showVariationsLabels": ["false"]
_10
}
_10
},

The Product Summary SKU block can only be modified through the source code. It's not possible yet to edit it via the Site Editor.

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
SKUSelectorContainer
See also
Vtex.product Summary
VTEX IO Apps
VTEX App Store
VTEX IO Apps