Skinning Zen Cart: Part 1, The Header

Zen Cart is one of the most popular shopping carts available today, partly because it has an incredible amount of features, and partly because it’s open source.  Unlike a lot of projects, Zen Cart is actually very well documented, but in the form of knowledge base articles, which make it tough for someone getting started to pick up.  Additionally, Zen Cart uses a number of files loaded dynamically to produce the final page, so a visual editor is of little, if any, use when designing a theme for Zen Cart.

Although Zencart is written in PHP and uses MySQL, it runs just fine on Windows XP.  See the bottom of this post for links to installing PHP and MySQL on Windows.

There is a tremendous amount of control over the appearance of Zencart, most of which can be accomplished through the admin interface.  Further control over the design is in CSS files.  Very little editing of the PHP code is necessary for a great deal of customization.  Here, we’ll focus on the header region of the Zencart pages.  Future posts will focus on the other regions of the page.

Basics of Zen Cart Themes/Templates

A lot of your cart’s customization can be accomplished via the control panel or overrides (see below), so it’s best to start with the options available there before you start editing pages.  Zen Cart uses a series of template files to control the layout of your cart’s pages.  The template files are stored in several different folders, depending on what they do.  For major changes in page design, these are the files you want to edit.

Reference links:

If you’re going to create your own Zen Cart theme, you shouldn’t edit the default template files.  Instead, you want to copy an existing theme, or the default pages, and edit the copies.

Reference link:

To control portions of pages, Zen Cart employs a clever override system.  It starts when you add a theme to Zen Cart, and select that theme in the admin tool.  When a page loads, the override system looks first for an override file in a folder with your template’s name.  If it finds one, it uses that file to render your page.  If there isn’t a theme-specific override file, a default file is used.

Reference links:

Finally, Zen Cart relies heavily on CSS for its appearance.  I strongly recommend using Firefox browser and the Firebug add-in for CSS discovery.

Reference Link:

The Default Header

Below is a screenclip of the default header.

Basic Changes with Override Files

Here we’ll look at some significant changes you can make with only basic edits.

At the very top of the default template is a navigation bar.  It contains a link to the home page, a login link, and a search bar.  If the user is logged in, the Log In link is not displayed, but links for the user’s account information and to log out are.  If there are items in the shopping cart, links to the cart and shipping are displayed.

If you would rather not have this bar, you can copy includes\templates\template_default\common\tpl_header.php to the common folder of your theme, and edit the code to remove the lines marked below.  Make sure to keep the lines not marked out.

<!–bof-navigation display–>
<div id=”navMainWrapper”>
<div id=”navMain”>
<ul class=”back”>
<li><?php echo ‘<a href=”‘ . HTTP_SERVER . DIR_WS_CATALOG . ‘”>’; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
<?php if ($_SESSION[‘customer_id’]) { ?>
<li><a href=”<?php echo zen_href_link(FILENAME_LOGOFF, ”, ‘SSL’); ?>”><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
<li><a href=”<?php echo zen_href_link(FILENAME_ACCOUNT, ”, ‘SSL’); ?>”><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
} else {
if (STORE_STATUS == ‘0’) {
<li><a href=”<?php echo zen_href_link(FILENAME_LOGIN, ”, ‘SSL’); ?>”><?php echo HEADER_TITLE_LOGIN; ?></a></li>
<?php } } ?>

<?php if ($_SESSION[‘cart’]->count_contents() != 0) { ?>
<li><a href=”<?php echo zen_href_link(FILENAME_SHOPPING_CART, ”, ‘NONSSL’); ?>”><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
<li><a href=”<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, ”, ‘SSL’); ?>”><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
<?php }?>
<div id=”navMainSearch”><?php require(DIR_WS_MODULES . ‘sideboxes/search_header.php’); ?></div>
<br class=”clearBoth” />
<!–eof-navigation display–>

If you want to keep this navigation bar, you can use CSS to change the colors and fonts.  You can turn the display for the search on and off in the admin tool.  The CSS classes have pretty descriptive names; you can also determine exactly which classes need to be edited by reading the code or viewing the output.

Reference Links:

Moving down the page is the logo and sales message.

Changing the logo is very easy, and is a simple edit to a PHP file, possibly a little CSS, too, if you want to change some positioning.

Reference Link:

Underneath the logo are the category tabs.  The category tabs contains links to the categories in your cart (default data shown below).  There is a sidebar box that shows the same links, too, but navigation at the top of the page is pretty standard.  If you want to turn this off, you can do so in the control panel.  You can also change this to be a doprdown menu with one of several add ons.  The appearance is controlled by several CSS classes.

Reference Links:

Below the category tabs is the EZ Pages links bar.  EZ Pages are one of the nifty features of Zencart–they allow a cart owner to easily add content pages, such as About Us or Privacy policies, through a simple administrative interface.  You can change the look via CSS, or you can turn the bar off entirely.

You specify the pages to link to in the EZ Pages bar under Tools >> EZ-Pages, and turning on pages under the Header column.  You also need to Edit the details for each page (use the edit option to the right of the grid), and set a sort order greater than 0.

If you want to get rid of the EZ Pages bar, just log in to the admin tool and go Configuration >> EZ-Pages Settings, and set the “EZ-Pages Display Status – HeaderBar” to 0.

Reference Links:

Below the EZ-Pages bar and above the content is a random “Home”.  This is the breadcrumb trail, which displays your place in the website, and looks a little odd on the home page.

It makes a little more sense as you visit other pages in your site.  The Home becomes a link, and your current page is the last entry.

Like everything else, you can change the appearance via CSS, or turn it off.  In the latest version (1.3.8 at the time of this post), you have three options in the admin tool: on, off, or off on home page only.  You find these options under Configuration >> Layout Settings >> Define Breadcrumb Status.

Reference Links:

The Finished Product

Below is the finished header, after CSS edits and the horizontal drop down menu added.  So far, so good.

Running Zen Cart on Windows XP

As a proper development practice, you should have a proper development environment separate from your production site.

Reference link:

Although Zen Cart is PHP and MySQL based, you can run it on Windows and IIS.  PHP is very easy to set up on Windows.  The PHP team has done a great job building a Windows friendly installer and documentation–so much so, they dedicate a subsite entirely to running PHP on Windows.  Likewise, the MySQL team has also built Windows a friendly installer and provided simple documentation.

Reference links:

If you need a quick-reference for PHP and MySQL, you might be interested in RefCardz “Free Cheat Sheets for Developers” at  There are PHP and MySQL cards, and new ones being added all the time.  Best advice is to browse the selection.

And, you can edit PHP natively in the great Microsoft Expression Web, with full Intellisense for PHP and CSS.  I highly recommend Expression Web if you’re doing PHP development.

4 thoughts on “Skinning Zen Cart: Part 1, The Header”

  1. seems your comments are mostly overran by spam.
    anyway, all of the photos in this post are busted, thought i’d let you know. 🙂

  2. Thanks for the heads-up. I’ve fixed the images. When I converted my blog, all comments were migrated as approved, so there is some spam to clean up, too.

Comments are closed.