Archive for January, 2010

When designing a zen cart website, the top edge of the website is set snug against the top of your browser as shown in the photo below:

header image no padding

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:

heading with padding at top

While the zen cart e-commerce shopping cart program is very powerful right “out of the box”, there are times that you may need added functionality to suit your business.

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.

There is probably nothing more irritating to me than to visit a website that takes FOREVER for it to load. If I am surfing the internet for something special, and run across a site that takes longer than a few seconds to load – believe me, I am on to the next site that came up in my google search! I don’t suppose I am much different than the average surfer or shopper on the internet – so to me this means that if your site is slow to load – don’t expect too much business from it!

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.

When a customer sends you a message from your contact us page, the admin will receive an email that has the customer’s name, their email address and their message. I have found at times that it is easier to respond to the customer by phone instead of responding to the email because of the length of the email or simply because it is easier to explain something verbally than it is to write it in an email.

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!

There may be times when you want to set up a category on your zen cart that does not have any items to purchase in it. For example, it could be something important that you want displayed in your category box with information or images in it.

When you create a category that does not have any products in it, zen cart will automatically insert the following line at the bottom of that category page:

“There are no products to list in this category”

If you would like to get rid of this, you need to edit the includes/ languages/ english/ YOUR CUSTOM FOLDER/ index.php file. If you use an HTML editor, you need to go to around line 81 and you will see the following:

define(‘TEXT_NO_PRODUCTS’, ‘There are no products to list in this category.’);

Simply edit that line by taking out the sentence – being careful to not delete the quote marks. So you would end up with the following:

define(‘TEXT_NO_PRODUCTS’, ”);