Customisation - Templates - Create

From Zen Cart(tm) Wiki
Jump to: navigation, search


Creating a new template

Also see the FAQ entry How do I add/create a new template set?.


Let's call this template "my_own_template".


  1. Make a new directory: includes/templates/my_own_template
  2. Copy the file includes/templates/template_default/template_info.php to includes/templates/my_own_template/template_info.php and edit it so it looks like this, except with your own name etc.:

<?php
$template_name = 'My own template';
$template_version = 'Version 1.0';
$template_author = '<enter your name here>';
$template_description = 'This is my own template, created for my site at www.example.com';
$template_screenshot = '';
?>
  1. Copy the css folder and files from includes/templates/template_default/css/ to includes/templates/my_own_template/css
  2. Create some additional folders in includes/templates/my_own_template since when you build your own customizations, you'll be adding them in these folders after copying related "masters" from the template_default folder when you need to make a change to a particular file:
    • common
    • images
    • sideboxes
    • templates
  3. Go to Admin - Tools - Template Selection and click the Edit button. Then select your new template from the drop-down menu and click the Update button.
  4. Go to Admin - Tools - Layout Boxes Controller and click the Reset button.


Now be sure that you understand the template system before you edit any files.


For Zen Cart™ Version 1.3.0+

Since Version 1.3.+ of Zen Cart™ has moved away from its old table based layout to a CSS based layout, you should base your own template on template_default and not Classic.

Info.png NOTE:
As of version 1.3.5, Classic is now a CSS based layout.

CAPITALIZED words refer to a folder or language that you choose. We use CUSTOM for your template and ENGLISH for your language by default. Change these if needed.

Open includes/templates/ and create a new folder. You can call it anything you like, though it is best not to make it too long and to use underscores instead of spaces. We will call it CUSTOM here, so everywhere we write CUSTOM from now on, you should replace it with your own folder name.

Create an empty folder inside your new template directory and call it images so you should have includes/templates/CUSTOM/images/. Next, copy the includes/templates/template_default/css directory and place the folder and its files in your new includes/templates/CUSTOM/ folder.

You can also create the following empty folders inside your new template directory:

/common
/sideboxes
/templates

Then you copy the file called includes/templates/template_default/template_info.php, and put it inside includes/templates/CUSTOM/. Next, open includes/templates/CUSTOM/template_info.php in your text editor. Change the information below between each set of single quotes to suit your new template. Remember to keep the single quotes. Your template name does not need to be identical to your folder name, and you can use spaces to make it read well, but it is best to make them similar. Leave the space between the quotes for the template screenshot field empty for now, since you don’t have one yet.

<?php
$template_name = 'CUSTOM';
$template_version = 'Version 1.0';
$template_author = '<enter your name here>';
$template_description = 'This is my own template, created for my site at www.example.com';
$template_screenshot = '';
?>

When you've finished, your new file structure should look as follows:

includes
   /templates
      /CUSTOM
         /common
         /css
            stylesheet.css
         /images
         /sideboxes
         /templates
       template_info.php

Upload your /CUSTOM folder to your server. Open your Admin panel and navigate to tools -> template selection. Click the Edit button, then choose CUSTOM from the dropdown menu and click the Update button. Now, navigate to tools -> layout boxes controller and at the bottom of the page click the Reset button.

Your new template is now enabled and ready for you to customize.


Copying a template

In order to copy a template, you need to copy all the template's directories, ie. all directories that are named the same as the template you wish to copy.


You also need to copy the sidebox settings from the table layout_boxes; this can be done using the addon Import/export layout settings.


See how to customize your new template.


Links