How to manage product images with Zen Cart

August 14, 2010 in Zen Cart Customization, Zen Cart Guides

Is this useful? Like it.

Zen Cart displays images in 3 sizes for each product:

  1. Small - Thumbnail images displayed on the home page and product listing pages.
  2. Medium - Displayed on the individual Product Info page.
  3. Large - Your normal image which is accessed by clicking the ‘larger image’ link on the Product Info page.

There are a few ways to upload and manage your product images. The simplest is by using the admin panel to create your product and upload your image from there — Admin > Catalog > Categories/Products.

You just use the admin to upload one large image and Zen Cart will have the browser display the various sizes for your image — the small thumbnail, the medium size image and the normal large size.

But remember, if you do it this way, all the images displayed (small, medium, large) are actually the same LARGE image. After the image is sent to the user’s browser, it will be rescaled by the browser. This actually will make your site load slower as all thumbnails are actually large images being rescaled at the client side. Also, your thumbnails may look distorted and have jagged edges.

Another more efficient method — for each product, you can manually create the normal(large), medium and small size images and upload to your server. Details: http://tutorials.zen-cart.com/index.php?article=224. But this second method is a bit too cumbersome — manually creating 3 image sizes for a product and uploading to different folders.

Here, I’ll recommend a work flow that is simple, and increases the loading speed of your Zen Cart online store website. Just follow the tips below:

1. Install Image Handler II add-on

If you install this add-on, you just need to upload one product image (normal/large size) as usual — by using the normal way of creating and uploading a product in your admin panel.

The add-on will work in the background to create the small and medium size image and cache the images on your server.

Get the add-on here (download and follow the instructions to install).

UPDATE: For Zen Cart 1.5, use Image Handler 4 instead.

2. Create folders for images on your serverĀ  (OPTIONAL)

After a clean install of Zen Cart, you can create your categories, then create/upload your products at:
Admin > Admin > Catalog > Categories/Products > click your category > click “new product”

When you choose your product image from your computer, the image will be uploaded to “Main Directory” by default, which is actually the /images/ folder on your server.

If you have many categories, all your product images will be stored in this folder, along with all Zen Cart sample images, banner images etc.

For better management, you can create different folders on your server for different categories. Just use FTP to create new subfolders inside the /images/ folder. For example, 1dress, 1blouse, 1pants etc etc. Also, remember to set the folder permissions to read-write (777) with your FTP software. [For security purposes, change the folder permissions to read-only after you have uploaded all your products (755)]

Example folders on your server:
/images/1dress/
/images/1blouse/
/images/1pants/

Now, you can choose the folder to store the product image when you create the product. Note that I added the number “1″ to the folder names — so that the drop down select box will display your folders at the top.

3. Main product image dimension

Product image should be large enough to be seen clearly but must not be larger than the computer screen. Creating your images at about 400 to 600 pixels wide should work well for most cases.

Larger images may require scrolling by the user — and the loading time is longer as well.

4. Naming your product image file

For good practice, name your image files in a consistent way. It is recommended to use ONLY lower case, standard alphanumeric (letters and numbers), dash and underscore. Don’t use space or any other special characters like “bracket”, “asterisk” etc.

Examples:
abcde.jpg – ok
abcde-123.jpg – ok
Agdsh jdk.jpg – NOT ok
Abcd De (837).jpg – NOT ok

Using a consistent way to name your image files will prevent future problems and confusions.

Note that the server considers lower case and upper case as different. Also, you will have an easier time naming your extra images — without making naming errors (see tip number 6 below).

5. Fine tuning your image display sizes in the browser (OPTIONAL)

If you think the default thumbnail or the medium images are too small, you can change the sizes in your admin panel.

To change the thumbnail size:
a. Admin > Configuration > Images > Small Image Width
b. Admin > Configuration > Images > Small Image Height
c. Admin > Configuration > Images > Image – Product Listing Width
d. Admin > Configuration > Images > Image – Product Listing Height
e. Admin > Configuration > Images > Image – Product New Listing Width
f. Admin > Configuration > Images > Image – Product New Listing Height
g. Admin > Configuration > Images > Image – New Products Width
h. Admin > Configuration > Images > Image – New Products Height
i. Admin > Configuration > Images > Image – Featured Products Width
j. Admin > Configuration > Images > Image – Featured Products Height
k. Admin > Configuration > Images > Image – Product All Listing Width
l. Admin > Configuration > Images > Image – Product All Listing Height

IMPORTANT: All width must be same, and all the height must be same. Specifically, a,c,e,g,i and k must be same. And, b,d,f,h,j and l must be same.

To change the medium image (on the Product Info page):
a. Admin > Configuration > Images > Product Info – Image Width
b. Admin > Configuration > Images > Product Info – Image Height

6. Multiple images per product

Zen Cart supports displaying multiple images per product by default. All you need to do is use FTP to upload the extra images to your server.

To create a product and upload the first/main image, just do it the usual way in your admin panel:
Admin > Admin > Catalog > Categories/Products > click your category > click “new product”

To add extra images, you just upload the images with FTP to the server at the SAME folder location of the main image. For example, your main image for a product is abcd.jpg, then you should name the extra images as abcd_01.jpg, abcd_02.jpg, abcd_03.jpg and so on — then upload with FTP to the SAME location as the main image, abcd.jpg. You don’t need to use the admin panel to upload extra images.

Basically, you use the SAME file name, but appended with _01, _02, _03 etc etc. Be careful in naming your extra images, such as capitalization etc — the server considers lowercase and uppercase as different.

Zen Cart will then automatically display the extra images for that particular product.

All our premium templates and free templates are compatible with Zen Cart multiple-images-per-product display.

FTP client software:
If you do not have a FTP client(software) yet, download a free one from:
http://filezilla-project.org/download.php

You’ll need FTP to manage your store in the long run (installing add-ons, uploading files, backup, uploading extra images etc). You should already have the FTP address, username and password from your hosting provider or web hosting control panel.

Compatibility: Zen Cart 1.3.8, 1.3.9

Premium Zen Cart templates from $19 only. Guaranteed unbeatable value! Give your business an advantage over others! Click to see now!

Bookmark and Share

Comments

One Response to “How to manage product images with Zen Cart”

  1. Mark on September 5th, 2011 9:51 pm

    I did not know that you could just upload additional images through FTP, and that it would recognize them automatically.

    That is quite the timesaver! Thanks for the tip.

    P.S. Just bought Premium 3a (already had 4b), and it’s just as awesome as I expected. So another big thanks!

Leave a Reply





+ three = 4


Zen Cart Templates

Premium 1 Series ($19~22)

Premium 2 Series ($23)

Premium 3 Series ($25)

Premium 4 Series ($25)

Premium 5 Series ($26)

Premium 6 Series ($26)

Premium 7 Series ($28)

Premium 8 Series ($37)

Premium 9 Series ($33)

7 Days A Week E-mail Support