Zen Cart Preview EmailThe Preview Email mod allows you to see the largest files in your Zen Cart installation.
Donate: This is free software. Show your appreciation by supporting my efforts.
Relevance: Zen Cart™ 1.5.5 and above
Current Version: 1.0
Availability: Coming soon!
Support Thread: Preview Email Support Thread
Cost: Free, but donation appreciated
Installed Cost: $60.00 Buy Professional Installation by That Software Guy
Installation Difficulty: Easy, but actually improving your emails requires web skills.
Installation Instructions: click here
Common Installation Issues: click here
Location: Zen Cart Plugins, under Admin Tools
Download: Preview Email in Zen Cart Plugins
FAQ: click here
Overview:Zen Cart provides HTML formatted emails for a variety of situations - but you have to create your own CSS. This can be time consuming to develop and test. Preview Email allows you to see how emails Zen Cart sends will look directly from your admin panel. It fabricates the fields required by the email using real data from your cart. For example, previewing the Checkout email uses order data from the last 20 checkouts in your cart.
To run Preview Email, follow the installation instructions below, then go to Admin->Customers->Preview Email. Select one of the emails shown and press the preview button. This is what an order confirmation email looks like before any changes have been made.
Preview Email in Zen Cart Admin - Before
Now remember that browsers cache CSS, so as you change your CSS, you'll need to clear your cache. There are a few ways of doing this, but the one I use most often is detailed in this StackOverflow post.
The first thing we'd like to do is get rid of the pink and green. Again, there are many ways to discover the class you'd like to modify; the one I use is Chrome Devtools. This shows us that the green class is
email/email_common.cssand change the
order-detail-area(to, say, #FFF). Similarly, change the background color on the comments class, and things will be looking better already. Refresh the admin page where you are running Preview Email, and you'll see something like this:
Preview Email in Zen Cart Admin - Phase 2
Much better! But now we can really notice that the box with the order line items and the box with the address information are overflowing their bounds. Using your DOM inspector, you can discover that the relevant class here is
order-detail-area. The comments class is a bit too wide also. Tighten those up to 520px, and things look better.
Preview Email in Zen Cart Admin - Phase 3
But now, if we use Chrome Inspect (or any similar tool) to render the page as if it was viewed on a mobile device, we see we still have an issue.
Preview Email in Zen Cart Admin - Mobile Display
You'll notice a couple of issues - the address information box is too wide, and the horizontal line separating billing and shipping overflows a bit beyond the table border.
Let's fix this. As you can imagine, there's a media query which needs a bit of adjusting. We'll just tweak this, and voila!
Preview Email in Zen Cart Admin - Mobile Display FIXED
- Back up everything! Try this in a test environment prior to installing it on a live shop.
- Copy the contents of the unzipped folder to the root directory of your shop.
- Run the preview_email.sql file against your database, using Admin->Tools->Install SQL Patches.
- Abandoned Cart (see the required changes).
Common Installation Issues:
- Making Abandoned Cart emails work:
To make abandoned cart work, you must move the file
Then, replace the contents of
<?php // File is now shared with the catalog side require_once(DIR_FS_CATALOG . "/includes/languages/english/recover_cart_sales_base.php");
- Handling additional fields you have added to your email templates:
A file is provided called
admin/includes/functions/extra_functions/custom_preview_email.php. Place your customizations in there, following the example provided.
Resources on Zen Cart Email
- 1.0 11/01/2018 - First Release
FAQQ: I have a brand new cart and Preview Email doesn't work!
A: Preview Email assumes you have at least 20 orders, customers and saved carts. If the number is smaller than this because it's a brand new installation, just modify
PREVIEW_LOOKBACK_COUNTat the top of the file to 1.
Q: I have 1.5.4 and I'd like to use this mod! What can I do?
A: This mod depends on the newer 1.5.5 email templates, which include the
email/email_common.cssfile. Your best route is to upgrade your cart, but if you can't do that immediately, you can make it work in 1.5.4 by making the following changes:
- Copy the contents of the
includes/functions/functions_email.phpto use the 1.5.5f version of
- Pull the EMAIL_LOGO_* definitions from a 1.5.5f copy of