Zen Skins

Look and Feel

The look and feel of a Zen Cart website is set up in several ways. Colors, fonts, images, buttons, and fluidity styles are set up in the template files. By removing this aspect of the website from the functionality of the web site you can easily and quickly change the look and feel without effecting the functionality of your cart. Zen cart can function as your entire website, or just as the shopping cart portion of your website.

Another major influence on how your looks and feels is your choice of menus and block usage. See the Layout elements section below to see how you can divide your webpages. Which blocks you choose to use are independent of your template.

Finally there are a number of PHP files that you can edit to change key elements of the home page, including the TagLine, the congradulations message, the welcome message, and the front page content paragraph.

Loading a new template

There are many public domain templates available for Zen Cart. If you go to http://www.zen-cart.com and select "Free Software Add-ons" you'll find "Template Packages" which you can peruse and download. The templates usually come packaged as a Zip file. When you've unpacked them you may see several different directory structures. Some will have a top level directory with installation instructions, and some may be just the template directory ready to be copied into your installation.

Look for a subdirectory named templates and their will be a directory below that containing all the files and directories needed for this template.

Templates are copies to your_zencart_install_directory/includes/templates. A template will contain a file named template_info.php, which describes the template, name, author, thumbnail file, and brief description. You'll also find some or all of the following directories: buttons, common, css, images, sideboxes, and templates.

Once you've copied the template to your templates directory you can select it from the admin panel. Go to Tools --> Template Selection. Then press the Edit button. It will give you a pull down menu with all available templates. If you don't find a template you've copied over check to be sure you've copied the correct subdirectory, the one containing template_info.php. If you have then check your file permissions. The directory must be world readable.

Probably the easiest way to get started developing Zen Cart templates is to look at a few and copy one to modify it's various elements. The classic template, which comes with your Zen Cart installation is a fairly complete template to start with.

Layout elements for main ZenCart pages

Header The Header section contains navigation bar, Header main bar (where your logo and site name will be located), the Categories tab menu, where your top level categories are found, and the EZ-pages header bar. EZ-pages are for additional web content, like newsletters, informative articles, press releases, or anything else that isn't strictly part of the catalog. If you don't have any EZ-pages and don't want a menu bar to appear in header go to Configuration --> EZ-pages settings and set the EZ-Pages Display status HeaderBar to 0. To turn off the Categories tab menu, Configuration --> Layout Settings and set Categories Menu Tab to 0. You may want to change or remove the TagLine. This will require editing a PHP file. Left/Right Side boxes are tools that appear in the left or right column, such as the Categories side box which provides a way of browsing your catalog, or Currencies side box which allows your products to be priced in a particular currency. Center The Center area is used to display a view of your products (or EZ-Pages articles).

Related Articles

Getting started with Zen Cart

This article is under development

Please check back over time to see where we're at with this information.