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.

product-summary-sku-selector

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:
"product-summary.shelf": {
   "children": [
     "product-summary-add-to-list-button",
     "stack-layout#prodsum",
     "product-summary-name",
     "product-rating-inline",
     "product-summary-space",
     "product-summary-sku-selector",
     "product-summary-price",
     "product-identifier.summary",
     "product-summary-buy-button"
   ]
 },
  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:
     "product-summary-sku-selector": {
      "props":{
        "showVariationsLabels": ["false"]
      }
    },
    ⚠️ This block can only be configured through the source code. You're not yet able to edit using the Site Editor.

Customization

CSS HandlesDescriptionComponent Source
SKUSelectorContainerSKU Selector main containerindex