Common Email Styling — Zen Cart v1.5.3, v1.5.4

Version 1.1.0

Current Support Thread at Zen Cart Forums: https://www.zen-cart.com/showthread.php?218418-Common-Email-Styling-Support-Thread

Version History

Introduction

In the current implementation of the Zen Cart emails, each HTML email template is stand-alone. If you want to replace the header image (header.jpg) with a beautiful gif-image that you just created, you'll edit all thirteen (13) templates1. If you want to change the background and/or text coloring to get a consistent look-and-feel for your store, you'll edit all thirteen templates.

Once Common Email Styling is installed, if you want to change the name or dimensions of your HTML emails' logo, you make those changes in two (2) places … one for the store-side emails and one for those sent from your admin. When you want to change the styling for your emails, you simply edit the file /email/email_common.css and the styling applies to all email templates.

1I'm not counting the email_template_tell_a_friend.html file, which is no longer used by any of the as-shipped Zen Cart processing.

This plugin modifies all of the built-in Zen Cart HTML email templates:

  1. Uses a common set of CSS styling that applies to all emails (and newsletters) sent by your store.
  2. Uses a common set of PHP constants to identify the logo image (and its dimensions) to be included in the emails' header.
  3. Adds a unique HTML id tag to the body of each email template, using the portion of a template's file-name after the email_template_ characters — e.g. for email_template_checkout.html, the id is checkout.
  4. Adds a viewport meta tag to the email's head, making it possible to create styling for multiple screen sizes.

Customization

To customize your emails, you'll edit (using a text-file editor like Notepad++) one of three files:

  1. /email/email_common.css. This file contains the CSS styling that is applied to every HTML email sent from your store.
  2. /includes/languages/english/YOUR_TEMPLATE/email_extras.php. This file has been updated to include constants that define the emails' logo file-name, text to be used for the alt/title tage and the image's width/height dimensions. There's also, starting with v1.1.0, a constant with which you can add some "extra" information to each email's logo/header area (like the store address or phone number).
  3. /YOUR_ADMIN/includes/languages/english/email_extras.php. This file contains the same five (5) constants as the store-side language file, which should mimic the store-side settings.

Installation

There are core-file overwrites in this plugin, but no database changes; you should always backup your cart's database and files prior to making any changes.

  1. After unzipping the plugin's package file, rename the YOUR_ADMIN folder to match your custom admin folder's name and the YOUR_TEMPLATE folder to match your current template's name.
  2. Copy the plugin's files to your Zen Cart file-system:
    1. /email/email_common.css
    2. /email/email_template_checkout.html
    3. /email/email_template_contact_us.html
    4. /email/email_template_coupon.html
    5. /email/email_template_default.html
    6. /email/email_template_direct_mail.html
    7. /email/email_template_gv_mail.html
    8. /email/email_template_gv_queue.html
    9. /email/email_template_gv_send.html
    10. /email/email_template_low_stock.html
    11. /email/email_template_newsletters.html
    12. /email/email_template_order_status.html
    13. /email/email_template_password_forgotten.html
    14. /email/email_template_product_notification.html
    15. /email/email_template_welcome.html
    16. /includes/functions/functions_email.php
    17. /includes/languages/english/YOUR_TEMPLATE/email_extras.php
    18. /YOUR_ADMIN/includes/languages/english/email_extras.php
  3. Follow the instructions in the Customization section to customize the look and feel of the emails to match your store.

Uninstall

Replace all of the files copied to install the plugin with the version captured when you backed up.