Modify the CSS In Your BigCommerce Template In Under 30 Seconds

Since we do not have an easy way to customize the store, editing BigCommerce's templates is the only way to get a custom design. If you are having a hard time finding how to change the color of a link, a product price or a background you can use the CSS generator below.

How does it work? Simply check the boxes associated with the page elements you want to change. A white circle will appear on the right side; click on it and you'll be able to choose a color for the current element.

The color palette window contains the following:

• close button which can be clicked to close the window
• preview box used to show the active color
• copy button used to copy a color in case you decide to use it for another element
• paste button used to paste the copied color

So, let's present a scenario: you want to change the prices in the right column. Check the appropriate box and click on the white circle on the right. The color palette will open and you will have the chance to choose a color; by hovering over the colors, the preview box will show you a detail of the current color.

By clicking on any of them, the palette will close. Now, you can copy the color selected by opening again the palette and clicking copy. If you want to assign that color to another page element, just open its associated palette and click paste. When everything is ready, click on Generate CSS code.
Once generated, the code will have to be placed in [color].css template file.

As you can see with the tool from below you can become a master of customizing your BigCommerce store. Of course, there are other things that you might want to change but this is a great start. If you have any improvements, or would like to say thanks just comment below!

<link href="http://www.springmerchant.com/media/static/css/colorscss.css" media="all" type="text/css" rel="stylesheet" />

<div id="Header">
    <div class='left'>
        Header
    </div>
</div>
<div id="PagesMenu">
    <div class='left'>
        Pages Menu
    </div>
    <div class='right'>
        <span>
            <input type="checkbox" id="2pmb" onclick="clicked('pmb')"/> Background Color
            <input type="text" class="hidden" id="1pmb"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2pml" onclick="clicked('pml')"/> Links Color
            <input type="text" class="hidden" id="1pml"/>
        </span>
    </div>
</div>
<div id="Column1">
    <div class='left'>
        Left Side&nbsp;&nbsp;&nbsp;
    </div>
    <div class='left2'>
        <span>
            <input type="checkbox" id="2lsb" onclick="clicked('lsb')"/> Background Color
            <input type="text" class="hidden" id="1lsb"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2lsh" onclick="clicked('lsh')"/> Headings Color
            <input type="text" class="hidden" id="1lsh"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2lsp" onclick="clicked('lsp')"/> Price Color
            <input type="text" class="hidden" id="1lsp"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2lsl" onclick="clicked('lsl')"/> Links Color
            <input type="text" class="hidden" id="1lsl"/>
        </span>
    </div>
</div>
<div id="Column2">
    <div class='left'>
        <center>Middle Column</center>
    </div><br/><br/><br/>       
    <div class="right">
        <span>
            <input type="checkbox" id="2mcba" onclick="clicked('mcba')"/> Active Category (breadcrumb)
            <input type="text" class="hidden" id="1mcba"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2mcbi" onclick="clicked('mcbi')"/> Inactive Category (breadcrumb)
            <input type="text" class="hidden" id="1mcbi"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2mcb" onclick="clicked('mcb')"/> Background Color
            <input type="text" class="hidden" id="1mcb"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2mcp" onclick="clicked('mcp')"/> Price Color
            <input type="text" class="hidden" id="1mcp"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2mcpb" onclick="clicked('mcpb')"/> Product Box Color
            <input type="text" class="hidden" id="1mcpb"/>
        </span>
    </div>
</div>
<div id="Column3">
    <div class='left'>
        Right Side
    </div>
    <div class='left2'>
        <span>
            <input type="checkbox" id="2rsb" onclick="clicked('rsb')"/> Background Color
            <input type="text" class="hidden" id="1rsb"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2rsh" onclick="clicked('rsh')"/> Headings Color
            <input type="text" class="hidden" id="1rsh"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2rsp" onclick="clicked('rsp')"/> Price Color
            <input type="text" class="hidden" id="1rsp"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2rsl" onclick="clicked('rsl')"/> Links Color
            <input type="text" class="hidden" id="1rsl"/>
        </span>
    </div>
</div>
<br class="Clear" />
<div id="Footer">
    <div class='left'>
        Footer
    </div>
    <div class='right' id='margintop'>
        <span>
            <input type="checkbox" id="2fb" onclick="clicked('fb')"/> Background Color
            <input type="text" class="hidden" id="1fb"/>
        </span><br/>
        <span>
            <input type="checkbox" id="2fl" onclick="clicked('fl')"/> Links Color
            <input type="text" class="hidden" id="1fl"/>
        </span>
    </div>
</div><br/>
<span id='generate' class='generate' style='margin-left: 587px'>Generate CSS code</span><span id='refresh' class='generate' style="display:none; margin-left: 670px;">Refresh</span>

<!-- test -->

/---------- begin of CSS code ----------/

<pre id="hds" style='color:#000000;background:#ffffff;'>
<span style='color:#696969; '>/*---------- begin of CSS code ----------*/</span>
<span><span style='color:#808030; '>#</span>LayoutColumn1 <span style='color:#800080; '>{</span>
<span style='color:#bb7977; font-weight:bold; '>background-color</span><span style='color:#808030; '>:</span> <span style='color:#008000; ' id='5lsb'>000000</span> <span style='color:#800000; font-weight:bold; '>!important</span><span style='color:#800080; '>;</span>

} #LayoutColumn1 h2 { color: 000000 !important; } #LayoutColumn1 li a { color: 000000 !important; } #LayoutColumn1 .ProductPrice, #LayoutColumn1 .ProductList em { color: 000000 !important; } #LayoutColumn3 { background-color: 000000 !important; } #LayoutColumn3 h2 { color: 000000 !important; } #LayoutColumn3 li a { color: 000000 !important; } #LayoutColumn3 .ProductPrice, #LayoutColumn3 .ProductList em { color: 000000 !important; } #Menu { background-color: 000000 !important; } #Menu ul li a { color: 000000 !important; } #CategoryBreadcrumb li { color: 000000 !important; } #CategoryBreadcrumb li a { color: 000000 !important; } #LayoutColumn2 { background-color: 000000 !important; } #LayoutColumn2 .ProductList li { background-color: 000000; } #LayoutColumn2 .ProductPrice, #LayoutColumn2 .ProductList em { color: 000000 !important; } #TopMenu { background-color: 000000 !important; } #TopMenu li a { color: 000000 !important; } #Footer { background-color: 000000 !important; } #Footer li a { color: 000000 !important; } /---------- end of CSS code ----------/