Zen Cart Preview EmailThe Preview Email mod allows you to easily test styling changes to Zen Cart HTML emails.
Donate: This is free software. Show your appreciation by supporting my efforts.
Relevance: Zen Cart™ 1.5.5 - 1.5.7
Current Version: 1.4 (version history)
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 CSS skills.
Installation Instructions: click here for installation instructions
Common Installation Issues: click here for installation issues
Location: Zen Cart Plugins, under Admin Tools
Download: Preview Email in Zen Cart Plugins
FAQ: click here for FAQ
Overview:Zen Cart provides HTML formatted emails for a variety of situations - but customizing them can be time consuming. 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 the order data from one of 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 (circa Zen Cart 1.5.5).
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
commentsclass is also a bit too wide. 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
Direct EmailZen Cart offers the ability to send an email to a customer or group of customers from the Admin > Tools > Send Email screen. Since this email has no pre-defined content, I thought the easiest way to allow you to test and refine it would be to read from a test HTML file. Accordingly, if you place a file called
direct_test.htmlat the root of your cart, Preview Email will read and display this file.
In the example below, I have used a newsletter sent out by MailChimp. The only change I made to what came from MailChimp was to reduce the width of the
tablewhich the content was placed in. For clarity, I made the background of the email white, which can be done either by editing
email/email_common.cssor by adding to the
styleblock in the template. (Obviously you'd want to edit this further to reduce whitespace, etc. before sending the email.)
- 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.
- Contact Us
- GV Mail
- GV Queue
- GV Sent
- Order Status
- Password Forgotten
- Product Notification
Also some emails based on mods:
- Abandoned Cart (see abandoned cart required changes)
- Back In Stock plugins - both Ceon's and Larry Bislew's versions (see back in stock)
Common Installation Issues:
- If you're running one of the newer versions of One Page Checkout, see this forum post for the changes needed to use Preview Email
- Back In Stock emails:
Ceon Back In Stock Notification and
Ajax Back In Stock are supported.
- Making Abandoned Cart emails work:
The abandoned cart email is sent by the Recover Cart Sales mod.
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.
- Remember that language file definitions are defined constants that can only be set once. This means that if the admin side defines a constant (say,
EMAIL_LOGO_FILENAME), your storefront override won't change it in Preview Email. For most things this is not an issue, since the admin and storefront will most likely match, but it could be a source of confusion when they don't. If this occurs, Preview Email will be a less than perfect imitation of what will actually be sent.
Resources on Zen Cart Email
- 1.4 05/23/2022 - Updates for PHP 1.5.7, fix PHP notices.
- 1.3.1 06/21/2021 - Add support for Ceon's Back in Stock plugin
- 1.3 08/01/2020 - Allow population of direct email with test content
- 1.2 05/07/2020 - More email types
- 1.1 03/05/2020 - Updates for 1.5.6
- 1.0 11/01/2018 - First Release
FAQQ: What's the difference between Preview Email and Test Checkout Email ?
A: Preview Email shows you what one of the HTML emails sent by the cart (including the checkout email) will look like after you make changes to the HTML template and CSS. Test Checkout Email actually *re-sends* a checkout email for an order to the store owner, so you can verify both the text and HTML emails after making changes.
Q: 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