Don't just write the name of the color. Add the color palette into your product options to give your customers a feel of the different colors they can go in for.




If you want to show Colors in options as above, you can use below code.


Steps to install this code.


a) List of Color Codes

http://www.w3schools.com/html/html_colornames.asp


b) Create your color codes and replace the same in the main code below.


function givecolor(s){

if(s=='White')return'#F8F8F8'; 

if(s=='Dark Brown')return'#674846';

if(s=='Black')return'#000000';

if(s=='Straw Yellow')return'#e4d96f';

}


c) Edit your product and add options as "color:Straw Yellow"




d) Use below code and paste it in Settings --> Advanced feature --> Third party Javascript 





<style>
#option1-section p{padding-bottom:5px;}
.add_boxshadow {box-shadow:-5px -5px 3px #888888 !important;} 
/*Selected Option Box size*/
.prodoption ul li{margin-bottom:15px !important;}
.prodoption a {padding:0px}
</style>


<script type="text/javascript">

function changeColor()
{
var elems=$j('a span:contains(color:)');elems.css('border','none');

$j('.stockcheck').hide();
$j.each(elems,function(k,v)
{var e=$j(this);
var cstring = $j.trim(e.html()).substring(6);
var c=givecolor($j.trim(e.html()).substring(6));
e.css('background-color',c);
e.css('padding','15px 25px'); //Color Box size
e.attr('title',$j.trim(e.html()).substring(6));if(e.html().trim() == 'Color:Glow'){e.html('Glow in Dark');}else {e.html('&nbsp;')};if(e.attr('class')!=undefined&&e.attr('class')!=null&&e.attr('class').match('selected')!=null){e.css('box-shadow','-5px -5px 3px #303030');}
$j('.add_boxshadow').removeClass("add_boxshadow");
$j('.selected').addClass("add_boxshadow");
}
);
};


changeColor();

$j(function(){$j("ul.tabs").tabs("div.panes > div")});

$j(function(){$j("#tabs").tabs()});

function clickOption1(id,_3c){$j.ajax({type:"get",url:"findproductcontentbyoption1.action",cache:true,data:"productOptionId="+id,success:function(msg){$j("#product_dyna_cont").html(msg);initSelectBox();if(_3c!=null&&_3c!=undefined&&_3c==1){initSelectBoxCustomArrow("&#9660;")}else{initSelectBoxCustomArrow("&#8897;")}changeColor()}})};

function clickOption2(id,_3d){$j.ajax({type:"get",url:"findproductcontentbyoption2.action",cache:true,data:"productOptionId="+id,success:function(msg){$j("#product_dyna_cont").html(msg);initSelectBox();if(_3d!=null&&_3d!=undefined&&_3d==1){initSelectBoxCustomArrow("&#9660;")}else{initSelectBoxCustomArrow("&#8897")}changeColor()}})};

function givecolor(s){

if(s=='White')return'#F8F8F8';
if(s=='Dark Brown')return'#674846';
if(s=='Black')return'#000000';
if(s=='Straw Yellow')return'#e4d96f';
if(s=='Euro Yellow')return'#e1ad21';
if(s=='Brown Yellow')return'#e5b73b';
if(s=='Brown')return'# 6B2611';
if(s=='Carrot Yellow')return'#ffa343';
if(s=='Vermilion Red')return'#e34234';
if(s=='Orange Red')return'#ff5a36';
if(s=='Fire Red')return'#ce2029';
if(s=='Carmine Red')return'#ff0038';
if(s=='Red')return'#cc0000';
if(s=='Maroon')return'#800000';
if(s=='Almond')return'#faf0be';
if(s=='Cerise Pink')return'#ec3b83';
if(s=='Dark Pink')return'#e75480';
if(s=='Raspberry Pink')return'#e30b5d';
if(s=='Sky Magenta')return'#cf71af';
if(s=='Purple Heart')return'#69359c';
if(s=='Blue violet')return'#8a2be2';
if(s=='Persian Indigo')return'#32127a';
if(s=='Saint Blue')return'#2a52be';
if(s=='Sea Blue')return'#20b2aa';
if(s=='Indigo Blue')return'#23297a';
if(s=='Deep Sky Blue')return'#1e90ff';
if(s=='Celestial Blue')return'#4997d0';
if(s=='Sky Blue')return'#87ceeb';
if(s=='Ulmarine Blue')return'#120a8f';
if(s=='Forest Green')return'#228b22';
if(s=='Bottle Green')return'#006a4e';
if(s=='Moss Green')return'#004225';
if(s=='Ash Grey')return'#b2beb5';
if(s=='Davy Grey')return'#555555';
if(s=='Purple Grey')return'#50404d';
if(s=='Golden Metalic')return'#fcc200';
if(s=='Glow')return'#59ff59';
if(s=='Silver Metalic')return'#c0c0c0'
}


function findOption1List(id,_3e){
$j.ajax({
type:"get",url:"findoption1list.action",data:"productOptionId="+id, 
success:function(msg){
$j("#product_dyna_cont").html(msg);
initSelectBox();
if(_3e!=null&&_3e!=undefined&&_3e==1){
initSelectBoxCustomArrow("&#9660");
}else{
initSelectBoxCustomArrow("&#8897");
}
changeColor();
}
});
}; 

</script>