Hints and Tips ~ Rainbow Studios

February 27th, 2010

Basic Zencart Customisation Tutorial

right, you have installed zencart, what next?

first you will need a good FTP client like filezilla, you can download this for free here
http://sourceforge.net/projects/filezilla/

and here is a video tutorial on how to use filezilla
http://www.youtube.com/watch?v=yr_u2iKfAt0

now you have filezilla and have an idea how to use it, heres what you need to do to customise your zencart,

first things first, if your a UK seller you will probably want to change zip code to post code, state to county etc, on the register page,
here is how you do that
depending on whether you are using the classic template or another template you have installed, you will need to edit one of these files,

/public_html/includes/languages/english.php
or if you are using a different template to the classic green one that zencart comes with it will be,
/public_html/includes/languages/YOUR_TEMPLATE/english.php
YOUR_TEMPLATE would be the name of the template you are using, eg cool_steel or sexy_pink or whatever the template is called

ok, in english.php find this piece of code

Code:

define('ENTRY_POST_CODE', 'Zip/post code:');
  define('ENTRY_POST_CODE_ERROR', 'Your zip Code must contain a minimum of ' . ENTRY_POSTCODE_MIN_LENGTH . ' characters.');
  define('ENTRY_POST_CODE_TEXT', '*');
  define('ENTRY_CITY', 'City:');
  define('ENTRY_CUSTOMERS_REFERRAL', 'Referral Code:');

  define('ENTRY_CITY_ERROR', 'Your City must contain a minimum of ' . ENTRY_CITY_MIN_LENGTH . ' characters.');
  define('ENTRY_CITY_TEXT', '*');
  define('ENTRY_STATE', 'State:');
  define('ENTRY_STATE_ERROR', 'Your State must contain a minimum of ' . ENTRY_STATE_MIN_LENGTH . ' characters.');

and change all the text from zip/post code to post code, state to county, it should look like this when you have finished

Code:

define('ENTRY_POST_CODE', 'Post Code:');
  define('ENTRY_POST_CODE_ERROR', 'Your Post Code must contain a minimum of ' . ENTRY_POSTCODE_MIN_LENGTH . ' characters.');
  define('ENTRY_POST_CODE_TEXT', '*');
  define('ENTRY_CITY', 'City or Town:');
  define('ENTRY_CUSTOMERS_REFERRAL', 'Referral Code:');

  define('ENTRY_CITY_ERROR', 'Your City or Town must contain a minimum of ' . ENTRY_CITY_MIN_LENGTH . ' characters.');
  define('ENTRY_CITY_TEXT', '*');
  define('ENTRY_STATE', 'County:');
  define('ENTRY_STATE_ERROR', 'Your County must contain a minimum of ' . ENTRY_STATE_MIN_LENGTH . ' characters.');

make sure you keep the single quote marks arount the text like this ‘Post code:’
if one of the single quote marks are left out, it will cause the template to break, small details like this can have a massive impact on php the slightest error can leave you with a blank white screen where your website should be, so pay attention to how the code is entered, before changing anything, and always save an unaltered copy of the file you are editing, to your computer, just incase you need to replace the file with the original, if somthing does go wrong.

save the edited file and upload it back to the server

ok, your login/register page is now suited to a UK buyer, next the look of your website

the classic template will still have “Congratulations! You have successfully installed your Zen Cart” across the top of your main page,
here is how to remove that, go into
/public_html/includes/languages/english/index.php or if you are using a different template it will be
/public_html/includes/languages/english/YOUR_TEMPLATE/index.php (YOUR_TEMPLATE being the name of the template you are using)

and at the bottom of the page look for this code

Code:

// This section deals with the "home" page at the top level with no options/products selected
/*Replace this text with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution.');
} elseif ($category_depth == 'nested') {
// This section deals with displaying a subcategory
/*Replace this line with the headline you would like for your shop. For example: 'Welcome to My SHOP!'*/
define('HEADING_TITLE', 'Congratulations! You have successfully installed your Zen Cart&trade; E-Commerce Solution.');
}

and replace both lines of the “congratulations” text with what ever message you want, making sure you keep the single quote marks at either end of the phrase you are entering

save the edited file and upload it back to the server

if you want to change the “Sales Message Goes Here” or “Tagline Here” text, here is how to do that
go into
/public_html/includes/languages/english/header.php or if you are using a different template go into
/public_html/includes/languages/english/YOUR_TEMPLATE/header.php
and find this code

Code:

define('HEADER_SALES_TEXT', 'Tagline Here');

and change the ‘Tagline Here’ to any text you want to see on your site, keeping the single quote marks at each end of the phrase
then upload the edited file back onto your server

you may also need to go into includes/languages/english/classic/header.php
to change the ‘Sales Message Goes Here’
find this code in header.php

Code:

define('HEADER_SALES_TEXT', 'Sales Message Goes Here');

and change ’Sales Message Goes Here’ to what ever you want, again keeping the single quote marks
then upload the edited file back to your server

ok, you might want to change the colours and maybe the width of your zencart, heres how you do that,

changing the width, if you feel that the template you are using is to skinny, (like the classic green really is) go into
/public_html/includes/templates/classic/css/stylesheet.css or if you are using a different template go into
/public_html/includes/templates/YOUR_TEMPLATE/css/stylesheet.css

and find this code

Code:

/*wrappers - page or section containers*/

#mainWrapper {

	background-color: #ffffff;

	text-align: left;

	width: 720px;

	vertical-align: top;

	border: 1px solid #202020;

	}

and change 720px to what ever width you would like the center of the page to be, somthing like 900px is a good size
save the changes and upload the file back to the server,

header logo,
the easiest way to do this is by using just the logo and getting rid of the header background image,
to remove the header background image go into here
/public_html/includes/templates/classic/css/stylesheet.css or if you are using a different template go into
/public_html/includes/templates/YOUR_TEMPLATE/css/stylesheet.css
and find this code

Code:

#logoWrapper{
	background-image: url(../images/header_bg.jpg);
	background-repeat: repeat-x;
	background-color: #ffffff;
	height:75px;
	}

and remove the ../images/header_bg.jpg just leaving ()

save the file and upload it back to the server,

its always best to leave the code for the background-image and just edit out the file path, just incase you want to add an image in there at a later date, the code is still there for it

then to add your own logo, create a logo the same width as you set your zencart (as above)
say you set your site to 900px then your logo should be 900px wide, make it any height you like, 150px, 175px somthing like that
upload it to
/public_html/includes/templates/classic/images or if you are using another template
/public_html/includes/templates/YOUR_TEMPLATE/images

then you need to go into
/public_html/includes/languages/english/classic/header.php or if you are using a different template go into
/public_html/includes/languages/english/YOUR_TEMPLATE/header.php

and find this code

Code:

define('HEADER_LOGO_IMAGE', 'logo.gif');

and change logo.gif to the name of the logo you created and uploaded
save the file and upload back to the server

colours,
how to change the background colour,
/public_html/includes/templates/classic/css/stylesheet.css or if you are using a different template go into
/public_html/includes/templates/YOUR_TEMPLATE/css/stylesheet.css
find this code

Code:

body {
	margin: 0;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 62.5%;
	color: #000000;
	background-color: #e5edf5;
	}

simply change the #e5edf5 to what ever colour you want,
here is a list of colours you can use
http://www.w3schools.com/html/html_colors.asp

changing the box headers, now there are two ways to do this,
the easy way to do this is to copy the tile_back.gif to your computer, you will find that in
/public_html/includes/templates/classic/images or if its a different template
/public_html/includes/templates/YOUR_TEMPLATE/images

use what ever photo editing software you have to change the colour of that image, and upload it back to the same folder it came from,

you can get some free image editing software from here
http://www.gimp.org/

the other way to change the box headers is to find all references to tile_back.gif in the stylesheet.css you are using for your template and delete the ../images/tile_back.gif just leaving the () and change the background-color: #abbbd3; and enter what ever colour you would like inplace of the #abbbd3

here is the code you need to change

Code:

#navMainWrapper, #navSuppWrapper, #navCatTabsWrapper {
	margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	font-weight: bold;
	color: #ffffff;
	height: 1%;
	}

and

Code:

#navEZPagesTop {
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	font-size: 0.95em;
	font-weight: bold;
	margin: 0em;
	padding: 0.5em;
	}

and

Code:

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	padding: 0.5em 0.2em;
	}

and

Code:

.productListing-rowheading {
	background-color: #abbbd3;
	background-image: url(../images/tile_back.gif);
	height: 2em;
	color: #FFFFFF;
	}

its always best to leave the code for the background-image and just edit out the file path, just incase you want to add an image in there at a later date, the code is still there for it

theres a start for any one wanting to customise thier zencart.