Zen Cart Templates: How to Put Your Website in Maintenance Mode

All web sites require periodic maintenance and upgrades. If you do not want the public to be able to navigate around your site while you are working on it, it is a good idea to put your site down for maintenance. This setting is also useful if you have performed an upgrade in a test directory, or on another test server and are ready to transfer the upgraded zen cart files and database over to your live server. If you put the site down for maintenance, it will not allow any new customers accounts to be created or orders to be placed during the transfer. This will save you having to hunt down dropped or missed orders and/or customrs accounts and lessen or eliminate any customer confusion. This zen cart templates tutorial will show you how to put your zen cart in maintenance mode. No orders will be able to be placed, no new customer accounts can be created, and customers will not be able to navigate around your site to view products or other pages.

This is a basic zen cart tutorial and does not require any special skills, tools, or knowledge. You will need to know your zen cart admin url, username, and password to log in.

Zen Cart Templates Tutorial: How to Put Your Zen Cart Site in Maintenance Mode

1. Log into your zen cart admin and navigate to Admin–Configuration–Website Maintenance

zen cart templates

2. Click on “Down for Maintenance: ON/OFF”, select “true”, and click on the “update” button

zen cart templates

3. Navigate to your zen cart home page in your browser and click on the “refresh” button.

If you need help with your zen cart project, or need a quote for a customization that is beyond your skill level, contact us for a quote.

zen cart customization

Zen Cart Templates: How to Remove the Background Image or Color From PopUps

Background images are a wonderful way to easily change the look and feel of any zen cart template. But, if you are using a background image for your zen cart template, you will notice that this background image also gets used for all of the default zen cart pop up windows such as the one used for the shipping estimator, shopping cart info, and advanced search info. This can make the text in these popup windows very hard or even impossible to read. It is a much better practice to have a plain white background in these popup windows. The same is true of a background color that is not white. The default zen cart popup windows will also use the template background color which can make text very hard to read. This zen cart templates tutorial will show you how to easily remove the background image from all of the default zen cart pop up windows. You will need a plain text editor (we recommend Notepad++) and a ftp program (filezilla is our favorite). A minimal knowledge of css would be helpful, but it is not required.

Zen Cart Templates Tutorial: How to Remove the Background Image or Color From all Zen Cart Popup Windows

Say, for example, your zen cart templates have a dark grey background. Your shipping estimator popup window will look like this. As you can see, you can not even read the text:

zen cart templates

1. In your favorite plain text editor open the incldues/templates/override/css/stylesheet.css file.

2. Add this to the bottom of the file:


#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {background:none;}

If your file already has this line already exists in your file, just delete the code between the curly brackets and change it to:


{background:none;}

3. Save the file and upload it to your server using filezilla or your favorite ftp program to the includes/templates/override/css directory. Be sure that you select the option to overwrite the file that is already on your server.

4. Navigate to the shopping cart page in your browser and click on the “refresh” button.

5. Click on the “shipping estimator” button and see the change in the popup window background:

zen cart templates

This customization will remove the background image or color on the popup windows for the shipping estimator, search help, additional images, large product image, CVV help, coupon help, attribute quantity prices help, and shopping cart info.

If you need help with your zen cart project, or need a quote for a customization that is beyond your skill level, contact us for a quote.

zen cart customization

Zen Cart Customization: Remove “There are no products to list in this category”

I love zen cart because it is such a flexible program. Just about anything you can imagine can be done. Sometimes the best way to accomplish a zen cart customization is to use native functionality. Suppose that you wanted to use a category page for just information, text and images. You would want to disable the text “There are no products to list in this category” since that would look sort of strange and out of place at the bottom of the page. This zen cart customization tutorial will show you a quick and easy way to remove this text from certain category pages. You will need a plain text editor (we recommend Notepad++) and a ftp program such as filezila. A minimal knowledge of css is helpful but not required.

Zen Cart Customization Tutorial: How to Remove the “There are no products to list in this category” From Specific Category Pages

zen cart customization

1. Log into your zen cart admin and navigate to Admin–Catalog–Categories/Products

Set up a new category. See this Easy Help Zen Cart Tutorial if you do not know how to do this:

How to Add Categories and Sub Categories in Zen Cart

2. Look on the Admin–Catalog–Categories and Products page and find the category ID of the new category you have just created.

zen cart customization

3. Create a new file in your favorite plain text editor and name it c_categoryID.css. So, since our category ID is 33, our file will be called c_33.css.

4. Add this to the top of the file:


.productListing-data{display:none;}

5. Save the file and upload it to your server using filezilla or your favorite ftp program to the includes/templates/override/css directory.

6. Navigate to the page in your browser and click on the “refresh” button.

zen cart customization

If you need help with your zen cart project, or need a quote for a customization that is beyond your skill level, contact us for a quote.

zen cart customization

Zen Cart Customization: How to Add a Line Break Between EZ Pages Sidebox Links

EZ pages in zen cart are a great, easy way to add important key word rich, and relevant content to your zen cart web site. If you are using the Classic template, or any other design that does not allow for spacing between the links in sideboxes, you will want to make this zen cart customization. Without a bit of space, the links can run together, look messy, and be hard to read. These are all very bad for your customer conversion rate.

zen cart customization

You might try to add space between the links by simple adding something like this to your includes/templates/override/css/styelsheet.css file:


#ezpagesContent ul li a{line-height:22px;}

But, if you have any EZ page titles that are 2 lines or more long, then the result will not be optimal. The line height will cause the second line of the title to appear on a line far apart from the beginning of the title which will make it hard to read.

zen cart customization

There is more space between the links, but the titles that take up 2 lines are spread apart and hard to read.

Zen Cart Customization: How to Add a Line Break Between EZ Page Titles in the Sidebox

1. In your favorite plain text editor, open the includes/templates/override/sideboxes/tpl_ezpages.php file. This file contains php code and must only be opened and edited in a plain text editor. Editing this file in any sort of html or wysiwyg editor will break the code in the file and break your zen cart when you ftp the file to your server.

Find this line:


$content .= '<li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li>' . "\n" ;

Change it to this:


$content .= '<li><a href="' . $var_linksList[$i]['link'] . '">' . $var_linksList[$i]['name'] . '</a></li><br />' . "\n" ;

Save the file and upload it to your server using filezilla or your favorite ftp program.

If you need help with your zen cart project, or need a quote for a customization that is beyond your skill level, contact us for a quote.

zen cart customization

Zen Cart Customization: Move Price to Add to Cart Box

On the product info page that comes standard with the classic zen cart template, the product price is not inside of the add to cart box. Moving the price into this box makes a lot of sense visually, and can help increase your conversion rates since customers will have the pricing info right next to the add to cart button. When designing your product info pages, always strive to make them easy to navigate and easy to purchase from for your customers.

This zen cart customization tutorial will show you how to move the price on the product info page to inside of the add to cart box.

zen cart customization

Zen Cart Customization, Moving the Price to the Add to Cart Box on the Product Info Page

1. Open the includes/templates/override/templates/tpl_product_info_display.php file in your favorite plain text editor. This is a php file so be sure to only open it and edit it in a plain text editor. Editing this file in any sort of html or wysiwyg editor will break the php code and your zen cart when you upload the file back to your server.

Find this:

<!--bof Product Price block -->
<h2 id="productPrices" class="productGeneral">
' . TEXT_ONETIME_CHARGE_SYMBOL . TEXT_ONETIME_CHARGE_DESCRIPTION . '
';
} else {
$one_time = '';
}
echo $one_time . ((zen_has_product_attributes_values((int)$_GET['products_id']) and $flag_show_product_info_starting_at == 1) ? TEXT_BASE_PRICE : '') . zen_get_products_display_price((int)$_GET['products_id']);
?></h2>
<!--eof Product Price block -->

Copy this entire block of code and paste it directly below:


<div id="cartAdd">

2. Delete the Product Price block of code from it’s original position in the includes/templates/override/templates/tpl_product_info_display.php file.

3. Go to your includes/templates/override/css/stylesheet.css file and make any css adjustments to make the spacing, font size, font color, etc. perfect.

4. Save the file and upload it to your server using filezilla or your favorite ftp program.

If you need help with your zen cart project, or need a quote for a customization that is beyond your skill level, contact us for a quote.

zen cart customization

Zen Cart Customization: Add the Manufacturer Logo to the Product Info Page

Showing the manufacturers logo on your product info pages can help give your customers the confidence to complete a sale. Adding the manufacturers logo can be done in a few easy steps. To sucessfully complete this zen cart customization tutorial, you will need to know how to use a plain text editor, edit a php file, and use ftp to make changes to your zen cart site.

Before you attempt to make any zen cart customizations, you will need a plain text editor. My number one recommended plain text editor is Notepad++. It is free for use and can be downloaded here:

http://notepad-plus-plus.org

Notepad++ is a free (as in “free speech” and also as in “free beer”) source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License.

Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. By optimizing as many routines as possible without losing user friendliness, Notepad++ is trying to reduce the world carbon dioxide emissions. When using less CPU power, the PC can throttle down and reduce power consumption, resulting in a greener environment.

Zen Cart Customization Tutorial: How to Add the Manufacturers Logo to the Product Info Pages

1. Open your includes/templates/override/templates/tpl_product_info_display.php file in a plain text editor.

Add this code where ever you would like the manufacturers logo to show on the page:


<!--bof manufacturers logo-->
' . zen_image(DIR_WS_IMAGES . $check_image) . '' . "\n" ;
} else {
echo 'NO IMAGE';
}
?>
<!--eof manufacturers logo-->

Save the file and upload it to your server.

2. Open your includes/modules/pages/product_info/main_template_vars.php file with your favorite plain text editor.

Find:


$products_manufacturer = $manufacturers_name;

Add below it:


$manufacturers_id = $product_info->fields['manufacturers_id'];

Save the file and upload it to your server.

Now your manufacturers logos should show on your product info pages.

If you need help with your zen cart project, or need a quote for a customization that is beyond your skill level, contact us for a quote.

zen cart customization

Turn Off the Category Icon on Product Info Pages

Creating a clean, organized and easy to navigation is good practice when it comes to customer conversion. This step by step tutorial will show you how to turn off the category icon on your zencart product info pages.

This tutorial features the Abbington Mega zen cart template by Picaflor Azul. If you like it and want to use it for your zen cart project, you can download it for free here.:

Abbington Mega Free Zen Cart Template by Picaflor Azul

In your zen cart admin go to Configuration -> Product Info

Click on “Previous Next – Navigation Includes Category Name and Image Status”, select “1= Category Name only” and click on the “update” button.

Navigate to your store and click on the “refresh” button to see the change.

If you need help with your zen cart web site, please contact us for a quote.

big contact Zen Cart Tutorial: How to Add a Facebook Like Box to Zen Cart

equation Zen Cart Tutorial: How to Add a Facebook Like Box to Zen Cart

Zen Cart Templates : How to Add a Background Image

Adding a background image to your zen cart templates is a valuable skill. The background image sets the tone for your entire website. Liven up the look with a background image instead of just a solid color. This step by step tutorial will show you how to add a background image to your zen cart templates.

Picaflor Azul offers many free legacy and responsive zen cart templates to the community. Our templates will give your online business a professional presence. The free zen cart templates come packed with lots of great features like: main page slider, shopping cart totals in the header, languages and currencies in the header, footer menu, column layout grid installed, pure css mega menu, and more! Our newer templates even come out of the box with responsive designs. Responsive desiigns are great because they adapt to look great on any handheld phone, tablet, ipad, laptop, desktop, etc. This tutorial features the Apparel Boutique free zen cart template by Picaflor Azul. You can download it for free here:

Download Free zen cart templates by Picaflor Azul

zen cart templates easy help tutorials

In your favorite image editing program, create your background image. Upload it to the includes/templates/your-custom-template/images folder.

In your favorite plain text editor, open the includes/templates/your-custom-template/css/stylesheet.css

At the top of the file, usually line 1, find this code:


body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background: #fff;}

Change the code to:


body {margin: 0;font-family: verdana, arial, helvetica, sans-serif;font-size: 62.5%;color: #888787;background-image: url(../images/your-background-image-name.jpg);}

Go to your website and hit the “refresh” button to see the change.

zen cart templates easy help tutorials

If you need help customizing your zen cart web site, or would like a great custom design, please contact us for a quote.

equation

Anatomy of the Zen Cart Layout

Customizing your zen cart site will be much easier once you know the names and locations of the different parts of the layout. This tutorial will give you a brief overview of these parts.

This tutorial features the Andover Modern free zen cart template by Picaflor Azul. If you want to use it for your zen cart store, you can download it for free here:

Andover Modern free zen cart template by Picaflor Azul

  • Header: The basic zen cart header elements include the logo, tagline, header search, category tabs navigation, top ez pages navigation, and main navigation menu.
  • Sideboxes: There are many sideboxes available in the default zen cart installation. The most popular are: categories, search, reviews, information, more information, and shopping cart. The product related sideboxes are: best sellers, featured, order history, what’s new, specials, manufacturers, manufacturers info, product notifications.
  • Footer:The basic zen cart footer elements include banners, ip address, and copyright message.
  • Centerboxes: These include featured, specials, new products, and upcoming products.
  • Main Page: The define_main_page.php layout can be edited using the define pages editor in the zen cart admin. Since this is a php file it is advisable to use the “plain-text” editor when editing this file.

If you need help customizing your zen cart web site, or would like a great custom design, please contact us for a quote.

equation

Top Must Have Free Tools for Customizing Zen Cart

Before you take on the substantial task of customizing a zen cart, you should get all of your tools ready. This article will list the most useful free tools for customizing your zen cart store.

1. Use this program to unzip the zen cart file after you have downloaded it to your computer.

7-Zip

2. Use this FTP (file transfer protocol) program to safely transfer files from your computer to your web server.

Filezilla

3. Use this plain text source code editor to make edits to zen cart files.

Notepad++

4. Use this image editing program to create or edit any images that you need for your design or to resize/optimize your product images.

GIMP

5. A good file comparison tool is a must for upgrades and installing modules that make changes to files that you have already modified.

Winmerge

6. My most recommended database manipulation tool is phpMyAdmin. If your host does not offer this, ask them to install it for you. If they won’t, it is a good idea to switch hosts. See our list of recommended zen cart hosts here.

phpMyAdmin

7. Use these css and xhtml validators to make sure that there are no problems with your code before taking your site live. Bad code is not search engine friendly.

CSS Validation Service

W3C Markup Validation Service

8. Set up a local web server to develop your site offline before taking it live.

XAMPP

9. Use this tool to make sure that your downloaded zip files (modules, templates, etc.) are not corrupted.

HashTab

10. Don’t know the first thing about xhtml, css, php, mysql? Follow these tutorials and gain important basic knowledge before attempting to customize your zen cart site.

W3 Schools

If you need help customizing your zen cart web site, or would like a great custom design, please contact us for a quote.

equation