Archive for the ‘Zen Cart Web Design’ Category

When we do a design for our customers, we make sure that you have the capability of sending HTML emails out through your zen cart store that has your logo on it.

For those that have had someone else do their design, here are some instructions on how to make your emails “pretty” for those customers that have selected HTML as their default email preference.

  1.  The first thing you need to do is have a logo to put in the email.  We usually name this image email-logo.jpg, and put the image file in your /email folder of your Zen Cart installation
  2.   As a general rule of thumb, the logo should be no wider than 550 pixels and no taller than 200 pixels.
  3.   Once you have the logo up on the server, you will need to edit all of the files that are in your /email folder so that the files pull the logo into the emails.  These files are:
  4.   The code you will want to change in EACH FILE will look like this:
    <img src=”email/header.jpg” alt=”logo” />
    Once you find that code, simply change it to your actual logo image name, which in our case is email-logo.jpg.  Then your code would look like the following:
    <img src=”email/email-logo.jpg” alt=”logo” />
  5.   Log into your Zen Cart admin and mouse over the Configuration menu and go down to Email Options and make the following changes (if necessary).

Enable HTML Emails? – set to true
Email Admin Format? – set to HTML

6. In your admin, go to Configuration>Customer Details and make the following change (if necessary)
Customer Default Email Preference – set to 1, HTML

Keep in mind that the customer has the option to choose TEXT only emails, in which case a logo will not appear in their emails from your shopping cart.



SSL for Zen CartPOODLE is a vulnerability that was discovered in September 2014 which involves shopping carts that use the industry standard SSLv3 in their coding.

Zen Cart is one of the shopping cart systems that uses this coding in some of their payment modules, such as PayPal,, Linkpoint, etc.   These processors either have already, or will soon, start disallowing the use of the industry standard version of SSL v3, The USPS version that came out in September 2014 also has this coding in it. sent out an email last week giving everyone until November 4th to change their coding.  PayPal initially disallowed the SSLv3 coding, but quickly reversed it back and noted that they would be going back to disallowing it soon.

Because of this, your customers may receive an error during checkout, like: “An error occurred when we tried to contact the payment processor. Please try again, select an alternate payment method, or contact the store owner for assistance. () – (35) error:1408F10B:SSL routines:SSL3_GET_RECORD:wrong version number”

The solution provided by the Zen Cart development team is to change several files so that no SSL version is specified and Zen Cart can auto-negotiate the SSL to a higher level.

Should you need help with this, we will update all the necessary files so that your Zen Cart payment and shipping modules work properly.  Our charge for this fix is $50. 

Also, if you have USPS installed, a new version was released on 11/2/14 that includes returning rates for First Class Large Envelope as well as the fix for POODLE.  If you indicate on the order form that you want this updated, we will save you $20 and update the USPS for you at the same time as we do the POODLE fix on the other files.

If you have a body background image on your zen cart store, you may notice that the popups, like larger image popup and shipping estimator popup will have this background image in it. zen cart shipping estimator background

To remove this background image, you will need to go into includes/templates/YOUR TEMPLATE NAME HERE/css/stylesheet.css and find the following code:

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff; }

After the background-color code, add the following:

So, you end up with this:
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;

*NOTE: background-color: #FFFFFF is the hex code for white. You can replace the FFFFFF with any other hex codes you want that will match your template design.

On the shopping cart page of a zen cart, the default background color for the items in the cart and table headings are different shades of gray.

While gray is a nice neutral color, it may not be what you want displayed on YOUR zen cart website design.  Here are a few steps to follow by editing includes/templates/YOUR TEMPLATE NAME HERE/css/stylesheet.css

zen cart shopping cart rows In your stylesheet.css you will find the following code:

.rowOdd {
background-color: #E8E8E8;
height: 1.5em;
vertical-align: top;
.rowEven {
background-color: #F0F0F0;
height: 1.5em;
vertical-align: top;

If you change the background-color to white eg:#ffffff this is the result you will see:

Next, you may want to change the top heading line to another color.  To do this, find the following in your stysheet.css and change the background color to the color of your choice:

TR.tableHeading {
background-color: #cacaca;
height: 2em;

We have changed our heading to a green that matches the green in our website as shown here:

If you want to change the color of the line that is at the bottom of this table, you would need to search for and revise this code:

.tableHeading TH {
border-bottom: 1px solid #00bec8;

Our next step is to change the color of the sub total bar.  In your stylesheet, find:

.tableHeading, #cartSubTotal {
background-color: #f1d4d3;

And if you want to change the color of the lines around this, you can do that here:

#cartSubTotal {
border-top: 1px solid #cccccc;
font-weight: bold;
text-align: right;
line-height: 2.2em;
padding-right: 2.5em;

In our case, we have now changed the shopping cart page to where it beautifully matches our design!

zen cart product listingZen Cart’s default setting for the amount of products to show on the product listing page is 10 products.  If you have 30 products, your cart will display the first 10, then your customer will need to click a “next” link to see the next 10 and so on.

To avoid confusion and possible products not being seen because visitors are not paying attention, you can revise the number of products that are displayed on your product listing page.

To do this, log into your admin and mouse over the word Configuration and from the drop menu select Maximum Values.    Towards the bottom you will see:  Products Listing- Number Per Page.  Click on this and on the right side a box will show up,  change the value to a larger number….  say…. 100.  Then press the update button.

Another handy setting on this Maximum Values page is to be able to control how many orders and customers you see in your admin area.  You can modify these numbers by changing the values under:

Customer Order History List Per Page
Maximum Display of Customers on Customers Page
Maximum Display of Orders on Orders Page

ZEN CART UPGRADENew version of Zen Cart with bug fixes was released on August 16th.  Latest version is now 1.3.9F

It is important that anyone still running 1.3.8a upgrade to the latest version for sake of security and speed of your zen cart store.

We are happy to schedule your upgrade should you need our help. Upgrades to not include re-installation of modifications to zen cart that might be installed on your website.

Click here to order your upgrade to the latest version
Updates include:
* Remove obsolete portions of gzip code
* Fixed problem with redundant code in ot_group_pricing
* BUGSFORUM-320 – Disable GZip compression when serving downloads
* BUGSFORUM-529 – no-op test of $_GET[‘manufacturers_id’] in product_listing.php
* BUGSFORUM-626 – Fix problems with Breadcrumb:: Product Listing Title :: Buy Now Button
* BUGSFORUM-962 – Deleting a Linked product caused it to delete media/artist details even though master product still exists
* BUGSFORUM-1279 – Line Items not sent to PayPal properly (wasn’t fully fixed in v1.3.9e)
* BUGSFORUM-1338 – “Field format error: ORIGID missing” message from PayPal — when using Back button in admin orders screen
* BUGSFORUM-1339 – Fixed split_page_result.php class “bug”
* BUGSFORUM-1369 – Searching with quotes does not work when clicking next button.
* BUGSFORUM-1412 – fine-tuning of version-info check to fix some windows server issues
* Fixed PHP4-compatibility problem in zc_install (NOTE: You shouldn’t be using PHP4 anyway!)

Core files that have been changed from version 1.3.9e and 1.3.9f are as follows:
(only touched to fix some line-endings problems)
/includes/modules/order_total/ot_tax.php (was actually changed in v1.3.9e, but originally wasn’t properly listed in changelog, so re-listing here)

/zc_install/ … assume *all* of /zc_install/ has changed

zen cart update cart buttonZen Cart’s standard button_update_cart.gif is small, and a lot of my clients do not like it because they are afraid their customers will not know what it means.  The alternative is to have a larger button with text.

Shopping Cart Update Button

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.

Admin update shopping cart button

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

Shopping cart with one update button

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.

A new release of Zen Cart has been issued which contains many changed core files as well as updates for security.  Current release is 1.3.9b.

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.

Do you ever have the need to make one or more of your zen cart ez pages take up the full width of your site and not display the left and/or right side columns?  An example of needing to do this could be that you have an ez page that you want to display large pictures on wrapped with text – but perhaps your site is narrow and with the ez page displayed in the narrow center column – it just doesn’t look too great.

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.

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;

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