Creating your own Template
Looking to build your own template?
First, before you do that, consider using the Bootstrap4 template, as it has a good modern interface and its colors can be customized directly from the Admin. For more specific customization, its CSS is easy to customize by virtue of using the standards-based Bootstrap framework. It is already mobile-friendly, and has a clean “look” to it.
To get ideas about building your own template, take a look at the other templates available for Zen Cart.Contributed responsive templates which you can use with your Zen Cart may be found in the Responsive Templates sections in the Zen Cart Plugins Directory.
For reference, you can also view and Legacy Templates, but bear in mind that you will want your final template to be responsive (to look good on mobile devices).
Scaffolding Your Own Template
This is an outline of the steps you should follow:
make a new folder, perhaps something like
includes/templates/mary. This is the working area for your own custom template.
make the following subfolders in there:
common/ css/ images/ jscript/ templates/
copy the existing files from the
responsive_classic/imagesinto the appropriate folders in your new working area. Also copy the
responsive_class/jscript/jscript_framework.phpfile to your new
responsive_classic/commonfolder. You’ll want to edit this file to incorporate your custom page-header. This file governs the appearance of the top of all of your pages.
responsive_classic/commonfolder. You can edit the footer area to appear as you like.
While working on #4 and #5 above, you can also modify the
css/stylesheet.cssfile in your working area, to set the styles for your template. You can copy your existing stylesheet into the
cssfolder, making sure it’s named
styles_mine.css). All files in this folder are loaded by your store in alphabetical order, and cascading rules will determine the combination of effects in that order.
The colors for the main area of your site and the sideboxes, etc can be controlled in your stylesheets.
If you need a very different page-layout from the default, you can copy
responsive_classic/commonfolder to your
commonfolder, and alter it. This file builds your pages, starting with the header, then the left column of sideboxes, the middle “content” area of the site, then the right column of sideboxes, followed finally by the footer. Thus, by styling this page, you can control the appearance of the whole site. In many cases, you don’t need to touch it though, as much of the control is in the stylesheet already.
Finally, create the
template_info.phpfile in your working template folder. Instructions on creating this file and activating your template can be found in the template_info FAQ.