Customizing Zen Cart, Part 1

One of our more recent Site Application additions has been Zen Cart. This e-commerce solution has many robust features and this article will give some detailed information, giving you the ability to modify the cart with your own look and feel.

The first thing you might want to do to your new store is to modify the CSS to provide the “feel” you are looking for. The templates are located in zencart/includes/templates/. One thing that is of special interest is that Zen Cart has two templates it starts by default. There is the classic template and there is the template_default template. Zen Cart will use the template_default template for most of its features, but any changes to the classic template will override the template_default template. The template_default will render the default CSS and basically is the configuration Zen Cart will have if there were no template installed. For the purposes of this post, we’ll talk about making changes to the classic template as it is in place after the installation from Site Manager. The classic template can be found in zencart/includes/templates/classic/css/.. You want to modify the file called stylesheet.css.
Common things I often asked are how colors, widths, heights, and images are changed. The first thing I will start with is the overall color scheme of your store. Your store will look like this when it is first loaded.

Color Schemes

Many ask how to change the green color scheme. To do this, we have to modify the CSS file located in zencart/includes/templates/classic/css/ called stylesheet.css. The green headers are actually small gif images that are referenced in the CSS file. They can be deleted or changed. I have highlighted the specific text in my example below.
#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #abbbd3;
background-image: url(../images/tile_back.gif);
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

In my example below you can see that the reference to the image has been removed and I have changed the background color to blue.

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
margin: 0em;
background-color: #000CFF;
padding: 0.5em 0.2em;
font-weight: bold;
color: #ffffff;
height: 1%;
}

The image is referenced in four other tags throughout the CSS file. To completely change this look, you will need to remove or possibly change the reference. The tags that need to be changed are listed below. Simply look for the exact tags in the file and remove the image reference.

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
#navEZPagesTop {
.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
.productListing-rowheading {

It would probably be a good time to save your changes and take a look at the impact you have had on Zen Cart. Save your work and take a look at your cart in your browser. For those of you falling asleep at this point, you may need to hit refresh in your browser. Now, you may notice some throwbacks to the green theme at the bottom of each element in the browser. You can change this heavy green line by modifying the CSS file on the lines outlined below.

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #9a9a9a;
border-bottom: 5px solid #336633;
margin-top: 1.5em;
}

If you want to make the width the same as the rest of the lines and change the color of the borders to match your header, you would set to it something like this:

.leftBoxContainer, .rightBoxContainer {
margin: 0em;
border: 1px solid #000CFF;
margin-top: 1.5em;
}

Now the store should look something like this:

Read Customizing Zen Cart Part 2 by clicking here.
—————————–
Would you like to perform the above (or more) on your site, but not comfortable with the code? WestHost can help, just fill out a request here.