Product Summary SKU Selector

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://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-product-summary-productsummaryskuselector-0.gif"}}

Configuration

Follow the Product Summary app's configuration instruction.
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 },

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`