Add color picker in Magento Admin Configuration Page

Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. You may think this as a big task but believe me this is as simple as anything. Few lines of XML code will do it for you. Here are the exact steps to do this.

I hope you know how to add custom configuration options in Magento. If not, read this tutorial: Creating Custom Configuration Options in Magento Admin.
Namespace: Color
Module name: Picker

1. In adminhtml/default/default/layout directory, create the layout XML file for your module. Lets name it as picker.xml. Write following content in picker.xml:


<?xml version="1.0"?>
<layout version="0.1.1">
<adminhtml_system_config_edit>
<reference name="head">
<action method="addJs"><file>jscolor/jscolor.js</file></action>
</reference>
</adminhtml_system_config_edit>
</layout>

2. Declare the layout file in your module’s config.xml as:


<config>
...
<adminhtml>
<layout>
<updates>
<basket>
<file>picker.xml</file>
</basket>
</updates>
</layout>
</adminhtml>
...
</config>

3. In your module’s system.xml, add the color picker field as:


<config>
...
<sections>
<myconfig module="picker" translate="label">
...
<groups>
<my_group translate="label">
...
<my_color>
<label>Background Color</label>
<frontend_type>text</frontend_type>
<validate>color</validate> <!-- This is important -->
<sort_order>1</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
<comment>Specify the background color.</comment>
</my_color>
<my_group>
</groups>
<myconfig>
</sections>
...
</config>

This is it and you are done.

Written by Arvind Bhardwaj

Arvind is a Magento and WordPress expert with more than 6 years of industry wide experience.

Website: http://www.webspeaks.in/

6 thoughts on “Add color picker in Magento Admin Configuration Page

  1. Before following this I was thinking this as a tough part but now realized rather than to listen to others should look for a solution whether it is easy or hard.

  2. I found that post while searching for color swatches options for configurable products on the front end. I will definitely try your tutorial as it’s something interesting but I’ve never thought about it before.
    As for the color swatches I was looking for, I found that option http://amasty.com/color-swatches-pro.html

  3. Hi, This blog is work but my problem is when i am click on color picker that time Image is not displayed.
    So How to display that image

Comments are closed.