How do I customise ezimerchant Professional themes / templates?
Some of our most successful customers have implemented a custom theme design with ezimerchant Professional. Usually they themselves are fluent in HTML or have enlisted the services of a professional web designer. If you are experienced in HTML coding and have a high level of knowledge of the Windows operating system and the Internet the below aims to provide you with as much information as possible about the ezimerchant Professional themes and how ezimerchant Professional uses them to generate your web site.
Before you start to modify an ezimerchant Professional theme you might like to take a look at other web sites that have edited ezimerchant Professional themes.
View our showcasePart 1 - Lets look at what the theme files are, how and where they are stored and what ezimerchant Professional does with them
Part 1 is broken down into several Sections:
Section 1 - Where the themes are stored
Section 2 - What files make up an ezimerchant Professional theme
Section 3 - What other files are in the theme directory and what do they do
Section 4 - Which html files should I be editing
Section 5 - What happens to the theme html files
Section 1. Where are the themes stored?
The ezimerchant Professional themes are stored in the following location: c:\program files\ezimercpro\themes
In the above directory you will find over a hundred folders. Each of these folders contains a single ezimerchant Professional theme.
Take a look in one of the theme folders, you will notice that there is a sub folder called 'Singlepage'. Inside the 'SinglePage' folder you will find all the theme files.
Section 2. What files make up an ezimerchant Professional theme?
There are five main HTML files that make up an ezimerchant Professional theme:
 |
categorypage.htm | This page is the theme layout for all the category pages on your web site. |
|
content.htm | This page is the theme layout for all the additional pages on your website such as 'Home Page', 'About Us' page etc. |
|
productpage.htm | This page is the theme layout for all the detailed product description pages on your web site. |
|
search.htm | This page is the theme layout for the 'Search page' on your web site. |
|
viewcart.htm | This page is the theme layout for the 'View Cart' page on your web site. |
There is also an images subdirectory which contains all of the images that are used in the theme. If when editing the theme files you wish to add an image, you should copy your image into the images directory and then insert it into the html theme file.
Section 3. What other files are in the theme directory and what do they do?
You may also find the following files in the theme directory:
|
modcategorypage.htm | This is a temporary file. It is a copy of the categorypage.htm file |
|
modcontent.htm | This is a temporary file. It is a copy of the content.htm file |
|
modproductpage.htm | This is a temporary file. It is a copy of the productpage.htm file |
|
modsearch.htm | This is a temporary file. It is a copy of the search.htm file |
|
modviewcart.htm | This is a temporary file. It is a copy of the viewcart.htm file |
These temporary copies are created automatically when you open ezimerchant Professional. They are actually the files that are used by ezimerchant Professional when generating your site. From now on in this document I will refer to these 5 files as the 'temporary theme files'.
4. Which html files should I be editing?
The main five html files you should edit are the ones listed in Section 2. You should NEVER edit the temporary theme files.
5. What happens to the theme html files?
When you open ezimerchant Professional it checks what theme you currently have selected. Then it looks in that theme directory and checks for the existence of the five temporary files. If these files don't exist then ezimerchant Professional looks for the theme files listed in Section 2 and then makes a copy of them. The copies become the temporary theme files. (Basically it makes a copy with the letters 'mod' on the front of the original file names.)
When you generate your web site, ezimerchant Professional uses the temporary theme files files to display your web site.
Part 2 - Now I know what files to edit, how do I edit them?
The theme HTML files can be edited manually in a text editor like Notepad or in a WYSIWYG environment like Microsoft Front Page 2003, Microsoft Expression Web or Dreamweaver CS3.
When you open the theme files for editing you will notice that they look rather simple. You can make all the changes you like to the theme files providing the basic page layout structure and all the tags remain intact. These are some of the things you can do to the theme files:
- Change font, size, colour, style of different parts of the theme - Or remove all the font tags completely and replace with CSS.
- Add images
- Add background image
- Change table, cell and background colours - Or apply CSS
- Add custom HTML code
- Add Flash animation for effects or even custom hard coded navigation
Once you have edited the theme file you should save it and then delete the corresponding temporary theme file as described in Part 1 and then open ezimerchant Professional and generate your web site to have a look at the changes that you have made.
Things you should NOT do when editing the theme files:
- When editing theme files is is extremely important that you do NOT include the full path to an image,
Example: If you insert an image or flash animation or any other object into the theme you must provide the relative path name.
c:\temp\image\imagename.jpg = NOT ACCEPTABLE
images\imagename.jpg = ACCEPTABLE
Example: Correct image path code Example: Incorrect image path code 
You must remember to place the image into the images directory inside the theme directory that you are editing otherwise the image file will not be found and you will see the missing image box with a red cross in it on your web site.
- Do not change the basic layout of a theme. If you have already designed a web site in another package you cannot simply copy and paste it into an ezimerchant Professional theme. The theme files have structure and this structure must be adhered to.
- Do not remove important tags from the theme file. The tags are used by ezimerchant Professional when it generates the web site. Without these tags ezimerchant Professional cannot insert data such as product data into your web site.
Part 3 - How to make your theme appear in ezimerchant Professional's theme list with its own name
If you have edited a theme you may want to rename the theme so that it is easily distinguished in the theme list.
The main advantage of this is that it will not get overwritten by future ezimerchant Professional patches if your theme has its own name.
Simply rename the themes directory to whatever you would like to call it.
Example: If you originally chose to edit theme 1 then you would need to rename the directory called '1' to what ever you want to call it. The next time you open ezimerchant Professional it should contain your new theme in the list.
- Open the themes folder in explorer.
- Select the theme you have been editing and then rename it. (Right Click -> Rename)
- Type in the new name for your theme then hit enter.
The folder should now look something like this.
- Open ezimerchant Professional and goto the 'Template Settings' section. You should see your new theme in the list.
Part 4 - Editing Product Styles - Brief and Detailed
Editing the Brief and Detailed product styles is covered in another FAQ titled: How do I edit Product Styles? (Brief and Detailed Styles)
IMPORTANT NOTES
- Whenever you edit the theme files listed in Section 2 you MUST DELETE all files with 'mod' in front of the file name before opening ezimerchant Professional and attempting to test your new theme
- When using the ezimerchant Professional backup feature it is extremely important to note that it DOES NOT backup any custom theme data. You should take a copy of your custom theme separately to the backup that you make with ezimerchant Professional.
- There are some extra unused tags which you may find useful:
<#SubCategoriesHorizontalTable> - This tag is an alternative to <#SubCategoriesTable>. The alternate tag will place the subcategory list across the page (separated by spaces) rather than down the page (Separated by
). This tag is useful if you have a lot of subcategories - example, letters of the alphabet. - Requires ezimerchant Professional 3.9.1 or above. Can only be used in the categorypage.htm theme file.