A list of selectable swatches used to show a product color variants.
All components are based on CodyFrame.
This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.
The Color Swatches component is used to show different color variations of a product.
The default version is a
<option> has a
data-style attribute equal to the custom style you want to apply to the swatch (e.g.,
<option value="black" data-style="background-color: #000;">Black</option>
<!-- other options here -->
When the user selects a new color swatch, the native
<select> element is updated with the new selection and a
change event is emitted.
With the --link variation, each swatch links to a different page where the product variation is shown.