🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Color Swatches

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

Copy: View demo

Dependencies

All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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.

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us