I would like to add a custom colour picker to an attribute that isn't a swatch colour. I have followed this tutorial for my attribute 'hue' and it is not working:


The swatch box shows but if I click on it then I get no pop up colour picker.

There is no error in the console or signs that anything is missing.

2 Answers 2


There are 2 mistakes in the color.html which I have found while following the link https://kiwicommerce.co.uk/blog/how-to-add-a-color-picker-in-product-edit-form-in-magento-2/

  1. Call initColorPicker() in knockout afterRender binding
  2. Put data-role="color-picker" on the div element

Below is the updated code for the color.html file

<div class="swatches-visual-col col-default" data-bind="afterRender: initColorPicker()">
 <div class="swatch_window" style="background: #000000"
    style: {'background-color': value},
    'aria-describedby': noticeId,
    id: uid, disabled: disabled,
    attr: {title: placeholder},
    hasFocus: focused" data-role="color-picker">

Putting it here so may be it can help someone.


you have to initialize the color picker after the component has loaded, you can do it by calling knockout afterRender binding


Hope it helps someone :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.