I’m sure you all know this already, but consider this a gentle reminder as we review a couple of simple steps to help you provide a superior user experience that will help attract a loyal audience to your online store.

Proofread – at least twice

Proofreading is a simple, yet vital, step before publishing because:

• Content free from errors keeps your visitors focused on your message and delivers a smooth user experience
  The effect of errors in your content on your store visitors can range from being mildly distracting to completely derailing their train of thought.  The errors become the focus rather than your content’s message.
• Content free from errors underscores your store’s credibility
  Research, as part of the Stanford University Web Credibility Research project, has shown that web users do not just overlook simple cosmetic mistakes such as spelling or grammatical errors.  In fact, the findings suggest that typos can have roughly the same negative impact on a website’s credibility as a company’s legal or financial troubles.

To help prevent overlooking something in your proofreading step, try this checklist:

1. Check the most visible elements
   There are a few ‘hotspots’ on a web page that people are most likely to read.  Give these areas some special attention when proofreading:
   - the webpage title
   - headlines and headings
   - menu items and button text
   - link text
   - brand, site and product names
2. Check the formatting
   If you tend to write content in a word processing program before copying to your store pages, pay particular attention to issues such as:
   - missing punctuation at the end of a paragraph (caused by hasty copying and pasting)
   - mismatched fonts (a paragraph appearing in Times New Roman when the rest of the page is in Arial)
   - special characters not rendering properly (such as smart quotes, apostrophes, etc being turned into ‘garbage text’
3. Check for potential legal issues
   Look out for any incorrect usage of brand names and trademarks.  Also ensure that the use of other people’s photos, videos, artwork and text are compliant with the appropriate copyright laws.
4. Check for consistency and accuracy
   Double check the spelling of all names of people and places.  Are you consistent in the way you have spelled and capitalized words.  Something in this area that I always need to keep an eye on is being consistent in the spelling of words such as color/colour or customization/customisation.Are you consistent in the names of site elements (such as buttons, menus, links, etc) across your store?  For example, do your instructions mention clicking on the ‘Sign Up’ button but the button label is ‘Subscribe’.  Or ‘Registration’ in one place and ‘Create Account’ in another.
5. Check spelling, grammar and punctuation
   Potential areas for mistakes in this cateogry include commonly misspelled words (for example – independent, maintenance, occurrence), commonly misused words (like affect/effect, complimentary/complementary, there/their/they’re, your/you’re) and common grammar traps (such as mismatching the subject and verb – we goes to school).
6. Check images and video
   Always check that the text accompanying an image or video makes sense.  It’s can be easy to miss this if you update an image down the track.  Also, double check the alt text for each image.
7. Check readability
   If a visitor to your store only skims the page, will they know what the page is about?  Do you have the most important information in the first paragraph.  Look at ways you can create ‘easy to scan’ text such as breaking up paragraphs with sub-headings, converting long sentences to bulleted points.

Proofreading Tips

• Print the page – reading on the screen and reading on paper IS different.  Printing out the page means you’ll see the page and the words differently and is a great tactic for spotting errors.
• Wait – sometimes you will find yourself reading what it is supposed to say rather than what it actually says.  A break can help you see your text with new eyes.
• Ask someone else – if you are too familiar with the content.  A new reader will be more likely to see mistakes and point out anything confusing.  Having a second proofreader is one of the best ways to clarify and correct your content.

More Zen Cart:

1. How does Zen Cart handle a ‘Page Not Found’?

Do NOT implement this version in a live shop during the BETA phase. However, if you are able to install this new version in a test environment, you are encouraged to provide details of any bugs found in the Zen Cart Bug Reports thread on the Zen Cart Support Forum.

The following information is available from the Readme file in the download:

Numerous system changes to support PA-DSS compliance certification

• Admin passwords now expire every 90 days, as per PA-DSS specification
• Admin passwords now require a combination of letters and numbers, as well as uniqueness (cannot use already-used passwords)
• Admin passwords can have a configurable length, but no less than 7 characters
• Admin passwords also expire, for security reasons, when changing admin configuraton from non-SSL mode to SSL mode
• Admin Profiles – is now built-in, with a significant number of additional features, and simpler to use
• Add basic admin Activity Log Viewer/Exporter tool
• CHANGE-12 – PA-DSS – prevent payment modules from ever storing more than 10 characters of sanitized CC numbers
• CHANGE-12 – PA-DSS – prevent built-in "gateway" payment modules from functioning if the site is not protected by SSL
• CHANGE-12 – PA-DSS – add admin detection of SSL mode change and auto-expire all passwords if SSL mode is enabled either with ENABLE_SSL_ADMIN or using an https address for HTTP_SERVER
• CHANGE-12 – PA-DSS – add two-factor authentication hook in admin login
• PADSS-30 – Admin SSL now enabled by default in configure.php file if Enable-SSL is selected during zc_install

Changes

• HTMLarea editor removed from core due to obsolescence. Use preferred plugin instead if similar functionality is required.
• FCKeditor components removed from core due to obsolescence. CKEditor is the replacement editor by the same author. Switch to the new plugin if desiring to use this editor.
• USPS module removed from core in favor of being an addon, due to the volatility of frequent changes made by USPS. The addon is available in the Free Addons section of the Zen Cart website.
• zc_install now treats supplied initial admin password (during install) as temporary … requiring the admin user to select a new password at first login. This is to prevent abuse from password sniffing.
• Add extra line-break before "spam" disclaimer in email footers.
• CHANGE-102 Fix broken error checking in SQLPatch tool
• CHANGE-128 obscure sql injection fix
• CHANGE-135 add default value to zen_draw_pull_down_menu call to stop the value being drawn from the GLOBALS array and tested as a string.
• CHANGE-138 Set CURL Proxy Status to FALSE by default, and remove from display since it’s now deprecated
• CHANGE-139 fix sprintf() error when generating an outgoing email notification caused by language file refinement
• CHANGE-142 fix tax calculation
• CHANGE-143 fix sidebox query to ensure a correct limit statement is built, if necessary
• CHANGE-143 catch SQL errors and output generic message to user and write message to log instead
• CHANGE-144 XSS mitigation for admin forms — adds logging for inputs flagged as "rogue" by blacklist algorithm.
• CHANGE-145+146 Blank values for various Maximum Values settings causes PHP errors
• CHANGE-147 zc_install was throwing warning for MySQL versions over 5.2
• CHANGE-151: Fix rounding and tax calculation issues in Cart/Order Class
• CHANGE-90 – SECURITY: Fix Local File Inclusion Vulnerability
• Whos_online – several improvements to allow the option to exclude spiders and/or admin IP’s from the list of displayed results
• Improvement: Developers Toolkit can now optionally search .js files too.
• CHANGE-136 on new installs, DB_CHARSET now defaults to UTF8, not latin1
• CHANGE-137 Removal(deactivation) of CDE payment modules when SSL disabled
• CHANGE-70 – zc_install now checks whether .htaccess rules will work, and provides an alert if there’s a problem.
• CHANGE-74 Sanitization
• VARIOUS changes made to admin/catalog page forms to protect against CSRF using security token
• VARIOUS changes for date fields to be handled consistently and to remove some pre-quoting which was breaking bindVars
• .htaccess – add safety around apache directives to prevent errors with poorly configured servers
• Disable language/currency sideboxes by default, to minimize some confusion
• Fix some collation errors encountered during upgrades
• Admin products-to-categories copier: Add additional message for clarity when Copy to categories_id is invalid but allow for obscure usage
• Admin orders page now passes unformatted value back for availability to customizations which want to redisplay the values differently.
• Incorporate TZ (timezone) support, with ability to override/disable simply by defining a DISABLE_MYSQL_TZ_SET constant. c/f http://www.zen-cart.com/forum/showthread.php?t=174346
• Improvement: Shorten CPU cycles on double-parsing an array needlessly in Authorize.net modules. Also improved sanitized debug output.

Bug Fixes

• BUGSFORUM-1774 – Add ‘secure’ flag support for session cookie when site is running entirely in SSL
• BUGSFORUM-1081 – Fixed: no default set for shipping radio buttons if module is disabled after previously selecting a shipping method
• BUGSFORUM-1347 – Remove file-based session handling support due to security concerns and chicken/egg situation caused by garbage collection processes
• BUGSFORUM-1497 – Admin order totals section of orders.php page ignored currency-formatting display rules in some cases
• BUGSFORUM-1550 – Fix occasional problem with "duplicate entry" in sessions table caused by some servers using longer session ID keys
• BUGSFORUM-1558 – typefilter incorrect lookup problem in case of (unlikely) file-not-found scenario
• BUGSFORUM-1554 – Shopping Cart Problems when updating product quantities for products with Max limit set
• BUGSFORUM-1564 – orders_status wrongly set to 0 in rare cases
• BUGSFORUM-1584 – no_picture.gif could be accidentally deleted if specified as an actual product image
• BUGSFORUM-1589 – Fixed problem with some downloadable orders where an update of an order might set the number of days to a wrong value
• BUGSFORUM-XXXX – PayPal improvements – allows Transaction ID to show on admin order confirmation emails for WPS, just like other payment modules do
• BUGSFORUM-XXXX – PayPal – partial fix for bug where currency code not specified during partial refunds causes request to fail
• BUGSFORUM-XXXX – PayPal – fixed bug where debug logging might happen even if switched off (caused by broader server-config issues)
• BUGSFORUM-XXXX – PayPal – fix bug in Express Checkout where a shipping-override would still send a shipping phone number, causing a 10001 error without explanation.
• BUGSFORUM-XXXX – PayPal – fix bug where EC button was removed from login page but left PayPal text prompts, resulting in confusion.
• BUGSFORUM-XXXX – PayPal – fix various rounding problems in all modules
• BUGSFORUM-XXXX – PayPal – Change to VPS-Timeout-90 instead of 45 at PayPal’s request. This means customers might have to wait longer for transactions to complete, but will reduce timeout errors when PayPal’s systems are slow.
• BUGSFORUM-XXXX – PayPal – include product ID number on line-item details since is needed for order fulfilment
• BUGSFORUM-1673 – PayPal – Fix minor html table syntax bug in PayPal history details on admin orders screen
• BUGSFORUM-1760 – PayPal – Fix problems with Hungarian Forint and other 0-decimal currencies
• BUGSFORUM-1926 – PayPal – Fix problem with attributes — if a product had attributes, the product name was being replaced with attribute details, instead of being appended to
• BUGSFORUM-1971 – PayPal – Trap cases where PayPal returns a blank address unexpectedly, and ask them to supply address details by creating an account
• BUGSFORUM-1971 – PayPal – Minimize address matching issues which arise when storeowners rename their countries to non-ISO standard names (something they should not do)
• BUGSFORUM-1892 – PayPal Express: Item details were shown as "Tax included in prices: 0 (0)"
• BUGSFORUM-1959 – PayPal IPN and Express Checkout Missing free Items, or listing free items without description
• BUGSFORUM-2024 – PayPal IPN – address-override alert might insert duplicate update notices in order status history
• BUGSFORUM-1613 – Media Manager Assign to Products wouldn’t allow assigning of new products due to security change in 1.3.9h
• BUGSFORUM-1696 – clear COUPON_GV_QUEUE when deleting an order
• BUGSFORUM-1681 – fix links in GV mails
• BUGSFORUM-1689 – email validation regex improvements
• BUGSFORUM-1634 – Bugfix: Prevent loading of non-PHP files in some admin autoloading routines
• BUGSFORUM-1650 – sanitize whosonline output
  Downloads – improvements and addition of support for IE9
• BUGSFORUM-1708 – Combine class methods to reduce chance of race conditions and add error suppression to filemtime
• BUGSFORUM-1645 – Adding Featured Products ERROR Warning Warning: Product ID already on Special
• BUGSFORUM-1709 Fix extraneous products_id in url
• BUGSFORUM-1783 Fix Virtual Product defaults for all core Product Types
• BUGSFORUM-1798 Preview icon was linked directly to product-general type. Now linked to the product type handler, allowing correct language defines to be loaded when previewing a product via this icon.
• BUGSFORUM-1862 status filter not retaining state, restrict to first char for safety
• BUGSFORUM-1754 change to calculate price/tax on zen_round(zen_add_tax(price,rate)*quantity, decimals)
• BUGSFORUM-1696 SQL error due to non-matching field name
• BUGSFORUM-1907 Fix ambiguous description on admin search switch
• BUGSFORUM-1905 Adjust schema to handle ipv6 addresses
• BUGSFORUM-1949 various ISO country updates
• BUGSFORUM-1973 Downloads might deliver an empty file if readfile() is disabled in PHP and symlink support is off
• BUGSFORUM-1592 – Fix rounding problems affecting coupon min-purchase eligibility calculations
• Fix bug in properly detecting SSL mode with zen_redirect calls
• Addressed SSL logoff scenario specific to shared SSL on shared hosting.
• Fix email error handling – was only setting error info if the message succeeded, thus always blank.
• Fix broken markup in admin layout-controller
• Fixed bug on Order History going to page not found when set to not display cart
• Fix: restore shopping cart products in the order they were added
• BUGSFORUM-1662 – Gift Certificates Will Not Release
• Fixed Error message when restricting coupons
• Fixed hard-coded table names which should have been using constants, to allow for prefixes properly.
• Fix problems with the word "search" in spiders.txt
• Fix to admin customer search: search for new customers by customers_email_address to get correct customer and not everyone named Smith
• Fixed display bug with category icons generating link to cPath=0 if cPath not set
• Fix the display of Discount Coupons when a redemption code is applied so it is more readable by the customer
• Fix Add to Cart to stay on listing when set to not display cart
• Fixed coupon admin screen to land on correct page after adding new coupon
• Various Admin pages: Fix pagination problems when changing status, searching, etc.
• Fix potential GZIP error if server configuration is overly generic

 
And all the security fixes and bugfixes from prior versions.

More Zen Cart:

1. Zen Cart version 1.39 BETA released today
2. Zen Cart version 1.39d – new version released
3. Zen Cart version 1.39c – new version released today
4. New version of Zen Cart – 1.39g – released today
5. New version of Zen Cart Released Today – 1.39e

There are two methods for achieving the same thing – removing the sub-category text link -  either by modifying the relevant code in your template’s override folder (this removes the text and link completely) or by modifying your template’s stylesheet (this effectively just hides the text and link).  We’re going to have a look at both methods here.

Method 1 – Modify module code

1. Open the category_row.php file located in the /includes/modules directory.
2. Find this section of code:

   $list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"','text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');

3. and replace with this: 

   $list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',  'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br /></a>');

4. Save the modified category_row.php file to your override folder.  This will be /includes/modules/CUSTOM/ where CUSTOM represents the name of your current template folder.

Method 2 – Modify stylesheet

1. Open the stylesheet.css file located in the /includes/templates/CUSTOM/css directory, where CUSTOM represents the name of your current template folder.
2. Add the following to the bottom of the file:

   .categoryListBoxContents a {visibility:hidden;}.categoryListBoxContents a img{visibility:visible;}

3. Save the modified stylesheet.css file.

And that’s it!  The page looks much cleaner and more professional now.

More Zen Cart:

1. Remove Category Product Counts from Category Sidebox in Zen Cart
2. Create a new sub-category in Zen Cart
3. Add links to the NavMain Menu in Zen Cart
4. Modifying the Zen Cart Breadcrumb Navigation to remove Home
5. Change Category Name in Zen Cart

With large, wide screen monitors being far more affordable today, many of your customers may be looking at a version of your store that is just too wide for comfortable viewing and reading.  Here we are going to show how to change this template to a fixed width (in pixels) using the CSS file.

To change the Simply Kerrin Zen Cart template to a fixed width design:

1. Open the stylesheet.css file located in the /includes/templates/simply_kerrin/css/ directory.
2. Find this section of code:

   #mainWrapper {
       text-align: left;
       width: 90%;
       vertical-align: top;
       border-bottom: 1px solid #677f39;
       }

3. and modify the width as required (A width of 1000px would suit most stores):

   #mainWrapper {
       text-align: left;
       width: 1000px;
       vertical-align: top;
       border-bottom: 1px solid #677f39;
       }

4. Save the modified stylesheet.css file to the same folder, ie the   /includes/templates/simply_kerrin/css/ folder.

More Zen Cart:

1. How do I change the width of my Zen Cart template?
2. Hi, I like your simply kerrin template. But, how do I change or remove “congratulations! you have…..” in simply kerrin template. I tried using the classic template method as suggested but couldn’t find index.php. Kindly advise, thank you.
3. Adding an image to the header of the Simply Kerrin Zen Cart Template with a centred logo
4. How to center your logo with the Simply Kerrin Zen Cart template
5. How do I add additional images in the header of the Simply Kerrin template?

So, if you’ve always wanted to add a slider to Zen Cart but just didn’t know how, this series of tutorials provides step-by-step instructions to help you add one of these popular sliders to your Zen Cart store.

1. Step-by-step guide to installing the Automatic Image Slider w/ CSS & jQuery from Soh Tanaka in Zen Cart
   

2. Step-by-step guide to installing Easy Slider 1.7 in Zen Cart

3. Step-by-step guide to installing Coda-Slider 2.0 in Zen Cart (coming soon)
4. Step-by-step guide to installing Nivo slider in Zen Cart (coming soon)
5. Step-by-step guide to installing s3slider in Zen Cart (coming soon)

More Zen Cart:

1. Step-by-step guide to installing the Automatic Image Slider w/ CSS & jQuery from Soh Tanaka in Zen Cart
2. Step-by-step guide to installing Easy Slider 1.7 in Zen Cart
3. Remove “Have you got yours yet?” Image from Home Page of Zen Cart
4. Zen Cart version 1.39a – now officially released!
5. Removing Breadcrumb Navigation from Zen Cart Home Page Only

The slider below demonstrates the Easy Slider using the automatic, horizontal and continuous settings.  Numeric paging is also available.

This tutorial provides detailed instructions to add the slider in between the define_main_page content and the first Center box.

Step 1 – Prepare images

The first step is to prepare the images you want to use in the slider.  The images should all be the same dimensions (exactly) and optimised for the web (for faster loading).  In this example I am using images sized to 660 x 240 pixels.  (Note, I have adjusted the width of the default Zen Cart template – Classic – to accommodate this slider size.

By default, these images are named slider1.jpg, slider2.jpg, slider3.jpg and slider4.jpg.  Save the images in the /includes/templates/CUSTOM/images/ where CUSTOM represents the name of your current template folder.

If you are keen to try the slider out first, you can download a copy of my demo images here.

If you wish to use the previous and next images (as shown below), right click to save each image to the images folder of your current template.
 

Step 2 – Load slider scripts

We are loading the slider scripts as a page-specific module as we want the slider to load only on the home page.

There is the Easy Slider 1.7 plugin script and I have prepared an Easy Slider Settings script for Zen Cart.  You can download both in a zip file – Easy Slider 1.7 for Zen Cart – here.

Upload the two files to the includes/modules/pages/index/ folder.

Note:  The Easy Slider Settings file has the basic options as shown in the demo above.  The additional controls are provided below.  There is more information available from the Easy Slider 1.7 page.

prevId: 		'prevBtn',
prevText: 		'Previous',
nextId: 		'nextBtn',
nextText: 		'Next',
controlsShow:		true,
controlsBefore:		'',
controlsAfter:		'',
controlsFade:		true,
firstId: 		'firstBtn',
firstText: 		'First',
firstShow:		false,
lastId: 		'lastBtn',
lastText: 		'Last',
lastShow:		false,
vertical:		false,
speed:			800,
auto:			false,
pause:			2000,
continuous:		false,
numeric: 		false,
numericId: 		'controls'

Step 3 – Load jQuery JavaScript Library

The jQuery library is a single JavaScript file, containing all of its common functions – such as the sliding effect used here. It can be included within a web page by either linking to a local copy or to a hosted copy on the Internet (for example, Google hosts a copy of the file). In this tutorial we are loading a local copy to our Zen Cart server.

1. Download a copy of the jQuery library from http://code.jquery.com/jquery-1.5.min.js.
2. Rename the file to jscript_jquery-1.5.min.js – as Zen Cart is programmed to look for this jscript_ prefix.
3. Upload the renamed file to the includes/templates/CUSTOM/jscript/ folder, where CUSTOM represents the name of your current template folder. If the jscript folder does not exist already, you will need to create one.

Step 4 – Include slider CSS in Zen Cart stylesheet

1. Open the stylesheet.css file located in the /includes/templates/template_default/css/ directory.
2. At the end of the file, add the following styles:

   /* // Easy Slider */
   
   	img{border:none;}
       /* image replacement */
           .graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
               margin:0;
               padding:0;
               display:block;
               overflow:hidden;
               text-indent:-8000px;
               }
       /* // image replacement */
   
   	#container{
   		margin:2em auto;
   		position:relative;
   		text-align:left;
   		width:660px;
   		background:#fff;
   		}
   	#header{
   		height:80px;
   		line-height:80px;
   		background:#5DC9E1;
   		color:#fff;
   		}
   	#content{
   		position:relative;
   		}			
   
   /* Easy Slider */
   
   	#slider ul, #slider li,
   	#slider2 ul, #slider2 li{
   		margin:0;
   		padding:0;
   		list-style:none;
   		}
   	#slider2{margin-top:1em;}
   	#slider li, #slider2 li{
   		/*
   			define width and height of list item (slide)
   			entire slider area will adjust according to the parameters provided here
   		*/
   		width:660px;
   		height:240px;
   		overflow:hidden;
   		}
   	#prevBtn, #nextBtn,
   	#slider1next, #slider1prev{
   		display:block;
   		width:30px;
   		height:77px;
   		position:absolute;
   		left:-30px;
   		top:71px;
   		z-index:1000;
   		}
   	#nextBtn, #slider1next{
   		left:660px;
   		}
   	#prevBtn a, #nextBtn a,
   	#slider1next a, #slider1prev a{
   		display:block;
   		position:relative;
   		width:30px;
   		height:77px;
   		background:url(../images/btn_prev.gif) no-repeat 0 0;
   		}
   	#nextBtn a, #slider1next a{
   		background:url(../images/btn_next.gif) no-repeat 0 0;
   		}	
   
   	/* numeric controls */	
   
   	ol#controls{
   		margin:1em 0;
   		padding:0;
   		height:28px;
   		}
   	ol#controls li{
   		margin:0 10px 0 0;
   		padding:0;
   		float:left;
   		list-style:none;
   		height:28px;
   		line-height:28px;
   		}
   	ol#controls li a{
   		float:left;
   		height:28px;
   		line-height:28px;
   		border:1px solid #ccc;
   		background:#DAF3F8;
   		color:#555;
   		padding:0 10px;
   		text-decoration:none;
   		}
   	ol#controls li.current a{
   		background:#5DC9E1;
   		color:#fff;
   		}
   	ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
   
   /* // Easy Slider */

3. Save the modified stylesheet.css file to your override folder. This will be /includes/templates/CUSTOM/css/ where CUSTOM represents the name of your current template folder.

Step 5 – Update Zen Cart home page to include slider

1. Open the tpl_index_default.php file located in the /includes/templates/template_default/templates/ directory.
2. Find this section of code:

   <?php
   /**
    * get the Define Main Page Text
    */
   ?>
   <div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
   <?php } ?>

3. and add this code directly under:

   <!-- bof Easy Slider 1.7 -->
   <div id="container">
   	<div id="content">
   		<div id="slider">
   			<ul>
   				<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider1.jpg" /></a>
   				<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider2.jpg" /></a>
   				<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider3.jpg" /></a>
   				<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider4.jpg" /></a>
   			</li></ul>
   		</div>
   	</div>
   </div>
   <!-- eof Easy Slider 1.7 -->

4. Update the image path to suit your current template name.  Save the modified tpl_index_default.php file to your override folder.  This will be /includes/templates/CUSTOM/templates/ where CUSTOM represents the name of your current template folder.

Script source from:  http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

More Zen Cart:

1. Step-by-step guide to installing the Automatic Image Slider w/ CSS & jQuery from Soh Tanaka in Zen Cart
2. Zen Cart Template – Step-by-Step Install Guide
3. Installing & Configuring Zen Cart – Full Step-by-Step Guide
4. Add an automatic slider to your Zen Cart home page
5. Principle 4: Personalised Shopping – Make it fun to shop and easy to buy

As the image links are styled within a ribbon, remember to take this into account when creating the images for your slider.

This tutorial provides detailed instructions to add the slider in between the define_main_page content and the first Center box.

Step 1 – Prepare images

The first step is to prepare the images you want to use in the slider.  The images should all be the same dimensions (exactly) and optimised for the web (for faster loading).  In this example I am using images sized to 660 x 240 pixels.  (Note, I have adjusted the width of the default Zen Cart template – Classic – to accommodate this slider size.

By default, these images are named slider1.jpg, slider2.jpg, slider3.jpg and slider4.jpg.  Save the images in the /includes/templates/CUSTOM/images/ where CUSTOM represents the name of your current template folder.

If you are keen to try the slider out first, you can download a copy of my demo images here.

If you wish to use the ribbon image (below), save this image in the images folder of your current template.

Step 2 – Load slider script

We are loading the slider script as a page-specific module as we want the script to load only on the home page.

I have prepared the Tanaka Slider script for Zen Cart and you can download a copy of the Tanaka Slider for Zen Cart file here.

Upload this file to the includes/modules/pages/index/ folder.  Note, the Zen Cart override system does not currently extend to this folder.

Step 3 – Load jQuery JavaScript Library

The jQuery library is a single JavaScript file, containing all of its common functions – such as the sliding effect used here. It can be included within a web page by either linking to a local copy or to a hosted copy on the Internet (for example, Google hosts a copy of the file). In this tutorial we are loading a local copy to our Zen Cart server.

1. Download a copy of the jQuery library from http://code.jquery.com/jquery-1.5.min.js.
2. Rename the file to jscript_jquery-1.5.min.js – as Zen Cart is programmed to look for this jscript_ prefix.
3. Upload the renamed file to the includes/templates/CUSTOM/jscript/ folder, where CUSTOM represents the name of your current template folder. If the jscript folder does not exist already, you will need to create one.

Step 4 – Include slider CSS in Zen Cart stylesheet

1. Open the stylesheet.css file located in the /includes/templates/template_default/css/ directory.
2. At the end of the file, add the following styles:

   /*--Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--*/
   
   /*--Main Container--*/
   .main_view {
   	position: relative;
   }
   /*--Window/Masking Styles--*/
   .window {
   	height:240px;	width: 660px;
   	overflow: hidden; /*--Hides anything outside of the set width/height--*/
   	position: relative;
   }
   .image_reel {
   	position: absolute;
   	top: 0; left: 0;
   }
   .image_reel img {float: left;}
   
   /*--Paging Styles--*/
   .paging {
   	position: absolute;
   	bottom: 10px; right: -3px;
   	width: 178px; height:47px;
   	z-index: 100; /*--Assures the paging stays on the top layer--*/
   	text-align: center;
   	line-height: 40px;
   	background: url(../images/paging_bg2.png) no-repeat;
   	display: none; /*--Hidden by default, will be later shown with jQuery--*/
   }
   .paging a {
   	padding: 5px;
   	text-decoration: none;
   	color: #fff;
   }
   .paging a.active {
   	font-weight: bold;
   	background: #920000;
   	border: 1px solid #610000;
   	-moz-border-radius: 3px;
   	-khtml-border-radius: 3px;
   	-webkit-border-radius: 3px;
   }
   .paging a:hover {font-weight: bold;}
   
   /*--End of Automatic Image Slider w/ CSS & jQuery from Soh Tanaka--*/

3. Save the modified stylesheet.css file to your override folder. This will be /includes/templates/CUSTOM/css/ where CUSTOM represents the name of your current template folder.

Step 5 – Update Zen Cart home page to include slider

1. Open the tpl_index_default.php file located in the /includes/templates/template_default/templates/ directory.
2. Find this section of code:

   <?php
   /**
    * get the Define Main Page Text
    */
   ?>
   <div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
   <?php } ?>

3. and add this code directly under:

   <!-- bof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->
   <div class="main_view">
       <div class="window">
           <div class="image_reel">
               <a href="#"><img src="includes/templates/CUSTOM/images/slider1.jpg" alt="" /></a>
               <a href="#"><img src="includes/templates/CUSTOM/images/slider2.jpg" alt="" /></a>
               <a href="#"><img src="includes/templates/CUSTOM/images/slider3.jpg" alt="" /></a>
               <a href="#"><img src="includes/templates/CUSTOM/images/slider4.jpg" alt="" /></a>
           </div>
       </div>
       <div class="paging">
           <a href="#" rel="1">1</a>
           <a href="#" rel="2">2</a>
           <a href="#" rel="3">3</a>
           <a href="#" rel="4">4</a>
       </div>
   </div>
   <script type="text/javascript" src="includes/templates/CUSTOM/jscript/jscript_jquery-1.5.min.js"></script>
   
   <!-- eof Automatic Image Slider w/ CSS & jQuery from Soh Tanaka -->

4. *Remember to update the path to the images and the  jQuery library to include your current template name. Save the modified tpl_index_default.php file to your override folder.  This will be /includes/templates/CUSTOM/templates/ where CUSTOM represents the name of your current template folder.

Script source from:  http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

More Zen Cart:

1. Step-by-step guide to installing Easy Slider 1.7 in Zen Cart
2. Add an automatic slider to your Zen Cart home page
3. Zen Cart Template – Step-by-Step Install Guide
4. Installing & Configuring Zen Cart – Full Step-by-Step Guide
5. How do I change the sidebox heading to an image?

In this tutorial, we are going to be setting the width to 1024px.  I prefer using a fixed width rather than a percentage so that I have more control over the design as the center column will be a consistent width for all users.

To change the width of the Zen Cart store front:

1. Open the stylesheet.css file located in the /includes/templates/CUSTOM/css/ directory where CUSTOM represents the name of your current template folder.
2. Find this section of code:

   /*wrappers - page or section containers*/
   #mainWrapper {
       background-color: #ffffff;
       text-align: left;
       width: 750px;
       vertical-align: top;
       border: 1px solid #9a9a9a;
       }

3. and modify the width selector as needed:

   /*wrappers - page or section containers*/
   #mainWrapper {
       background-color: #ffffff;
       text-align: left;
       width: 1024px;
       vertical-align: top;
       border: 1px solid #9a9a9a;
       }

4. Save the modified stylesheet.css file to your override folder.  This will be /includes/templates/CUSTOM/css/ where CUSTOM represents the name of your current template folder.

More Zen Cart:

1. How do I change the Simply Kerrin Zen Cart template from a fluid width to a fixed width?
2. Is it possible to change the width of the Zen Cart template?
3. How do I change the width of sideboxes in Zen Cart?
4. How do I change the sidebox heading to an image?
5. Change the default for Product Notification to Unchecked

Once GZip compression is turned on, it all happens in the background.  The visitor’s browser sends a header telling the web server that it accepts compressed content.  The web server then sends a response if the content is actually compressed.  For example, that the data has been compressed by GZip.  Turning on GZip can make your store pages more than 70% smaller.

Before turning on the GZip Compression setting in Zen Cart though, we need to check if your store pages are already compressed via a setting on your web server.  The Zen Cart setting should be set to Off in this case as compressing already compressed data may cause additional errors.

Check your web server compression setting

There are a couple of ways of checking if your web host’s configuration includes compression. 

Zen Cart Admin

1. Log in to your Zen Cart store Admin
2. From the Tools menu, select Server/Version Info.
   
3. Check the setting for Output Buffering.
    

HTTP compression check

1. Visit http://www.whatsmyip.org/http_compression/.
2. Type in your store address and click the Test button.
   
3. The results will be displayed.
   

Setting GZip Compression in Zen Cart

If the above tests show that your web server is already configured for http compression, leave your Zen Cart settings as the default (Off).

If, however, you find that your store pages are not currently being compressed (as in the results above), then turning on GZip Compression will result in significantly smaller data sizes being delivered to your store visitor’s browser.

To turn on GZip Compression for your Zen Cart store:

1. Log in to your Zen Cart store Admin
2. From the Configuration menu, select GZip Compression.
   
3. Click on Edit to enable GZip Compression.  Select 1 to turn on GZip Compression and then click the Update button to save the setting.
   

Rerun the tests above to check that the GZip Compression has now been implemented for your store.

More Zen Cart:

1. Disable Text Pricing by word or letter to increase Zen Cart performance
2. Disable Downloads to increase Zen Cart performance
3. Disable Price Factor to increase Zen Cart performance
4. Disable Qty Price Discount to increase Zen Cart performance
5. Disable Attribute Images to increase Zen Cart performance

To replace a sidebox heading with an image:

1. First up you will need to create the image that you want to use for the sidebox heading.  Remember to keep the image width within your column width.
2. Upload the image via your FTP client to the images folder for your current template, /includes/templates/CUSTOM/images/.
3. Next, open the english.php file located in the /includes/languages/ directory.
4. Find this section of code:

   // categories box text in sideboxes/categories.php
    define('BOX_HEADING_CATEGORIES', 'Categories');

5. and modify the define statement to include the call to the required image:

   // categories box text in sideboxes/categories.php
    define('BOX_HEADING_CATEGORIES', '<img src="/includes/templates/CUSTOM/images/categories.jpg" />');

   Make sure you copy the image name exactly, remembering that your web server is likely to be case sensitive.

   ** Be sure to keep the single quote marks in your new define statement.
   

6. Save the modified english.php file to your override folder.  This will be /includes/languages/CUSTOM/ where CUSTOM represents the name of your current template folder.

More Zen Cart:

1. Change name of Categories sidebox Heading in Zen Cart
2. Change name of More Information sidebox Heading in Zen Cart
3. Change name of Bestsellers sidebox Heading in Zen Cart
4. Change name of Page 2 Link in More Information Sidebox
5. Update Page Heading of Page 2, Page 3 or Page 4 in More Information sidebox