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.

Where the template files live

A template primarily lives in your_zen_install_directory/includes/templates/CUSTOM, where CUSTOM is the template name. However, there are a number of text related files that will be found in your_zen_install_directory/includes/languages/english/CUSTOM. Our convention will be to refer to the files that control color, fonts, etc as template files, and the files that contain text messages, etc as language files.

Other configuration influences

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 paged, including the TagLine, the congratulations message, and the welcome message. These are located in the languages section of your installation.

The Front Page content is managed through the Admin panel. Select Tools -> Define Pages Editor, then select define_main_page.php as the file to edit.

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).

EZ-Pages

An EZ-Page is a quick way to get an article or URL to appear in the Zen Cart website. From your admin panel select Tools --> EZ-Pages to see your list of defined pages. Pressing the E in the green dot will bring up an editor for the EZ-Page. You have three options for constructing a page. The first option is to type into the HTML Content box. Before using this field you should decide if you want to type raw HTML into this box, or if you'd like a simple HTML editor. At the right top of the EZ-Pages panel you'll find a pulldown menu next to "Text Editor". You can select "Plain Text" or "HTMLarea". Plain text allows HTML commands, and HTMLarea will provide you with a simple HTML editor.

The second option is to construct a link that points to content within the Zen Cart website, such as a pointer to a catalog category. You capture this information by surfing to that catalog category and copying the part of the URL that appears after the Zen Cart front page. For example: if your website is at http://www.mydomain.com, and your Zen Cart front page is at http://www.mydomain.com/cart/, and the catalog category your want to link to is at http://www.mydomain.com/cart/index.php?main_page=index&cPath=67, then you will copy index.php?main_page=index&cPath=67 to the Internal Link URL, below the HTML Content box.

The third option is creating an external link, such as to CNN, i.e. http://www.cnn.com. In this case you copy the entire URL to the External Link URL, below the HTML Content box.

NOTE: You can only use one of these three options for any given EZ-Page. If you have a URL specified in the Internal URL Link field and you add HTML content you'll see an error message when you try to update the page.

Footer

Footer Navi Bar

Entries found in the bottom Navi bar are controlled from the EZ-Pages tools. Go to the Admin Panel, select Tools -> EZ-Pages. This will give you a list of EZ-Pages and show you where links to them will appear. Any items with a green dot in the Footer column will appear in your footer navi bar. Click on the dot to toggle from green to red, or vice versa.

Footer Banner

Removing the Banner that follows the footer by default. Login to your admin panel. Configuration --> Layout Settings Be sure each of Banner Display Groups - Footer Position 1, 2 and 3 are set to have no value. By default Banner Display Groups - Footer Position 3 is probably set to Wide-Banners.

Show/Hide Remote IP address

If you don't want the remote host's IP address to appear in the footer, from the admin panel select Configuration --> Layout Settings and change "Footer - Show IP Address Status" from 1 to 0.

The Overrides System

If you plan on doing many custom modifications and being able to upgrade without difficulty it is a good idea to understand the Overrides System. We have eluded to it above when mentioning directories named .../CUSTOM. There are quite a few that can be created allowing you to do many custom things with Zen Cart. [http://tutorials.zen-cart.com/index.php?article=36 this article] gives you some information on the template overrides.

Related Articles & Other Resources

Getting started with Zen Cart

Quick and Dirty where to find things with Zen Cart

Zen Cart Forum Questions and Answers from the Zen Cart Community

Tutorials and FAQs

Zen Cart Wiki Lots of information on theory and practice of setting up and using Zen Cart.