Color Swatches

A list of selectable swatches used to show a product color variants.

How to

The Color Swatches component is used to show different color variations of a product.

The default version is a <select> element that is replaced by custom color swatches using JavaScript.

Each <option> has a data-style attribute equal to the custom style you want to apply to the swatch (e.g., background-color value):

<select class="js-color-swatches__select">
  <option value="black" data-style="background-color: #000;">Black</option>
  <!-- other options here -->
</select>

You can also pass a list of comma-separated custom data attributes that you want to add to the color swatch using the data-custom-attr attribute:

<select class="js-color-swatches__select">
  <option value="black" data-custom-attr="data-one: valueOne, data-two: valueTwo" data-style="background-color: #000;">Black</option>
  <!-- other options here -->
</select>

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.

Categories

• Ecommerce > Form Elements
• Forms > Form Elements
• Controls

Bug report & feedback

Component Github page ↗