How to add a color picker in product edit form in Magento 2?

How to add a color picker in product edit form in Magento 2?

How to add a Color picker in product edit form in Magento 2

It is true that when it comes to building an eCommerce store, Magento would be the first and only choice due to its ability to customize in order to meet every requirement of store owners. Sometimes you want to play with the variety of colors and for that, you need to add color picker in Magento 2 System configuration.

At first attempt, it may seem a big task and difficult to achieve however it is as easy as anything. Below are the exact steps to do this:

1. Create Attribute

Create a product attribute for Color with the data given below:

attribute code: my_color

Color picker in form Magento2

2. Create pickcolors.js, color.html, di.xml files

First of all, we will be creating a Module under KiwiCommerce directory named as “Attributes”.

Create pickcolors.js in your module at the path given below:

app/code/KiwiCommerce/Attributes/view/base/web/js/form/element/pickcolors.js

Create color.html in your module at the path given below add the following code:

app/code/KiwiCommerce/Attributes/view/base/web/template/form/element/color.html

Create di.xml in your module at the path given below add the following code:

app/code/KiwiCommerce/Attributes/etc/adminhtml/di.xml

3. Create Pool Modifier Class – Style.php

Now, create Pool Modifier class in your module at the path given below:

app/code/KiwiCommerce/Attributes/Ui/Modifier/Product/Style.php

Woohoo, now clear the cache and the result will be displayed the same as shown in the image below:

Product edit page:

Magento2 color picker in form

If Color is one of the required attributes then you will see an error message while saving the configuration:

Color picker attribute magento2

This is it and you can even customize and use this code to place color picker anywhere in Magento. Feel free to reach us if you find any issues, errors while implementing the code. Colorful Magento! 🙂

No Comments

Leave a Reply

Your email address will not be published. Required fields are marked *