SKU Selector


SKUSelector is a VTEX Component that is resposible to handle events of sku selection for a product. This component can be imported and used by any VTEX App.

📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.

Table of Contents


You should follow the usage instruction in the main README.

Then, add sku-selector block into your app theme, as we do in our Product Details app.

Blocks API

When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within SKUSelector and describes if they are required or optional.

  "sku-selector": {
    "component": "SKUSelector"

For now this block does not have any required or optional blocks.


Through the Storefront, you can change the SKUSelector behavior and interface. However, you also can make in your theme app, as Store theme does.

Prop nameTypeDescriptionDefault value
skuSelectedSKU!SKU selected-
skuItemsArray(SKU)!List of SKU Items-
onSKUSelectedFunction!Callback that is called when a SKU is selectedFunction that redirects to the page with the product and the selected SKU


Prop nameTypeDescriptionDefault value
nameString!Name of the sku-
itemIdString!The SKU id-
imagesArray(Image)!The images of the SKU-


Prop nameTypeDescriptionDefault value
imageUrlString!The URL of the image-
imageLabelStringThe label of the image-

Layout API

These are properties that you can customize in your blocks.json file.

Prop nameTypeDescriptionDefault value
hideImpossibleCombinationsbooleanIf true, if a variation option leads to a combination that does not exist, that option won't appear. If false, it will appear but won't be pressable and will appear faded, will much less opacity.true
maxItemsnumberThe maximum number of items to be displayed of a variation before showing the see more button. If the see more button should appear, it will be displayed maxItems - 2 options before the button10
showValueNameForImageVariationbooleanIf true, show the name for the selected image variation to the right of the variation name. For example: Color Red, if the red color variation is selected.false
thumbnailImagestringIf you pass this prop it will show the first image that has this text on the image's attribute imageLabel. If you pass this prop and there is no image with this text in the imageLabel it will show any image of the product.undefined
visibleVariationsstring[]If you pass this array it will only display the passed names, if you pass a name that doesn't represent a variation it just doesn't show anything, which means that passing a empty array doesn't display any variationIs undefined, but shows every variation
variationsSpacingnumberThis prop represents how much margin-bottom you want to put in all variation blocks. The value is not in px, every value represent a tachyons class, so the value numbers are from 0-117
imageHeightnumber | objectHeight of the thumbnail, if you pass an object it expects two attributes, desktop and mobile, and the value of both is the height on each type of device'auto'
imageWidthnumber | objectIt works same way as imageHeight'auto'
showVariationsLabelsbooleanIf should show the variations nametrue
initialSelectionInitialSelectionEnumControl the initial selection chosen for the variations when page is loaded.complete
showVariationsErrorMessagebooleanIf should show an error message when you click in the BuyButton but didn't select an option of each variationtrue

Values and description for InitialSelectionEnum: | Value | Name | Description | | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | complete | Complete | It will selected the variations values for the first SKU available in the product possible items | | image | Image | It will select the variation for variations with images (like Color). All other variations will be unselected | | empty | Empty | All variations will appear as unselected on first load |

Content API

These properties can be set via Storefront

Prop nameTypeDescriptionDefault value
seeMoreLabelStringLabel of see more button that appears when more than maxItems items are available for one variation. The string must have a {quantity} placeholder to show the appropriate remaining items available. Example: \"See {quantity} more\"See {quantity} more

Styles API

You should follow the Styles API instruction in the main README.

CSS Namespaces

ClassNameDescriptionComponent Source
skuSelectorContainerSKUSelector containerSKUSelectorContainer
skuSelectorSubcontainerSKUSelector inner containerVariation
skuSelectorNameSKUSelector nameVariation
skuSelectorNameContainerSKUSelector name containerVariation
skuSelectorTextContainerSKUSelector Text container, containing name and selected item, if requestedVariation
seeMoreButtonSKUSelector see more button containerVariation
skuSelectorSelectorImageValueName of selected image variation beside the variation nameVariation
skuSelectorNameSeparatorSeparator of between skuSelectorTextContainer and skuSelectorSelectorImageValueVariation