Click Image for larger view

Unfortunately, because Zen Cart displays this new larger button next to the quantity box (default settings), it leaves less space to the right for the product name as shown in the image to the right.  While I personally think that the update button is pretty clear as to what its function is… others don’t seem to think so.  Granted, if you enter a new amount in the quantity box and press the enter key, it will achieve the same result as if you entered the amount and pressed the update button.

But, if you are afraid your customer is not internet savvy enough to know what the standard update cart button is for…. then chances are they are not going to be savvy enough to press enter when changing the quantity either!

So, what are your choices?  We can keep the default image and hope our customers figure out some way to update their quantity either by pressing the image or hitting the enter button;  We can use the larger image and let the product name get scrunched up; We can completely REMOVE the update button altogether… but then… that pretty much defeats the purpose of trying to make things easy for those less than savvy customers.

Click Image for larger view

No worries!  The Zen Cart development team has made it easy for you to have your cake and eat it too!

In your admin area, mouse over CONFIGURATION, then go down to STOCK.  About 3/4 of the way down the page you will see:  “Show Shopping Cart – Update Cart Button Location” If you will click on that, you will see that you have been given options on where and how to display the update cart button.  After clicking the edit button, your choices are:

1= Next to each Qty Box
2= Below all Products
3= Both Next to each Qty Box and Below all Products

Larger Image

If we change this from the default of #3, to #2, then the update button will no longer show up next to the quantity box, but your larger image with text on it will still show up under the shopping cart total line to the right of your Continue Shopping button!

This should make it easier for those less internet savvy customers to update their carts as they need to and still maintains a nicely spaced shopping cart page in the process.

Create an overrides folder for your template – includes/templates/YOUR TEMPLATE FOLDER/sideboxes

Copy includes/templates/template_default/sideboxes/tpl_ezpages.php into the overrides folder.

Open the file and insert the code for a line break where I have indicated in RED below:

$content = “”;
$content .= ‘<div id=”‘ . str_replace(‘_’, ‘-’, $box_id . ‘Content’) . ‘”>’;
$content  .= “n” . ‘<ul style=”margin: 0; padding: 0; list-style-type: none;”>’ . “n”;
for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {
$content .= ‘<li><a href=”‘ . $var_linksList[$i]['link'] . ‘”>’ . $var_linksList[$i]['name'] . ‘</a></li><br />‘ . “n” ;
} // end FOR loop
$content  .= ‘</ul>’ . “n”;
$content .= ‘</div>’;

Upload this file to the server.

Doing the line break like this as opposed to just adding a line height to all links sitewide will keep links that take up two lines together instead of spacing them out making them appear to be two separate links in your sidebox.

For those of you wishing to upgrade your sites yourself, please pay very careful attention to all core files that have been changed since the version you are using.  Many modifications for zen cart will end up needing to be updated for this new version, so keep in mind that some mods you have installed may not work.

A few modifications that I know of that definately will not work without new releases are those that use the products table – such as stock by attributes, dual pricing and group pricing per item.

Also important is that you do your upgrade in a different directory and port over your database into a new one for the upgrade.  Once all is running the way you need it, then you can move files over to your main site.

Should you wish for me to do the upgrade for you, you can find that service here – UPGRADE from 1.3+ to 13.9b Keep in mind that this upgrade does not include updating modifications.

Follow are some steps to get this set up:

1.  Create a category called Gift Certificates

2.  Within that category, create a product called Gift Certificates using the following protocol:

• Products Status: In Stock
• Date Available:Leave this blank
• Products Manufacturer: Leave this blank
• Products Name: Gift Certificate
• Product is Free: No
• Product is Call for Price: No
• Product Priced by Attributes: Yes
• Tax Class: Choose appropriate status for your store.  Normally is not taxable
• Products Price (Net):  Enter a zero here.
• Products Price (Gross): figured automatically
• Product is Virtual:  Yes,  Skip Shipping Address
• Always Free Shipping: No.
• Products Quantity Box Shows: Yes, Show
• Product Qty Minimum: leave blank
• Product Qty Maximum: 0 = Unlimited, 1 = No Qty Boxes or Max ##
• Product Qty Units: leave blank
• Product Qty Min/Unit Mix: leave blank
• Products Description: Enter your description here.
• Products Quantity: leave blank or put in a large number to track number sold.
  If you are finding that you cannot add a Gift Certificate to your cart while shopping, try adding a quantity here!
• Products Model: GIFT-0000 (do not deviate from this – make your model number exactly like this)
• Products Image: Upload an image
• Upload to directory: choose directory
• Products URL: leave blank
• Products Weight: leave blank

3.  Now that you have the product set up, you need to set up the attributes for the dollar amount.  Go To Catalog>Option Name Manager and set up an option name called Value or Amount – or whatever you want displayed.  You may choose to have these displayed in a drop down box or by check boxes, etc.

4.  Next go to Catalog>Option Value Manager to set up the values of the gift certificate.  Select the Value that you set up in step three (eg: value, amount, etc) then start entering the values you want for the gift certificate. (Click photo below for a larger view)

5.  The final step is to apply the attribute to the product by going to Catalog>Attributes Controller, selecting Gift Certificate and choosing DISPLAY to add the values.  On the left side you will choose the option name of Value or whatever you set up in step #3.  Next to that, you will select the value of the gift certificate that you set up in step #4.  In the Prices and weight area, put the price of the gift certificate, and put the sort order you want it to show up in.  (click image below for larger view)

Once you have completed these steps – you should have a gift certificate where customers can choose what value they want by using the attributes you just set up and your final look will be something like the following:

http://yourdomainnamehere/index.php?main_page=redirect&action=banner&goto=banner#here

Solution: Check your includes/languages/YOURTEMPLATE/english.php file and make sure there are absolutely no spaces at the bottom of the file after the closing  ?>

If that does not fix the problem, check your includes/templates/YOURTEMPLATE/common/header.php file and make sure there are no spaces there either.

I worked on a website today with just this issue.  The website is 750 pixels wide and had a left column that was set at 200 pixels wide.  The client had some beautiful photos with text she wanted made into an ez page.  Trying to squeeze these photos with wrapped text into 550 pixels was going to make the wrapped text area beside the photos very small.  Because there were navigation links at the top and bottom of the website, and also the breadcrumb was active, I saw no reason why we could not get rid of the left side bar for this page and the client’s visitors should still be able to find their way around the site once they were done reading the info on the ez page.

So, after we set up the ez page, I went to the Configuration> EzPages Settings in the admin and put the ID of the ez pages in the boxes that said
EZ-Pages Pages to disable left-column
EZ-Pages Pages to disable right-column

I separated each ez page ID with a comma only (no space) – so it looks like so:  4,10,11

This effectively removed the left and right columns and the ez page took the whole 750 px width of the site.

Some of you may wish to add a little space at the top – especially if you have a background image that you want to show on all sides, top and bottom of the computer screen.  To do this, find the stylesheet.css that goes with your template.  If you are using the overrides system (as you always should!) this file would be located in the includes/templates/YOUR TEMPLATE NAME/css folder.  Open the stylesheet.css and at the top you will see something similar to this code:

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

Add padding-top:10px;  (and adjust the “10″ to meet your needs) to your code which will make it look similar to:

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

This will give you a 10 pixel padding at the very top of your computer screen so that your background will show up in the first 10 pixels of space like so:

Since zen cart is a very popular program, there have been hundreds of modifications written to expand upon it.  In this section, I will try to go over and explain how some of the more popular modifications to zen cart work, so you can decide whether it is something that would be beneficial to your store.

While there are many reasons a site can be slow to load – one reason can be because the images you are using are too large in file size. Zen cart will automatically resize images based on the perimeters you set up under Configuration>Images in your admin area. BUT, zen cart does not optimize the images – they need to be optimized prior to putting the images up on the server.

I always recommend to clients that they make sure their largest image they use for products on their zen cart stores is no more than 600 pixels wide by 800 pixels long. If you have a photo that you upload that came off a digital camera – sometimes those images can be over 2500 pixels by 2500 pixels! That size alone would slow down a website if there were alot of images being served up that large.

If you have ever been to a site where you see an image that starts “developing” or showing at the top… and slowly shows the complete image – the reason for this could be that the original image on the server is huge, or that it is not optimized. Images that are not optimized for the web, will not only slow down the loading of the site but also use alot of bandwidth.

I have a client that is hosted on one of my dedicated servers that ran into this problem. In only 2 weeks time, her site used up a little over 25 GIGABYTES of bandwidth! No, she had not sent out an ad campaign to 5000 people or received hundreds of orders a day from her site… so traffic was not the issue. She told me that her images had been down sized to no more than 600×800 pixels, and was afraid that maybe people were hotlinking to her images.

Based on that statement, I took a look at her images folder in her zen cart and found that, while the images were indeed reasonably sized pixel wise, the file sizes were huge. I looked at her web stats and saw that over 95% of the 25 Gigabytes of bandwidth was attributed to serving up images. There were almost 1900 images in her images folder and all total they were 160 Megabytes.

I promptly used an image optimizing program, and reduced those images by 75% in file size which made them 44MB which is much more reasonable – and the images did not noticibly lose quality.

There are many great programs that will help you with optimizing the filesize of your images. One such program can be found here:
http://www.imageoptimizer.net/Download.aspx
I like this program because it is free – no strings attached – and because you can optimize many images in a folder with just a couple of clicks of your mouse! I have found that if you have more than 900-1000 images in the folder, this program runs out of memory. But it is well worth the time to divide the images into separate folders to get the results you want. This program is also nifty because it does not “overwrite” your original images, it saves the optimized images in a separate folder.

This is where adding the phone number to your zen cart contact us page comes in real handy. The phone number would also be a part of the email the admin receives, so it is right in front of them so they can just pick up the phone and call!