Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Store Components
SKU Selector
vtex.store-components
Version: 3.173.0
Latest version: 3.173.0

The sku-selector block is mainly used in Product Details Pages (PDPs) to display all the SKUs available for a product.

{"base64":"  ","img":{"width":1860,"height":664,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":348509,"url":"https://cdn.jsdelivr.net/gh/vtexdocs/dev-portal-content@main/images/vtex-store-components-skuselector-0.png"}}

Configuration

  1. Import the vtex.store-components app to your theme dependencies in the manifest.json file as in the following example:

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

  1. Add the sku-selector block to any child of the store.product template (product page). For example:

_10
"store.product": {
_10
"children": [
_10
"flex-layout.row#product",
_10
]
_10
},
_10
"flex-layout.row#product": {
_10
"children": [
_10
+ "sku-selector"
_10
]
_10
},

  1. Then, declare the sku-selector block using the props stated in the Props table. For example:

_10
"sku-selector": {
_10
"props": {
_10
"hideImpossibleCombinations": false
_10
}
_10
},

Props

Prop nameTypeDescriptionDefault value
classesCustomCSSClassesOverrides default CSS handles. To better understand how this prop works, please refer to this documentation. Please note that this is only helpful if you're using this block as a React component.undefined
disableUnavailableSelectOptionsbooleanWhether a product variation that leads to an impossible product combination should be displayed with the disabled attribute when displayMode is set to select. By default, all select options are configured without the disabled attribute set based on the type of variationfalse
displayModeenumDefines how the product variation names will be displayed (it does not apply to product variation images). Possible values are: default (displays all variation names), select (only displays the selected variation name), or slider (displays all variation names in a slider when the number of available options is greater than the value defined in the sliderDisplayThreshold prop). Please note that this prop is responsive, so you can declare an object as its value, specifying a value for each breakpoint (desktop and mobile).default
hideImpossibleCombinationsbooleanDefines whether a product variation should be clickable (true) or (false). The variation will not be displayed if true. If false, the variation will be displayed with less opacity. For example, there are two colors for a pair of sneakers: pink and white. If the pink sneaker is only available in one size, the other sizes will not be displayed (true).true
sortVariationsByLabelbooleanDefines if the variations are to be sorted in alphabetical order.false
imageHeightnumberobjectHeight (in px) of the product thumbnail image. You can declare an object as its value in case you want to define a height for each device (desktop and mobile).
imageWidthnumberobjectWidth (in px) of the product thumbnail image. You can declare an object as its value in case you want to define a width for each device (desktop and mobile).
initialSelectionenumControls the user's initial selection for available variations when the product page is fully loaded. Possible values are: complete (selects the first available SKU variation values), image (selects the first available image variation), or empty (no variations will be selected when the page is loaded).complete
maxItemsnumberThe maximum number of variation items to be displayed in the SKU selector before the See more button. The button will always be displayed 2 items before the number set in maxItems.10
showValueForVariationenumDisplays a value for the selected variation. This prop replaces the former showValueNameForImageVariation (deprecated). Possible values are: none (no values are displayed when the variation is selected), image (displays only the image value for the selected variation, if any), or all (all variation values are displayed).none
sliderArrowSizenumberControls the size (height and width) in pixels of the navigation arrows rendered when displayMode is set as slider.12
sliderDisplayThresholdnumberThe minimum number of product variation names that should be displayed using slider display mode. This prop only works properly when displayMode is set as slider.3
sliderItemsPerPageobjectControls how many slides should be displayed on each type of device when displayMode is set as slider. There is more information regarding this prop structure below this table.{desktop: 3, tablet: 2, phone: 1}
showVariationsErrorMessagebooleanWhether an error message should be displayed when the BuyButton is clicked but no available variation was selected (true) or (false).true
showVariationsLabelsenumWhere variation names should be displayed. Possible values are: none (does not display the variation names). Replaces the previous false behavior), variation (displays the variation name as a header of the items. Replaces the previous true behavior), itemValue (displays the variation name before each item's value), and variationAndItemValue (behaves as variation and itemValue at the same time).variation
thumbnailImagestringThe first image to be displayed. This prop value must be the same text string defined in the desired product image imageLabel field (from the Catalog module). If you use this prop and no image declaring the same text string in its imageLabel field is found, any product image will be randomly rendered. To apply the thumbnailImage configuration, please read the Configuring custom images for the SKU Selector documentationundefined
variationsSpacingnumberDefines the margin-bottom size to be applied in the rendered product variations. Possible values range from 0 to 11 (the prop value is not in px; every value represents a tachyon class).7
visibilityenumDefines the scenarios in which the SKU selector should be displayed. Possible values are: always (it will always be displayed, even if the product has only one SKU option) or more-than-one (the SKU selector is only displayed when the product has more than one SKU option).always
visibleVariationsarraySpecifies which product variations should be displayed on the product details page. Please note that no variations will be displayed if you declare a name that does not represent a real product variation or an empty array. There is more information regarding this prop structure below this table.undefined
  • visibleVariations props
Prop nameTypeDescriptionDefault value
namestringProduct variation name.undefined
  • sliderItemsPerPage props
Prop nameTypeDescriptionDefault value
desktopnumberThe number of slides to be displayed on desktop devices when displayMode is set as slider.3
tabletnumberThe number of slides to be displayed on tablet devices when displayMode is set as slider.2
phonenumberThe number of slides to be displayed on phone devices when displayMode is set as slider.1

Customization

To apply CSS customizations to this and other blocks, please see the Using CSS handles for store customization guide.

CSS Handles
frameAround
seeMoreButton
skuSelectorContainer
skuSelectorInternalBox
skuSelectorItemImageValue
skuSelectorItemImage
skuSelectorItemTextValue
skuSelectorItem
skuSelectorNameContainer
skuSelectorNameSeparator
skuSelectorName
skuSelectorOptionsList
skuSelectorSelectorImageValue
skuSelectorSubcontainer
skuSelectorTextContainer
valueWrapper
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps