VTEX Developer Portal

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-selectorproduct-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"]
  }
},

:warning: This block can only be configured through the source code. You're not yet able to edit using 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

Updated about a month ago


Product Summary SKU Selector


Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.