enter image description here

Please tell me how you can add a color picker as an attribute to the product form. I tried several options from the Internet, well, they did not work.

1 Answer 1


use this library and load that library in the product details page like


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
         <script src="Vendor_YourModule::js/jscolor.min.js"/>

and on created attribute add frontend class like

biztech_color_picker jscolor {width:243, height:150, position:'buttom', borderColor:'#FFF', insetColor:'#FFF', backgroundColor:'#514943',hash:true}

this will convert it to the color picker

If this does not work you can simply modify the product_edit form using

ModifyMeta() method which is responsible to provide the ui data for building a form

you can replace your attribute with the ui colorpicker

create a file in


<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="Magento\Catalog\Ui\DataProvider\Product\Form\Modifier\Pool">
            <argument name="modifiers" xsi:type="array">
                <item name="addColorPicker" xsi:type="array">
                    <item name="class" xsi:type="string">Vendor\YourModule\Ui\DataProvider\Product\Form\Modifier\ColorConfig</item>
                    <item name="sortOrder" xsi:type="number">100</item>

Now create class ColorPickerConfig.php add method you can refer from Here and replace your attribute config with the colorPicker of UI config.

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.