hideImpossibleCombinations | boolean | When set to true a variation option that leads to a impossible product combination won't be displayed. If false, the variation will be displayed faded (with less opacity), but the user won't be able to select it. | true |
maxItems | number | The maximum number of variation items to be displayed before a See more button be triggered. The See more button will be displayed 2 items before the number set in maxItems. | 10 |
showValueNameForImageVariation | boolean | Use showValueForVariation instead | false |
showValueForVariation | ShowValueForVariation | If it should show the value of the selected variation. The possible values of this prop are the ones defined by ShowValueForVariation | 'none' |
thumbnailImage | string | The value set in the string will define which image will be displayed firts, according to the value in the image's imageLabel. If you pass this prop and no image with this text in the imageLabel can be found, it will show any image of the product. | undefined |
visibleVariations | string[] | If you pass this array it will only display the passed names. If you pass a name that doesn't represent a variation, the block will not show anything. This means that passing an empty array doesn't display any variation | - |
variationsSpacing | number | This prop represents how much of margin-bottom you want to put in all variation blocks. The value is not in px, every value represent a tachyons class. The value numbers are from 0-11 | 7 |
imageHeight | `number | object` | Height of the thumbnail. If you pass an object it will expect two attributes: desktop and mobile. The value of both should be the height of each device |
imageWidth | `number | object` | It works same way as imageHeight |
showVariationsLabels | boolean | If the variation names should be displayed | true |
initialSelection | Enum | Control the user initial selection for available variations when product page is loaded | complete |
showVariationsErrorMessage | boolean | If an error message should be displayed when the BuyButton is clicked on but didn't select an option for each available variation | true |
displayMode | Enum | How the variations will be displayed. It doesn't apply to image variations. Notice that this prop is responsive, so you can specify a value for each breakpoint. | default |
sliderDisplayThreshold | Number | Controls the maximum number of SKUs that should be displayed using 'default' displayMode before using displayMode 'slider'. Notice this prop only takes effect you displayMode is set to slider. | 3 |
sliderArrowSize | Enum | Controls the size (height and width) in pixels of the navigation arrows rendered when displayMode is set to "slider". | 12 |
sliderItemsPerPage | { desktop: Number, tablet: Number, phone: Number } | Controls how many slides should be shown on each type of device when displayMode is set to slider. | {desktop: 3, tablet: 2, phone: 1} |
visibility | Enum | Controls when the SKU selector shows depending on the mumber of items available | always |
