Perfect Product Pages

By Melanie Prough on Thursday, July 23, 2009
Filed Under: Zen Cart Tutorials

There is so much to consider when building your Zen Cart ecommerce site. Top runners in things to consider are usability and the site’s ability to convert… These 2 metrics are highly dependent on each other. Today we are going to show you how to use great usability and simple techniques to increase the ability of your product pages click through and ability to convert sales.

This to intermediate to advanced level Zen Cart tutorial. Before you start reading, open up one of your Zen Cart product pages, preferably one with attributes if you use them.

Simplifying your product pages:


  1. Breadcrumbs: You will want to enable your breadcrumb navigation to assist your customer’s in navigation your store. In Configuration >> Layout Settings >> Define Breadcrumb Status, set this to 2= Off for Home Page Only. It would be redundant to display the breadcrumb navigation on your main page.
  2. Category Icon: With your breadcrumbs enabled there is no logical reason to use the category icon navigation. Not only is it redundant, but it sucks up valuable page real estate as well. To turn them off you will navigate your Zen Cart admin to Configuration >> Product Info >> Previous Next – Navigation Includes Category Position, set this to false.
  3. Previous Next Navigation: This is a valuable navigational resource for shoppers, so we will tweak this a bit to maximize its potential. In Configuration >> Product Info >> Previous Next – Button and Image Settings, set this to Button Only. Next, go to Configuration >> Product Listing >> Prev/Next Split Page Navigation (1-top, 2-bottom, 3-both), set to #1. The top is the most logical navigational position, and there is no good reason to use both top and bottom images to slow the page down.
  4. Turning off items we don’t need: We are going to turn off every single thing on that product page that you don’t need. This will un-complicate the page and make it load faster as well. So navigate to Catalog >> Product Types >> Choose your product type, which is probably Product – General. Next select the button for your product type to the right called “Edit Layout”. In this screen you will find a great many layout options for your product pages. You will be as we said turning off everything you don’t need. Some common thing to turn of are: Show Weight, Show Attribute Weight, Show Quantity in Stock, Show Date Available and  Show Date Added. You may also consider turning off the reviews and tell a friend buttons.
  5. Images: On your product pages, images are obviously a bit deal for your shoppers. I want you to set your main product image on the product pages in a large enough size to get more detail than the default, but small enough to keep a decent load speed. You might look in to installing Image Handler2 for Zen Cart as well. In Configuration >> Images >> Product Info – Image Width & also Product Info – Image Height. Again, the size you can squeeze out of this depends on your layout quite a bit, but try some thing 250 wide and 200 tall. You may want to make that 250! so that the canvas is stretched to 250 wide no matter the image width… This helps to standardize your product pages layout a bit.

Now that we have turned off everything we don’t need and given our shoppers some great navigation, we are going to look at the layout options and some known product page conversion techniques.

Now we are going to move some of the elements within your product pages around a bit to help shoppers buy your products. I am not going to rewrite this tutorial, as its resides at the Zen Cart Wiki. So you will use the Zen Cart tutorial to move your product pages elements around from your Zen Cart admin. If you cannot quite achieve the look you want you can also hand edit this file includes/templates/custom/templates/ and edit your CSS stylesheet as well.

Here are some things we are looking to accomplish:

  1. Moving the Add to Cart Button: You will want to move your add to cart button to a more topside location on the page. The reason for this is simple… When clicking through, many people already know they want to buy, so let them.
  2. Moving Attributes: Logically speaking attributes should be above or inline with the add to cart button.
  3. If you kept the “tell a friend” and “reviews” functions, move them to the bottom.
  4. Color: Color psychology really does have its place in web design. So your “action” elements should be an “action” color… This is your add to cart button.function on your product pages. While green is really the most effective action color, avoid red for certain.

Lastly, remember that every store has different product and customer profiles. So in keeping with that extensive testing, usability studies and your own common sense rule here. We built the following product page while writing this tutorial and thought you may like to see it.

Click to Enlarge Layout Example

Click to Enlarge Layout Example

Tags: , , , , , , , , , , , ,

Comments are closed.

Template Original