Archive for the ‘Zen Cart Web Design’ Category
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. 
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:
background-image:none;
So, you end up with this:
#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
background-color: #ffffff;
background-image:none;
}
*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
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’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
New 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:
/admin/includes/application_bottom.php
/admin/includes/classes/split_page_results.php
/admin/includes/classes/language.php
(only touched to fix some line-endings problems)
/admin/includes/functions/general.php
/admin/includes/init_includes/init_gzip.php
/admin/includes/modules/product_music/delete_product_confirm.php
/admin/whos_online.php
/docs/
/includes/version.php
/includes/application_bottom.php
/includes/classes/shopping_cart.php
/includes/classes/split_page_results.php
/includes/init_includes/init_cart_handler.php
/includes/init_includes/init_gzip.php
/includes/modules/product_listing.php
/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)
/includes/modules/order_total/ot_group_pricing.php
/includes/modules/pages/advanced_search/header_php.php
/includes/modules/pages/advanced_search_result/header_php.php
/includes/modules/payment/paypal/paypal_curl.php
/includes/modules/payment/paypal/paypal_functions.php
/includes/modules/payment/paypaldp.php
/includes/modules/payment/paypalwpp.php
/zc_install/ … assume *all* of /zc_install/ has changed
Zen 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.
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.
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:
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:
Using Photoshop CS3 I am able to produce images – specifically zen cart header images for my clients’ websites by going through the following steps:
1. Open the photo or image that you want to have round corners on in your Photoshop program.
2. Choose SELECT and the ALL from the top menu
3. Choose SELECT then MODIFY then CONTRACT – and enter in a number to contract your image by. I usually use the smallest pixel size I can get by with – which is 3.
4. Choose SELECT then MODIFY then SMOOTH – which will round the edges of your selection. I usually use 10px for the number which works very well.
5. Choose SELECT then INVERSE – this will allow you to invert your selection back to the original rectangular or square shape.
6. Choose EDIT then CUT in order to cut out the background behind the rounded corner image you have just created and make it transparent.
7. Save the file and enjoy!
If you are building a zen cart website design on your own, you should create your design in what we call an “overrides” directory for zen cart.
Zen cart comes out of the box with a “Classic Contemporary Green” template, as well as template default files. When creating a new template set, it is always best to use the template default files and copy them into your overrides directory. When building zen cart websites, we most usually name the overrides directory “custom” but you can name it anything you want.
The reason we create overrides directories is so that during your design work, if you should “break” the code in a file, you have not revised a core file and you can easily download that core file back into your overrides directory and start over again if needed.
The steps to take in creating a template are as follows:
1. Create a folder named custom under includes/templates
2. Take the following folders from the includes/templates/template_default folder and copy them into the includes/templates/custom folder you just created:
–buttons
–common
–css
–images
–sideboxes
–templates (create this directory but do not download all the files into it – you should only use this folder if there are customizations to the template files that you can copy individually into this folder if needed.)
3. Copy the includes/templates/template_default/template_info.php file down into the includes/templates/custom folder and edit that file changing the top line to say custom template instead of default template – and edit the other information as you see fit.
4. Upload all these folders onto the server
5. Log into your zen cart admin area and mouse over the word Tools and click on Template Selection.
6. Choose Custom Template from the drop down menu and then click on the update button
7. Next go to Tools> Layout boxes controller and activate the boxes that you will need for your new template
8. From here, the balance of the work is to change the stylesheet.css to meet your needs, upload a new logo.gif that you have created for your website and change any other graphics – such as the tile_back.jpg file to match your color scheme.