Step 1:  Go to the Edit Product page of dashboard and add options as "color:Straw Yellow" or "color:Red"

Note : It is very important that options are added in the same format as shown in GIF image below.

color palette new 1.gif



Step 2: You can visit http://www.w3schools.com/html/html_colornames.asp to get the color hex codes.


Step 3: Copy the below code in notepad and edit it by replacing the color name and corresponding color hex codes

Note: The yellow part in the code is the color hex code. 


 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';

}


Above code is for 4 colors but you can modify the above code for any number of colors. For example for 6 different colors the code can be as follows:

  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=='Red')return'#FF0000';

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

}


Step 4: Copy the below code in notepad. And make changes as shown in the Gif image.

Note: Line number 37 to 43 has to be replaced by the code created in step 3. And there are no changes to be made in rest of the code. 






<style>
#option1-section p{padding-bottom:5px;}
.add_boxshadow {box-shadow:-5px -5px 3px #888888 !important; padding:25px 30px !important;} 
/*Selected Option Box size*/
.l5_selectOptions li{margin:15px !important;}
</style>
 
<script type="text/javascript">
 
function changeColor()
{
var elems=$j('a:contains(color:)');elems.css('border','none');
 
$j.each(elems,function(k,v)
{var e=$j(this);
 
var cstring = $j.trim(e.html()).substring(6);
var c = givecolor(cstring);
 
e.css('background-color',c);
e.css('padding','20px 30px'); //Color Box size
e.attr('title',cstring);
e.html('&nbsp;');
}
);
$j('.add_boxshadow').removeClass("add_boxshadow");
$j('.currentOption').addClass("add_boxshadow");
};
 
changeColor();
 
$j(function(){$j("ul.tabs").tabs("div.panes > div")});
 
$j(function(){$j("#tabs").tabs()});
 
 
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';
}
 
 
function findOption1List(id,_3e){
$j.ajax({
type:"get",url:"findoption1list.action",data:"productOptionId="+id,
beforeSend:function(){$j('#product_dyna_cont').append('<div id="buyProductOverlay" style="height: 50%; position: absolute; display: block; background-color: rgba(10, 10, 10, 0.2); border-radius: 10px 10px 10px 10px; top: 60px; width: 28%;"><div style="background:url(\'http://www.jyotinettrading.com//images/loading1.gif\') no-repeat scroll center bottom #FFFFFF;border-radius: 10px 10px 10px 10px;height: 55px;margin-left: 94px;margin-top: 58px;text-align: center;width: 100px;">LOADING</div></div>')},
  
success:function(msg){
$j("#product_dyna_cont").html(msg);
initSelectBox();
if(_3e!=null&&_3e!=undefined&&_3e==1){
initSelectBoxCustomArrow("&#9660");
}else{
initSelectBoxCustomArrow("&#8897");
}
changeColor();
}
});
}; 
 
 
function getProdductByOption1(optionId) {
        $j.ajax({
            type:       "post",
            url:        "findproductjsoncontentbyoption1.html",
            data:       "productOptionId="+optionId,
            success:    function(responseJSON) {
                var obj = $j.parseJSON(responseJSON);
                if(obj.success){
                    var option2Html = '';
                    var maxQty = 0;
                    var applicablePrice = '';
                    var discountPrice = '';
                    var discountPercent = '';
                    var price = obj.price;
                    applicablePrice = obj.applicablePrice;
                    retailPrice = obj.retailPrice;
                    discountPercent = obj.discountPercent;
                    maxQty = obj.maxQty;
                    var option2list = obj.options;
                    var unitNumber = obj.unitNumber;
                    var unitName = obj.unitName;
                    var selectedOptionId = obj.selectedOptionId;
                    //console.log(selectedOptionId)
                    jQuery('#product_option_id').val(selectedOptionId);
                    //update product unit
                    updateProductUnit(unitNumber, unitName, maxQty) ;
                    //populating json data for price
                    populatePriceSection(applicablePrice, retailPrice, discountPercent, maxQty, price);
                    if(option2list != null && option2list.length > 0 ){
                        var selectedId = option2list['0'].id;
                    }
                    for (var i in option2list)
                    {
                        var opt2Name = option2list[i].name;
                        var opt2Id = option2list[i].id;
                        var maxQty = option2list[i].maxQty;
                        var selectClass = (selectedId == opt2Id ? 'currentOption':'');
                        var title = "Not in stock"; var hrefMethod = 'javascript:void(0);';
                        if(maxQty != 0) {
                            title = '';
                            hrefMethod = 'javascript:getProdductByOption2('+opt2Id+');';
                        }else {
                            selectClass = " disable-option";
                        }
                        option2Html = option2Html + ('<li><a class="mainmenutogglebg mainmenutogglebg_color '+selectClass+'" title="'+title+'" href="'+hrefMethod+'" qty="'+maxQty+'">'+opt2Name+'</a></li>');
                    }
                    if(option2Html != null && option2Html.length > 0) {
                        option2Html = '<p class="txt16 strong strong mt10 mb5">Select</p> <ul class="l5_selectOptions mb10"> '+option2Html+' </ul>'
                    }
                    jQuery('#option2-section').html(option2Html);
                     
                    jQuery("#option2-section .l5_selectOptions li a").click(function(){
                        if(jQuery(this).attr('qty') != 0) {
                          jQuery("#option2-section .l5_selectOptions li a").removeClass("currentOption");
                          jQuery(this).addClass("currentOption");
                        }
                    });
                    changeColor();
                }
             
            },
            error: function(jqXHR, exception){
                alert(jqXHR.getResponseHeader("ajax-server-side-error"));
            }
        }); 
    }
     
     
    function getProdductByOption2(optionId) {
        $j.ajax({
            type:       "post",
            url:        "findproductjsoncontentbyoption2.html",
            data:       "productOptionId="+optionId,
            success:    function(responseJSON) {
                var obj = $j.parseJSON(responseJSON);
                if(obj.success){
                    var priceHtml = '';
                    var stock = "";
                    var applicablePrice = '';
                    var discountPrice = '';
                    var discountPercent = '';
                    var maxQty = 0;
                    var price='';
                    maxQty = obj.maxQty;
                    applicablePrice = obj.applicablePrice;
                    retailPrice = obj.retailPrice;
                    discountPercent = obj.discountPercent;
                    var unitNumber = obj.unitNumber;
                    var unitName = obj.unitName;
                    var selectedOptionId = obj.selectedOptionId;
                    //console.log(selectedOptionId)
                    jQuery('#product_option_id').val(selectedOptionId);
                    //update product unit
                    updateProductUnit(unitNumber, unitName, maxQty) ;
                    //populating json data for price
                    populatePriceSection(applicablePrice, retailPrice, discountPercent, maxQty,price);
                    changeColor();
                }
            },
            error: function(jqXHR, exception){
                alert(jqXHR.getResponseHeader("ajax-server-side-error"));
            }
        }); 
    }
 
</script> 

 


Step 5: After your are done with editing the code, you can copy the whole code from notepad and paste it in 

Zepo dashboard>>settings>>advanced features>> third party Javascript code box.




The result will be as below.